javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(toggle): add more examples to toggle

Browse Source
This commit is contained in:
Brandy Carney
2017-08-24 19:38:18 -04:00
parent ace8ab8693
commit e4551397f1
1 changed files with 77 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/core/src/components/toggle/test/basic.html
View File

@ -2,20 +2,94 @@
<html dir="ltr"> <html dir="ltr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ionic Toggles</title> <title>Ionic Toggle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Toggles</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-label>Toggle</ion-label> <ion-label>Apple</ion-label>
<ion-toggle checked slot="end"></ion-toggle> <ion-toggle slot="start" name="apple" checked></ion-toggle>
</ion-item> </ion-item>
<ion-item>
<ion-label>Banana</ion-label>
<ion-toggle slot="start" name="banana" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Cherry, disabled</ion-label>
<ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-toggle slot="end" color="danger" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Checkbox right side</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>
</ion-list> </ion-list>
<p aria-hidden="true" text-center>
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
<ion-button onClick="printForm()" outline small>Print Form</ion-button>
</p>
<p>
<ion-toggle id="standAloneChecked"></ion-toggle>
Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
</p>
</ion-content> </ion-content>
<script>
function printForm(ev) {
console.log('TODO get working with forms');
}
function toggleBoolean(id, prop) {
var ele = document.getElementById(id);
var isTrue = ele[prop] ? false : true;
ele[prop] = isTrue;
console.log('in toggleBoolean, setting', prop, 'to', isTrue);
}
</script>
</ion-app> </ion-app>
</body> </body>
</html> </html>