mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
5119b57496
the demo has been changed to show multiple segments in use, instead of a lot of segments thrown on the page. fixes driftyco/ionic-site#658
76 lines
2.1 KiB
HTML
76 lines
2.1 KiB
HTML
<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 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" 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" 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" danger></ion-icon>
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
<ion-toolbar no-border-top no-border-bottom>
|
|
<ion-segment [(ngModel)]="weather" 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>
|