javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): update toggle demo

Browse Source
This commit is contained in:
Adam Bradley
2016-02-18 14:49:20 -06:00
parent 10503a8997
commit 87364db977
2 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
demos/toggle/index.ts
View File

@ -3,4 +3,23 @@ import {App} from 'ionic/ionic';
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class ApiDemoApp {} class ApiDemoApp {
data;
constructor() {
this.data = {
frodo: true,
sam: false,
eowyn: true,
legolas: true,
gimli: false,
saruman: true,
gandalf: true,
arwen: false,
boromir: false,
gollum: true,
galadriel: false
};
}
}

34
demos/toggle/main.html
View File

@ -7,65 +7,59 @@
<ion-item> <ion-item>
<ion-label>Frodo Baggins</ion-label> <ion-label>Frodo Baggins</ion-label>
<ion-toggle value="foo" checked="true"></ion-toggle> <ion-toggle [(ngModel)]="data.frodo"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Sam</ion-label> <ion-label>Sam</ion-label>
<ion-toggle energized></ion-toggle> <ion-toggle [(ngModel)]="data.sam"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label> Éowyn</ion-label> <ion-label>Éowyn</ion-label>
<ion-toggle danger checked="true"></ion-toggle> <ion-toggle [(ngModel)]="data.eowyn" danger></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Legolas <ion-label>Legolas</ion-label>
</ion-label> <ion-toggle [(ngModel)]="data.legolas" disabled="true"></ion-toggle>
<ion-toggle royal checked="true"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Gimli</ion-label> <ion-label>Gimli</ion-label>
<ion-toggle danger></ion-toggle> <ion-toggle [(ngModel)]="data.gimli" danger></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Saruman</ion-label> <ion-label>Saruman</ion-label>
<ion-toggle dark checked="true"></ion-toggle> <ion-toggle [(ngModel)]="data.saruman" dark></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Gandalf</ion-label> <ion-label>Gandalf</ion-label>
<ion-toggle energized checked="true"></ion-toggle> <ion-toggle [(ngModel)]="data.gandalf" secondary></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Arwen</ion-label> <ion-label>Arwen</ion-label>
<ion-toggle royal></ion-toggle> <ion-toggle [(ngModel)]="data.arwen" disabled="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Treebeard</ion-label>
<ion-toggle secondary checked="true"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Boromir</ion-label> <ion-label>Boromir</ion-label>
<ion-toggle royal></ion-toggle> <ion-toggle [(ngModel)]="data.boromir"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Gollum</ion-label> <ion-label>Gollum</ion-label>
<ion-toggle dark checked="true"></ion-toggle> <ion-toggle [(ngModel)]="data.gollum" dark></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Galadriel</ion-label> <ion-label>Galadriel</ion-label>
<ion-toggle energized></ion-toggle> <ion-toggle [(ngModel)]="data.galadriel" secondary></ion-toggle>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>