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
72 lines
1.8 KiB
HTML
72 lines
1.8 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>Range</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content class="outer-content">
|
|
|
|
<ion-list>
|
|
<ion-list-header>
|
|
Brightness
|
|
<ion-badge item-right>{{brightness}}</ion-badge>
|
|
</ion-list-header>
|
|
<ion-item>
|
|
<ion-range [(ngModel)]="brightness">
|
|
<ion-icon range-left small name="sunny"></ion-icon>
|
|
<ion-icon range-right name="sunny"></ion-icon>
|
|
</ion-range>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<ion-list>
|
|
<ion-list-header>
|
|
Saturation
|
|
<ion-badge item-right secondary>{{saturation}}</ion-badge>
|
|
</ion-list-header>
|
|
<ion-item>
|
|
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
|
|
<ion-label range-left>-200</ion-label>
|
|
<ion-label range-right>200</ion-label>
|
|
</ion-range>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<ion-list>
|
|
<ion-list-header>
|
|
Warmth
|
|
<ion-badge item-right danger>{{warmth}}</ion-badge>
|
|
</ion-list-header>
|
|
<ion-item>
|
|
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
|
|
<ion-icon range-left small danger name="thermometer"></ion-icon>
|
|
<ion-icon range-right danger name="thermometer"></ion-icon>
|
|
</ion-range>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<ion-list>
|
|
<ion-list-header>
|
|
Structure
|
|
<ion-badge item-right dark>{{structure.lower}}</ion-badge>
|
|
<ion-badge item-right dark>{{structure.upper}}</ion-badge>
|
|
</ion-list-header>
|
|
<ion-item>
|
|
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
|
|
<ion-label range-left>-0</ion-label>
|
|
<ion-label range-right>100</ion-label>
|
|
</ion-range>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
ion-list + ion-list {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|