mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
938864e8d0
BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
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 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" 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>
|