ionic/demos/src/segment/page.html at polyfill-changes · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<ion-header>

  <ion-navbar no-border-bottom>
    <ion-title>Segment</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="appType">
      <ion-segment-button value="Paid">
        Paid
      </ion-segment-button>
      <ion-segment-button value="Free">
        Free
      </ion-segment-button>
      <ion-segment-button value="Top">
        Top
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>

<ion-content class="outer-content">
  <ion-list>
    <ion-list-header>{{ appType }}</ion-list-header>
    <ion-item *ngFor="let item of getItems(appType)">
      {{ item.name }}
      <button ion-button outline item-right>{{ item.price }}</button>
    </ion-item>
  </ion-list>

  <ion-card>
    <ion-card-header>
      {{ safari }}
    </ion-card-header>
    <ion-card-content>
      <ion-segment [(ngModel)]="safari" color="dark">
        <ion-segment-button value="Bookmarks">
          <ion-icon name="book"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="Reading List">
          <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="Shared Links">
          <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
        </ion-segment-button>
      </ion-segment>
      <ion-list style="margin: 0" inset>
        <button ion-item *ngFor="let sItem of getSafariItems(safari)">
          <ion-icon item-left [name]="sItem.icon" color="primary"></ion-icon>
          {{ sItem.name }}
        </button>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-footer>
  <ion-toolbar no-border-bottom>
    <ion-title>
      Weather: {{ weather == 'sunny' ? '96' : '77' }}°
      <ion-icon [name]="weather" color="danger"></ion-icon>
    </ion-title>
  </ion-toolbar>
  <ion-toolbar no-border-top no-border-bottom>
    <ion-segment [(ngModel)]="weather" color="danger">
      <ion-segment-button value="sunny">
        Sunny
      </ion-segment-button>
      <ion-segment-button value="rainy" checked>
        Rainy
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-footer>