mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
05c7b8f0d7
- add spacing between imports - alphabetize imports - removed app.html files in favor of an inline ion-nav - cleaned up config demo so it uses proper syntax - use file name main.html for the first page for the demo - name the app ApiDemoApp and first page ApiDemoPage - replace the ion-toolbars with ion-navbars closes #7019 closes driftyco/ionic-site#647
148 lines
3.7 KiB
HTML
148 lines
3.7 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<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-toolbar no-border-top>
|
|
<ion-segment [(ngModel)]="news" secondary>
|
|
<ion-segment-button value="worldwide">
|
|
Worldwide
|
|
</ion-segment-button>
|
|
<ion-segment-button value="local">
|
|
Local
|
|
</ion-segment-button>
|
|
<ion-segment-button value="headlines">
|
|
Headlines
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
|
|
<ion-segment-button value="bookmarks">
|
|
<ion-icon name="book"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="history">
|
|
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="links">
|
|
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-segment [(ngModel)]="favorites" danger>
|
|
<ion-segment-button value="featured">
|
|
Featured
|
|
</ion-segment-button>
|
|
<ion-segment-button value="recent">
|
|
Recent
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content padding>
|
|
|
|
<p>Segments can be placed in a toolbar or anywhere in the content.</p>
|
|
|
|
<ion-segment [(ngModel)]="purchased" primary margin-bottom>
|
|
<ion-segment-button value="all">
|
|
All
|
|
</ion-segment-button>
|
|
<ion-segment-button value="not">
|
|
Not on This Phone
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment [(ngModel)]="mapStyle" secondary margin-bottom>
|
|
<ion-segment-button value="standard">
|
|
Standard
|
|
</ion-segment-button>
|
|
<ion-segment-button value="hybrid">
|
|
Hybrid
|
|
</ion-segment-button>
|
|
<ion-segment-button value="sat">
|
|
Satellite
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment [(ngModel)]="teslaModels" danger margin-bottom>
|
|
<ion-segment-button value="S">
|
|
Model S
|
|
</ion-segment-button>
|
|
<ion-segment-button value="X">
|
|
Model X
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3">
|
|
Model 3
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
</ion-content>
|
|
|
|
|
|
<ion-footer>
|
|
|
|
<ion-toolbar no-border-bottom primary>
|
|
<ion-segment [(ngModel)]="pet" light>
|
|
<ion-segment-button value="puppies">
|
|
Puppies
|
|
</ion-segment-button>
|
|
<ion-segment-button value="kittens">
|
|
Kittens
|
|
</ion-segment-button>
|
|
<ion-segment-button value="ducklings">
|
|
Ducklings
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-bottom dark>
|
|
<ion-segment [(ngModel)]="calendar" primary>
|
|
<ion-segment-button value="list">
|
|
List
|
|
</ion-segment-button>
|
|
<ion-segment-button value="day">
|
|
Day
|
|
</ion-segment-button>
|
|
<ion-segment-button value="month" checked>
|
|
Month
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-bottom danger>
|
|
<ion-segment [(ngModel)]="proxy" light>
|
|
<ion-segment-button value="off">
|
|
Off
|
|
</ion-segment-button>
|
|
<ion-segment-button value="manual">
|
|
Manual
|
|
</ion-segment-button>
|
|
<ion-segment-button value="auto">
|
|
Auto
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
</ion-footer>
|