javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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">
<head>
<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">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Toggles</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle checked slot="end"></ion-toggle>
<ion-label>Apple</ion-label>
<ion-toggle slot="start" name="apple" checked></ion-toggle>
</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>
<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>
<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>
</body>
</html>