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

fix(all): use ion-page

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-10-22 21:03:57 +02:00
parent 84080d4a5b
commit 10c77e7513
27 changed files with 2305 additions and 2261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/core/src/components/action-sheet/test/basic.html
View File

@ -10,23 +10,25 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button id="basic" block onclick="presentBasic()">Basic</ion-button>
<ion-button id="noBackdropDismiss" block onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button id="alertFromActionSheet" block onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button id="scrollableOptions" block onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button id="scrollWithoutCancel" block onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button id="cancelOnly" block onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-button id="basic" block onclick="presentBasic()">Basic</ion-button>
<ion-button id="noBackdropDismiss" block onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button id="alertFromActionSheet" block onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button id="scrollableOptions" block onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button id="scrollWithoutCancel" block onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button id="cancelOnly" block onclick="presentCancelOnly()">Cancel Only</ion-button>
</ion-content>
</ion-content>
</ion-page>
</ion-app>
<script>
@ -299,4 +301,4 @@
</script>
</body>
</html>
</html>

34
packages/core/src/components/alert/test/basic.html
View File

@ -10,24 +10,26 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Alerts</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Alerts</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-alert-controller></ion-alert-controller>
<ion-content padding>
<ion-alert-controller></ion-alert-controller>
<ion-button block onclick="presentAlert()">Alert</ion-button>
<ion-button block onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
<ion-button block onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
<ion-button block onclick="presentAlertNoMessage()">Alert No Message</ion-button>
<ion-button block onclick="presentAlertConfirm()">Confirm</ion-button>
<ion-button block onclick="presentAlertPrompt()">Prompt</ion-button>
<ion-button block onclick="presentAlertRadio()">Radio</ion-button>
<ion-button block onclick="presentAlertCheckbox()">Checkbox</ion-button>
</ion-content>
<ion-button block onclick="presentAlert()">Alert</ion-button>
<ion-button block onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
<ion-button block onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
<ion-button block onclick="presentAlertNoMessage()">Alert No Message</ion-button>
<ion-button block onclick="presentAlertConfirm()">Confirm</ion-button>
<ion-button block onclick="presentAlertPrompt()">Prompt</ion-button>
<ion-button block onclick="presentAlertRadio()">Radio</ion-button>
<ion-button block onclick="presentAlertCheckbox()">Checkbox</ion-button>
</ion-content>
</ion-page>
</ion-app>
<script>

106
packages/core/src/components/button/test/basic.html
View File

@ -8,73 +8,75 @@
</head>
<body>
<ion-app>
<ion-content>
<ion-button button-type="bar-button">Test button</ion-button>
<ion-page>
<ion-content>
<ion-button button-type="bar-button">Test button</ion-button>
<ion-button button-type="test-button">Test button</ion-button>
<ion-button button-type="test-button">Test button</ion-button>
<ion-button button-type="test-button" class="my-test-button">Test button w/ class</ion-button>
<ion-button button-type="test-button" class="my-test-button">Test button w/ class</ion-button>
<ion-button button-type="alert-radio-button">
Alert button
</ion-button>
<ion-button button-type="alert-radio-button">
Alert button
</ion-button>
<ion-button button-type="alert-radio-button" class="alert-tappable alert-radio" role="radio">
Alert button w/ class & role
</ion-button>
<ion-button button-type="alert-radio-button" class="alert-tappable alert-radio" role="radio">
Alert button w/ class & role
</ion-button>
<ion-button href="#">Anchor Button</ion-button>
<a href="#">Anchor Link</a>
<ion-button href="#">Anchor Button</ion-button>
<a href="#">Anchor Link</a>
<h4>Colors</h4>
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<h4>Colors</h4>
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<h4>Shapes</h4>
<ion-button full>Full Button</ion-button>
<ion-button block>Block Button</ion-button>
<ion-button round>Round Button</ion-button>
<h4>Shapes</h4>
<ion-button full>Full Button</ion-button>
<ion-button block>Block Button</ion-button>
<ion-button round>Round Button</ion-button>
<h4>Outlines</h4>
<ion-button full outline>Outline + Full + No Color</ion-button>
<ion-button color="secondary" full outline>Outline + Full</ion-button>
<ion-button color="secondary" block outline>Outline + Block</ion-button>
<ion-button color="secondary" round outline>Outline + Round</ion-button>
<h4>Outlines</h4>
<ion-button full outline>Outline + Full + No Color</ion-button>
<ion-button color="secondary" full outline>Outline + Full</ion-button>
<ion-button color="secondary" block outline>Outline + Block</ion-button>
<ion-button color="secondary" round outline>Outline + Round</ion-button>
<h4>Clear</h4>
<ion-button full clear>Clear + Full + No Color</ion-button>
<ion-button color="danger" full clear>Clear + Full</ion-button>
<ion-button color="danger" block clear>Clear + Block</ion-button>
<ion-button color="danger" round clear>Clear + Round</ion-button>
<h4>Clear</h4>
<ion-button full clear>Clear + Full + No Color</ion-button>
<ion-button color="danger" full clear>Clear + Full</ion-button>
<ion-button color="danger" block clear>Clear + Block</ion-button>
<ion-button color="danger" round clear>Clear + Round</ion-button>
<h4>Icons</h4>
<h4>Icons</h4>
<ion-button color="dark">
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button color="dark">
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button color="dark">
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button color="dark">
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button color="dark">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<ion-button color="dark">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<h4>Sizes</h4>
<ion-button color="light" large>Large</ion-button>
<ion-button color="light">Default</ion-button>
<ion-button color="light" small>Small</ion-button>
<h4>Sizes</h4>
<ion-button color="light" large>Large</ion-button>
<ion-button color="light">Default</ion-button>
<ion-button color="light" small>Small</ion-button>
<h4>States</h4>
<ion-button disabled>Large</ion-button>
<ion-button color="secondary" disabled clear>Large</ion-button>
</ion-content>
<h4>States</h4>
<ion-button disabled>Large</ion-button>
<ion-button color="secondary" disabled clear>Large</ion-button>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

438
packages/core/src/components/button/test/toolbar.html
View File

@ -8,241 +8,243 @@
</head>
<body>
<ion-app>
<ion-content>
<ion-toolbar no-padding>
<ion-title>This should have no padding</ion-title>
</ion-toolbar>
<ion-page>
<ion-content>
<ion-toolbar no-padding>
<ion-title>This should have no padding</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="mode-start">
<ion-button class="closeButton" clear>
Close
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="mode-start">
<ion-button class="closeButton" clear>
Close
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary" class="activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary" class="activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
<ion-icon name="create" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
<ion-icon name="create" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-button menuToggle slot="start">
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-toolbar>
<ion-button menuToggle slot="start">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button1 (click)="buttonClick(button1)">
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button1 (click)="buttonClick(button1)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-button menuToggle slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-button menuToggle slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

174
packages/core/src/components/checkbox/test/basic.html
View File

@ -8,101 +8,103 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Checkboxes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Checkboxes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Apple</ion-label>
<ion-checkbox slot="start" name="apple" checked></ion-checkbox>
</ion-item>
<ion-list>
<ion-item>
<ion-label>Apple</ion-label>
<ion-checkbox slot="start" name="apple" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Banana</ion-label>
<ion-checkbox slot="start" name="banana" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Cherry, disabled</ion-label>
<ion-checkbox slot="start" color="danger" name="cherry" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-checkbox slot="start" id="grapeChecked" name="grape" checked disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-checkbox slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-checkbox slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox right side</ion-label>
<ion-checkbox slot="end" checked></ion-checkbox>
</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-checkbox id="standAloneChecked"></ion-checkbox>
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
</p>
<p aria-hidden="true" padding>
<code>appleCtrl.value: <span id="appleCtrlValue"></span></code><br>
<code>bananaCtrl.value: <span id="bananaCtrlValue"></span></code><br>
<code>cherry.value: <span id="cherryCtrlValue"></span></code><br>
<code>grape.value: <span id="grapeCtrlValue"></span></code><br>
<code>kiwiValue: <spa id="kiwiValue"></span></code><br>
<code>strawberryValue: <span id="strawberryValue">y</span></code><br>
</p>
<pre aria-hidden="true" padding id="formResults"></pre>
<ion-item>
<ion-label>Banana</ion-label>
<ion-checkbox slot="start" name="banana" checked></ion-checkbox>
<ion-label>Checkbox / Toggle</ion-label>
<ion-checkbox slot="start" id="checked"></ion-checkbox>
<ion-toggle id="checked"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Cherry, disabled</ion-label>
<ion-checkbox slot="start" color="danger" name="cherry" disabled></ion-checkbox>
<ion-label>Checked</ion-label>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-toggle checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-checkbox slot="start" id="grapeChecked" name="grape" checked disabled></ion-checkbox>
<ion-label>Disabled</ion-label>
<ion-checkbox slot="start" disabled></ion-checkbox>
<ion-toggle disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-checkbox slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-checkbox slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox right side</ion-label>
<ion-checkbox slot="end" checked></ion-checkbox>
</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-checkbox id="standAloneChecked"></ion-checkbox>
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
</p>
<p aria-hidden="true" padding>
<code>appleCtrl.value: <span id="appleCtrlValue"></span></code><br>
<code>bananaCtrl.value: <span id="bananaCtrlValue"></span></code><br>
<code>cherry.value: <span id="cherryCtrlValue"></span></code><br>
<code>grape.value: <span id="grapeCtrlValue"></span></code><br>
<code>kiwiValue: <spa id="kiwiValue"></span></code><br>
<code>strawberryValue: <span id="strawberryValue">y</span></code><br>
</p>
<pre aria-hidden="true" padding id="formResults"></pre>
<ion-item>
<ion-label>Checkbox / Toggle</ion-label>
<ion-checkbox slot="start" id="checked"></ion-checkbox>
<ion-toggle id="checked"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Checked</ion-label>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-toggle checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-checkbox slot="start" disabled></ion-checkbox>
<ion-toggle disabled></ion-toggle>
</ion-item>
</ion-content>
</ion-content>
</ion-page>
<script>
function printForm(ev) {

210
packages/core/src/components/chip/test/basic.html
View File

@ -8,116 +8,118 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align: center">
<h2>Text Chips</h2>
<ion-content padding style="text-align: center">
<h2>Text Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Another With Longer Text</ion-label>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-icon name="heart" color="dark"></ion-icon>
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<h2>Icon Chips</h2>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Secondary</ion-label>
<ion-icon name="pin" color="secondary"></ion-icon>
</ion-chip>
<h2>Avatar Chips</h2>
<ion-chip>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Right Avatar</ion-label>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
</ion-chip>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
<ion-chip-button clear onclick="del('chip1')" class="my-custom-chip">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip2">
<ion-icon name="pin"></ion-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip3">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-chip-button clear color="dark" onclick="del('chip3')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-icon name="pin"></ion-icon>
<ion-label>Primary</ion-label>
<ion-chip-button clear onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip5">
<ion-icon name="pin" color="primary"></ion-icon>
<ion-chip>
<ion-label>Default</ion-label>
<ion-chip-button clear color="light" onclick="del('chip5')">
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Another With Longer Text</ion-label>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-icon name="heart" color="dark"></ion-icon>
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<h2>Icon Chips</h2>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Secondary</ion-label>
<ion-icon name="pin" color="secondary"></ion-icon>
</ion-chip>
<h2>Avatar Chips</h2>
<ion-chip>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Right Avatar</ion-label>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
</ion-chip>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
<ion-chip-button clear onclick="del('chip1')" class="my-custom-chip">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
</ion-item>
</ion-content>
<ion-chip id="chip2">
<ion-icon name="pin"></ion-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip3">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-chip-button clear color="dark" onclick="del('chip3')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-icon name="pin"></ion-icon>
<ion-label>Primary</ion-label>
<ion-chip-button clear onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip5">
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Default</ion-label>
<ion-chip-button clear color="light" onclick="del('chip5')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
</ion-item>
</ion-content>
</ion-page>
<script>
function del(chip) {

170
packages/core/src/components/datetime/test/basic.html
View File

@ -8,109 +8,111 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content test-content">
<ion-list>
<ion-item>
<ion-label>MMMM</ion-label>
<ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-content class="outer-content test-content">
<ion-list>
<ion-item>
<ion-label>MMMM</ion-label>
<ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
display-format="DDD. MMM DD, YY"
month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
display-format="DDD. MMM DD, YY"
month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Specific days/months/years</ion-label>
<ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Specific days/months/years</ion-label>
<ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>myDate</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>myDate</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>HH:mm:ss</ion-label>
<ion-datetime display-format="HH:mm:ss"></ion-datetime>
</ion-item>
<ion-list>
<ion-item>
<ion-label>HH:mm:ss</ion-label>
<ion-datetime display-format="HH:mm:ss"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>No display-format</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
<ion-item>
<ion-label>No display-format</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
</ion-list>
</ion-list>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
</div>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
</div>
</ion-content>
</ion-content>
</ion-page>
<script>
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];

148
packages/core/src/components/fab/test/basic.html
View File

@ -8,87 +8,87 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Floating Action Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Floating Action Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-fixed>
<ion-fab top right edge id="fab1">
<ion-fab-button onclick="clickMainFAB()" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-list>
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-content padding fullscreen>
<f></f>
<f></f>
<ion-fab bottom right edge if="fab2">
<ion-fab-button onclick="clickMainFAB()" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
<ion-button>Test</ion-button>
<ion-fab top left id="fab3">
<ion-fab-button onclick="clickMainFAB()" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab top right edge id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB()" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-list>
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab bottom left id="fab4">
<ion-fab-button onclick="clickMainFAB()" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab bottom right edge id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB()" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab center middle id="fab5">
<ion-fab-button onclick="clickMainFAB()" color="danger" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab top left id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB()" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab right middle>
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
</ion-fab>
</ion-fixed>
<ion-fab bottom left id="fab4" slot="fixed">
<ion-fab-button onclick="clickMainFAB()" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-content padding fullscreen>
<f></f>
<f></f>
<ion-fab center middle id="fab5" slot="fixed">
<ion-fab-button onclick="clickMainFAB()" color="danger" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<pre id="log" ion-fixed style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);">log</pre>
<ion-button>Test</ion-button>
</ion-content>
<ion-fab right middle slot="fixed">
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
</ion-fab>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-page>
<script>
function insertAfter(el, referenceNode) {
@ -124,10 +124,6 @@
</script>
<style>
[ion-fixed] {
position: absolute;
}
f {
display: block;
margin: 15px auto;

478
packages/core/src/components/grid/test/basic.html
View File

@ -8,256 +8,258 @@
</head>
<body>
<ion-app>
<ion-content class="grid-demo">
<ion-grid>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-page>
<ion-content class="grid-demo">
<ion-grid>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col col-3 offset-3>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col col-3 offset-3>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col align-self-start>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col align-self-center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col align-self-end>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col align-self-start>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col align-self-center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col align-self-end>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-start>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col align-self-end>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-start>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col align-self-end>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-end>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col align-self-start>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row align-items-end>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col align-self-start>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col col-6 offset-3>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col col-3>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-row responsive-lg>
<ion-col col-6 offset-3>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col col-3>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-content>
</ion-page>
<style>
.grid-demo ion-col div {

94
packages/core/src/components/icon/test/basic.html
View File

@ -8,65 +8,65 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-navbar>
<ion-title>Icon</ion-title>
</ion-navbar>
</ion-header>
<ion-page>
<ion-header>
<ion-navbar>
<ion-title>Icon</ion-title>
</ion-navbar>
</ion-header>
<ion-content text-center class="icon-demo">
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-row>
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
</ion-row>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
</ion-row>
</ion-content>
</ion-content>
</ion-page>
<style>
.icon-demo ion-icon {

116
packages/core/src/components/input/test/basic.html
View File

@ -8,75 +8,77 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Basic Form</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Basic Form</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Clear Input</ion-label>
<ion-input clear-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Clear Input</ion-label>
<ion-input clear-input></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-input checked></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-input checked></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-input type="number" value="333"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Type #</ion-label>
<ion-input type="number" value="333"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Placeholder</ion-label>
<ion-input placeholder="Enter Something"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Placeholder</ion-label>
<ion-input placeholder="Enter Something"></ion-input>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
</ion-item>
<ion-item>
<ion-label>Readonly</ion-label>
<ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
</ion-item>
<ion-item>
<ion-label>Readonly</ion-label>
<ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
</ion-item>
<ion-item>
<ion-label>Slot</ion-label>
<ion-input slot="start" value="Start"></ion-input>
</ion-item>
<ion-item>
<ion-label>Slot</ion-label>
<ion-input slot="start" value="Start"></ion-input>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle checked slot="end"></ion-toggle>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle checked slot="end"></ion-toggle>
</ion-item>
</ion-list>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
<ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
Toggle Readonly
</ion-button>
</div>
<ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
Toggle Readonly
</ion-button>
</div>
</ion-content>
</ion-content>
</ion-page>
<script>
function toggleBoolean(id, prop) {

135
packages/core/src/components/input/test/textarea.html
View File

@ -8,88 +8,89 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textareas</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Textareas</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label color="primary">Inline Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-list>
<ion-item>
<ion-label color="primary">Inline Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" fixed>Fixed Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" fixed>Fixed Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-textarea placeholder="Textarea with no label"></ion-textarea>
</ion-item>
<ion-item>
<ion-textarea placeholder="Textarea with no label"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" stacked>Stacked Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" stacked>Stacked Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Readonly</ion-label>
<ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Readonly</ion-label>
<ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-input id="dynamicValue" value="dynamic"></ion-input>
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-input id="dynamicValue" value="dynamic"></ion-input>
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-input clear-on-edit="true"></ion-input>
</ion-item>
</ion-list>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-input clear-on-edit="true"></ion-input>
</ion-item>
</ion-list>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
<ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
Toggle Readonly
</ion-button>
<ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
Toggle Readonly
</ion-button>
<ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
Toggle Value
</ion-button>
<ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
Clear Value
</ion-button>
</div>
</ion-content>
<ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
Toggle Value
</ion-button>
<ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
Clear Value
</ion-button>
</div>
</ion-content>
</ion-page>
<script>
function toggleBoolean(id, prop) {
var ele = document.getElementById(id);

736
packages/core/src/components/item-sliding/test/basic.html
View File

@ -8,399 +8,401 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Sliding Items</ion-title>
<ion-buttons slot="start">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Sliding Items</ion-title>
<ion-buttons slot="start">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content>
<div padding>
<ion-button block onclick="toggleSliding()">Toggle sliding</ion-button>
<ion-button block onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
<ion-button block onclick="closeOpened()">Close Opened Items</ion-button>
</div>
<div padding>
<ion-button block onclick="toggleSliding()">Toggle sliding</ion-button>
<ion-button block onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
<ion-button block onclick="closeOpened()">Close Opened Items</ion-button>
</div>
<ion-list id="list">
<div class="nested-div">
<ion-item-sliding>
<ion-item>
<ion-list id="list">
<div class="nested-div">
<ion-item-sliding>
<ion-item>
<ion-label>
<h2>No Options</h2>
<p>Should not error or swipe without options</p>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item-sliding id="item6">
<ion-item>
<ion-label>
One Line, dynamic option and text
</ion-label>
</ion-item>
<ion-item-options class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item6">
<ion-item>
<ion-label>
Two options, one dynamic option and text
</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-option color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>HubStruck Notifications</h2>
<p>A new message from a repo in your network</p>
<p>Oceanic Next has joined your network</p>
</ion-label>
<ion-note slot="end">
10:45 AM
</ion-note>
</ion-item>
<ion-item-options side="left">
<ion-item-option onclick="noclose('item100')">
No close
</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-option color="light" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
<ion-item-option onclick="unread('item100')">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item0">
<ion-item text-wrap onclick="clickedItem('item0')">
<ion-label>
<h2>RIGHT side - no icons</h2>
<p>Hey do you want to go to the game tonight?</p>
</ion-label>
</ion-item>
<ion-item-options class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item1">
<ion-item text-wrap detail-push href="#" class="activated">
<ion-label>
<h2>LEFT side - no icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item2">
<ion-item text-wrap detail-push>
<ion-label>
<h2>RIGHT/LEFT side - icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" (ionSwipe)="del('item2')" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="danger" onclick="del('item2')" expandable>
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item3">
<ion-item text-wrap detail-push>
<ion-label>
<h2>RIGHT/LEFT side - icons (slot="start")</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" icon-start (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options icon-start (ionSwipe)="del('item3')">
<ion-item-option color="primary" onclick="archive('item3')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item4">
<ion-item>
<ion-icon name="mail" slot="start"></ion-icon>
<ion-label>
One Line w/ Icon, div only text
</ion-label>
</ion-item>
<ion-item-options icon-start (ionSwipe)="archive($event)">
<ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item5" class="sliding-enabled">
<ion-item>
<ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>
One Line w/ Avatar, div only text
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option color="primary" expandable>
<ion-icon name="more"></ion-icon>More
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item5')">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="light" onclick="del('item5')">
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item7">
<ion-item>
<ion-label>
One Line, dynamic icon-start option
</ion-label>
</ion-item>
<ion-item-options icon-start>
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item7')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item8">
<ion-item>
<ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<ion-label>
<h2>DOWNLOAD</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
<ion-item-options (ionSwipe)="download('item8')">
<ion-item-option color="primary" onclick="archive('item8')">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="secondary" expandable onclick="download('item8')">
<ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div>
<ion-icon class="download-spinner" name="refresh"></ion-icon>
<div class="download-spinner">Loading...</div>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item9">
<ion-item>
<ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<ion-label>
<h2>ion-item-sliding without options (no sliding)</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item text-wrap>
<ion-label>
<h2>No Options</h2>
<p>Should not error or swipe without options</p>
<h2>Normal ion-item (no sliding)</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item-sliding id="item6">
<ion-item>
<ion-item text-wrap onclick="clickedItem('item9')">
<ion-label>
One Line, dynamic option and text
</ion-label>
</ion-item>
<ion-item-options class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item6">
<ion-item>
<ion-label>
Two options, one dynamic option and text
</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-option color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>HubStruck Notifications</h2>
<p>A new message from a repo in your network</p>
<p>Oceanic Next has joined your network</p>
</ion-label>
<ion-note slot="end">
10:45 AM
</ion-note>
</ion-item>
<ion-item-options side="left">
<ion-item-option onclick="noclose('item100')">
No close
</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-option color="light" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
<ion-item-option onclick="unread('item100')">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item0">
<ion-item text-wrap onclick="clickedItem('item0')">
<ion-label>
<h2>RIGHT side - no icons</h2>
<h2>Normal button (no sliding)</h2>
<p>Hey do you want to go to the game tonight?</p>
</ion-label>
</ion-item>
<ion-item-options class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
<ion-item-sliding id="item1">
<ion-item text-wrap detail-push href="#" class="activated">
<ion-label>
<h2>LEFT side - no icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<script>
var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
<ion-item-sliding id="item2">
<ion-item text-wrap detail-push>
<ion-label>
<h2>RIGHT/LEFT side - icons</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
// Toggle the dynamic options
var dynamicShowOptions = document.getElementsByClassName('show-options');
toggleDynamicOptions();
<ion-item-options side="right" (ionSwipe)="del('item2')" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="danger" onclick="del('item2')" expandable>
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item3">
<ion-item text-wrap detail-push>
<ion-label>
<h2>RIGHT/LEFT side - icons (slot="start")</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" icon-start (ionSwipe)="unread($event)" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options icon-start (ionSwipe)="del('item3')">
<ion-item-option color="primary" onclick="archive('item3')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item4">
<ion-item>
<ion-icon name="mail" slot="start"></ion-icon>
<ion-label>
One Line w/ Icon, div only text
</ion-label>
</ion-item>
<ion-item-options icon-start (ionSwipe)="archive($event)">
<ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item5" class="sliding-enabled">
<ion-item>
<ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>
One Line w/ Avatar, div only text
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option color="primary" expandable>
<ion-icon name="more"></ion-icon>More
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item5')">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="light" onclick="del('item5')">
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item7">
<ion-item>
<ion-label>
One Line, dynamic icon-start option
</ion-label>
</ion-item>
<ion-item-options icon-start>
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
</ion-item-option>
<ion-item-option color="secondary" onclick="archive('item7')">
<ion-icon name="archive"></ion-icon>
<span class="archive-text"></span>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item8">
<ion-item>
<ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<ion-label>
<h2>DOWNLOAD</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
<ion-item-options (ionSwipe)="download('item8')">
<ion-item-option color="primary" onclick="archive('item8')">
<ion-icon name="archive"></ion-icon>Archive
</ion-item-option>
<ion-item-option color="secondary" expandable onclick="download('item8')">
<ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div>
<ion-icon class="download-spinner" name="refresh"></ion-icon>
<div class="download-spinner">Loading...</div>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding id="item9">
<ion-item>
<ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<ion-label>
<h2>ion-item-sliding without options (no sliding)</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item text-wrap>
<ion-label>
<h2>Normal ion-item (no sliding)</h2>
<p>Paragraph text.</p>
</ion-label>
</ion-item>
<ion-item text-wrap onclick="clickedItem('item9')">
<ion-label>
<h2>Normal button (no sliding)</h2>
<p>Hey do you want to go to the game tonight?</p>
</ion-label>
</ion-item>
</div>
</ion-list>
<script>
var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
// Toggle the dynamic options
var dynamicShowOptions = document.getElementsByClassName('show-options');
toggleDynamicOptions();
function toggleDynamicOptions() {
// TODO the element needs to be removed / added to the DOM
}
// Change the text for the more and archive buttons
var dynamicText = true;
var moreTextSpans = document.getElementsByClassName('more-text');
var archiveTextSpans = document.getElementsByClassName('archive-text');
changeDynamicText();
function changeDynamicText() {
dynamicText = !dynamicText;
for (var i = 0; i < moreTextSpans.length; i++) {
var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
moreTextSpans[i].innerHTML = moreText;
function toggleDynamicOptions() {
// TODO the element needs to be removed / added to the DOM
}
for (var i = 0; i < archiveTextSpans.length; i++) {
var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
archiveTextSpans[i].innerHTML = archiveText;
// Change the text for the more and archive buttons
var dynamicText = true;
var moreTextSpans = document.getElementsByClassName('more-text');
var archiveTextSpans = document.getElementsByClassName('archive-text');
changeDynamicText();
function changeDynamicText() {
dynamicText = !dynamicText;
for (var i = 0; i < moreTextSpans.length; i++) {
var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
moreTextSpans[i].innerHTML = moreText;
}
for (var i = 0; i < archiveTextSpans.length; i++) {
var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
archiveTextSpans[i].innerHTML = archiveText;
}
}
}
function toggleSliding() {
// this.slidingEnabled = !this.slidingEnabled;
}
function closeOpened() {
var list = document.getElementById('list');
list.closeSlidingItems();
}
function noclose(item) {
var itemEle = document.getElementById(item);
console.log('no close', itemEle);
}
function unread(item) {
closeSlidingItem('UNREAD', item);
}
function archive(item) {
closeSlidingItem('ARCHIVE', item);
}
function del(item) {
closeSlidingItem('DELETE', item);
}
function download(item) {
var itemEle = document.getElementById(item);
console.log(itemEle);
itemEle.classList.add('downloading');
setTimeout(() => {
alert('Item was downloaded!');
itemEle.classList.remove('downloading');
itemEle.close();
}, 1500);
}
function closeSlidingItem(option, item) {
var itemEle = document.getElementById(item);
// TODO open alert instead
if (itemEle) {
itemEle.close();
function toggleSliding() {
// this.slidingEnabled = !this.slidingEnabled;
}
console.log(option, itemEle);
}
function clickedItem(item) {
var itemEle = document.getElementById(item);
console.log('Clicked, ion-item', itemEle);
}
function closeOpened() {
var list = document.getElementById('list');
list.closeSlidingItems();
}
function reload() {
window.location.reload();
}
</script>
<style>
img {
height: 100px;
}
function noclose(item) {
var itemEle = document.getElementById(item);
console.log('no close', itemEle);
}
.download-spinner {
display: none;
}
function unread(item) {
closeSlidingItem('UNREAD', item);
}
svg circle {
stroke: white;
}
function archive(item) {
closeSlidingItem('ARCHIVE', item);
}
.downloading .download-spinner {
display: block;
}
function del(item) {
closeSlidingItem('DELETE', item);
}
.downloading .download-hide {
display: none;
}
</style>
</ion-content>
function download(item) {
var itemEle = document.getElementById(item);
console.log(itemEle);
itemEle.classList.add('downloading');
setTimeout(() => {
alert('Item was downloaded!');
itemEle.classList.remove('downloading');
itemEle.close();
}, 1500);
}
function closeSlidingItem(option, item) {
var itemEle = document.getElementById(item);
// TODO open alert instead
if (itemEle) {
itemEle.close();
}
console.log(option, itemEle);
}
function clickedItem(item) {
var itemEle = document.getElementById(item);
console.log('Clicked, ion-item', itemEle);
}
function reload() {
window.location.reload();
}
</script>
<style>
img {
height: 100px;
}
.download-spinner {
display: none;
}
svg circle {
stroke: white;
}
.downloading .download-spinner {
display: block;
}
.downloading .download-hide {
display: none;
}
</style>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

100
packages/core/src/components/item/test/basic.html
View File

@ -8,63 +8,65 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Button Icons</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">
Default
<ion-icon name="star" slot="end"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Button Icons</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">
Default
<ion-icon name="star" slot="end"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Item Icons</ion-label>
<ion-icon name="heart" slot="end"></ion-icon>
<ion-icon name="star" slot="start"></ion-icon>
</ion-item>
<ion-content>
<ion-item>
<ion-label>Item Icons</ion-label>
<ion-icon name="heart" slot="end"></ion-icon>
<ion-icon name="star" slot="start"></ion-icon>
</ion-item>
<ion-item>
<ion-label>Item No Size Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item No Size Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Outline Button</ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Outline Button</ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
</ion-content>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

100
packages/core/src/components/item/test/buttons.html
View File

@ -8,63 +8,65 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Button Icons</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">
Default
<ion-icon name="star" slot="end"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Button Icons</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">
Default
<ion-icon name="star" slot="end"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Item Icons</ion-label>
<ion-icon name="heart" slot="end"></ion-icon>
<ion-icon name="star" slot="start"></ion-icon>
</ion-item>
<ion-content>
<ion-item>
<ion-label>Item Icons</ion-label>
<ion-icon name="heart" slot="end"></ion-icon>
<ion-icon name="star" slot="start"></ion-icon>
</ion-item>
<ion-item>
<ion-label>Item No Size Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item No Size Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Outline Button</ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Outline Button</ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
</ion-content>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

7
packages/core/src/components/menu/tests/basic.html
View File

@ -55,14 +55,17 @@
</ion-content>
</ion-menu>
<ion-page main class="show-page">
<ion-page main>
<ion-header>
<ion-toolbar>
<ion-title>Ionic CDN demo</ion-title>
</ion-toolbar>
</ion-header>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
<ion-content padding>
<p>
<ion-button onclick="openLeft()">Open left menu</ion-button>

54
packages/core/src/components/popover/test/basic.html
View File

@ -10,35 +10,37 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button onclick="presentPopover('profile-page', event)">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button onclick="presentPopover('profile-page', event)">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button block onclick="presentPopover('profile-page', event)">Show Popover</ion-button>
<ion-button block onclick="presentPopover('list-page', event)">Show Long List Popover</ion-button>
<ion-button block onclick="presentPopover('profile-page')">No Event Popover</ion-button>
<ion-content padding>
<ion-button block onclick="presentPopover('profile-page', event)">Show Popover</ion-button>
<ion-button block onclick="presentPopover('list-page', event)">Show Long List Popover</ion-button>
<ion-button block onclick="presentPopover('profile-page')">No Event Popover</ion-button>
<ion-popover-controller></ion-popover-controller>
</ion-content>
<ion-popover-controller></ion-popover-controller>
</ion-content>
<ion-footer>
<ion-toolbar color="primary">
<ion-buttons slot="end">
<ion-button onclick="presentPopover('profile-page', event)">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar color="primary">
<ion-buttons slot="end">
<ion-button onclick="presentPopover('profile-page', event)">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-footer>
</ion-page>
</ion-app>
<script>
function presentPopover(componentName, event) {

206
packages/core/src/components/radio/test/basic.html
View File

@ -8,131 +8,133 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Radios</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="radio-test outer-content">
<ion-list>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Fruits (Group w/ values)</ion-label>
</ion-item-divider>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Radios</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="radio-test outer-content">
<ion-list>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Fruits (Group w/ values)</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group id="pizzaRadio">
<ion-item-divider>
<ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-radio slot="end" name="pepperoni" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-radio slot="end" color="danger" name="sausage"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group id="veggiesRadio" allow-empty-selection>
<ion-item-divider>
<ion-label>Veggies (Group w/ allow empty)</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Carrot</ion-label>
<ion-radio slot="end" value="carrot"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tomato</ion-label>
<ion-radio slot="end" value="tomato"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Broccoli</ion-label>
<ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Checked</ion-button>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Disabled</ion-button>
<ion-button slot="end" onClick="printRadioValues()" outline small>Print</ion-button>
<ion-button slot="end" onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')" outline small color="danger">Color</ion-button>
</ion-item>
</ion-list>
<pre id="valuesCode"></pre>
<ion-list>
<ion-list-header>
No Radio Group
</ion-list-header>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-radio slot="start" color="secondary"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-radio slot="start" color="light" checked="true"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group id="pizzaRadio">
<ion-item-divider>
<ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-radio slot="end" name="pepperoni" checked></ion-radio>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-radio slot="end" color="danger" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-radio slot="end" color="danger" name="sausage"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group id="veggiesRadio" allow-empty-selection>
<ion-item-divider>
<ion-label>Veggies (Group w/ allow empty)</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Carrot</ion-label>
<ion-radio slot="end" value="carrot"></ion-radio>
<ion-label>Checkbox right side</ion-label>
<ion-radio slot="end" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tomato</ion-label>
<ion-radio slot="end" value="tomato"></ion-radio>
<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-item>
<ion-label>Broccoli</ion-label>
<ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<p>
<ion-radio id="standAloneChecked"></ion-radio>
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
</p>
<ion-item>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Checked</ion-button>
<ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Disabled</ion-button>
<ion-button slot="end" onClick="printRadioValues()" outline small>Print</ion-button>
<ion-button slot="end" onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')" outline small color="danger">Color</ion-button>
<ion-label>Checkbox / Toggle</ion-label>
<ion-radio slot="start" id="checked"></ion-radio>
<ion-toggle id="checked"></ion-toggle>
</ion-item>
</ion-list>
<pre id="valuesCode"></pre>
<ion-list>
<ion-list-header>
No Radio Group
</ion-list-header>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-radio slot="start" color="secondary"></ion-radio>
<ion-label>Checked</ion-label>
<ion-radio slot="start" checked></ion-radio>
<ion-toggle checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-radio slot="start" color="light" checked="true"></ion-radio>
<ion-label>Disabled</ion-label>
<ion-radio slot="start" disabled></ion-radio>
<ion-toggle disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-radio slot="end" color="danger" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Checkbox right side</ion-label>
<ion-radio slot="end" checked></ion-radio>
</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>
<ion-radio id="standAloneChecked"></ion-radio>
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
</p>
<ion-item>
<ion-label>Checkbox / Toggle</ion-label>
<ion-radio slot="start" id="checked"></ion-radio>
<ion-toggle id="checked"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Checked</ion-label>
<ion-radio slot="start" checked></ion-radio>
<ion-toggle checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-radio slot="start" disabled></ion-radio>
<ion-toggle disabled></ion-toggle>
</ion-item>
</ion-content>
</ion-content>
</ion-page>
<script>
var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];

126
packages/core/src/components/range/test/basic.html
View File

@ -10,72 +10,74 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Range</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Range color
</ion-list-header>
<ion-item>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range value="40" color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range value="60" color="light"></ion-range>
</ion-item>
<ion-item>
<ion-range value="80" color="dark"></ion-range>
</ion-item>
<ion-item>
<ion-range value="100" color="danger"></ion-range>
</ion-item>
</ion-list>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Range</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Range color
</ion-list-header>
<ion-item>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range value="40" color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range value="60" color="light"></ion-range>
</ion-item>
<ion-item>
<ion-range value="80" color="dark"></ion-range>
</ion-item>
<ion-item>
<ion-range value="100" color="danger"></ion-range>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Mode
</ion-list-header>
<ion-item>
<ion-range value="50" mode="md"></ion-range>
</ion-item>
<ion-item>
<ion-range value="50" mode="ios"></ion-range>
</ion-item>
<ion-item>
<ion-range value="50" mode="wp"></ion-range>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Mode
</ion-list-header>
<ion-item>
<ion-range value="50" mode="md"></ion-range>
</ion-item>
<ion-item>
<ion-range value="50" mode="ios"></ion-range>
</ion-item>
<ion-item>
<ion-range value="50" mode="wp"></ion-range>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Options
</ion-list-header>
<ion-item>
<ion-range pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
<ion-item>
<ion-range color="danger">
<ion-icon small name="thermometer" slot="range-start"></ion-icon>
<ion-icon name="thermometer" slot="range-end"></ion-icon>
</ion-range>
</ion-item>
<ion-list>
<ion-list-header>
Options
</ion-list-header>
<ion-item>
<ion-range pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
<ion-item>
<ion-range color="danger">
<ion-icon small name="thermometer" slot="range-start"></ion-icon>
<ion-icon name="thermometer" slot="range-end"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
</ion-list>
<ion-button onclick="elTest()">Test</ion-button>
</ion-content>
<ion-button onclick="elTest()">Test</ion-button>
</ion-content>
</ion-page>
</ion-app>
<script>

96
packages/core/src/components/reorder/test/basic.html
View File

@ -10,64 +10,66 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item Reorder</ion-title>
<ion-buttons slot="end">
<ion-button onclick="toggleEdit()">Toggle</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Item Reorder</ion-title>
<ion-buttons slot="end">
<ion-button onclick="toggleEdit()">Toggle</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-reorder-group id="reorder">
<ion-content>
<ion-list>
<ion-reorder-group id="reorder">
<ion-item>
Item 1 (default ion-reorder)
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 1 (default ion-reorder)
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 2 (default ion-reorder)
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 2 (default ion-reorder)
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 3 (default ion-reorder slot="start")
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item>
Item 3 (default ion-reorder slot="start")
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item>
Item 4 (custom ion-reorder)
<ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-item>
Item 4 (custom ion-reorder)
<ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-item>
Item 5 (custom ion-reorder)
<ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-item>
Item 5 (custom ion-reorder)
<ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-item>
Item 6 (custom ion-reorder slot="start")
<ion-reorder slot="start"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-item>
Item 6 (custom ion-reorder slot="start")
<ion-reorder slot="start"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-reorder class="no-hide">
<ion-item>Item 7 (the whole item can be dragged)</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 7 (the whole item can be dragged)</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 8 (the whole item can be dragged)</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 8 (the whole item can be dragged)</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 9 (the whole item can be dragged)</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 9 (the whole item can be dragged)</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
</ion-content>
</ion-reorder-group>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
<script>

226
packages/core/src/components/searchbar/test/basic.html
View File

@ -8,137 +8,139 @@
</head>
<body>
<ion-app>
<ion-content>
<h5> Search - Default </h5>
<ion-searchbar
value="test"
type="tel"
show-cancel-button
debounce="500">
</ion-searchbar>
<ion-page>
<ion-content>
<h5> Search - Default </h5>
<ion-searchbar
value="test"
type="tel"
show-cancel-button
debounce="500">
</ion-searchbar>
<h5> Search - Animated </h5>
<ion-searchbar
animated="true"
show-cancel-button
debounce="500">
</ion-searchbar>
<h5> Search - Animated </h5>
<ion-searchbar
animated="true"
show-cancel-button
debounce="500">
</ion-searchbar>
<h5> Search - Custom Placeholder </h5>
<ion-searchbar
id="dynamicProp"
value="33"
autocorrect="on"
show-cancel-button="true"
autocomplete="on"
spellcheck="false"
type="number"
placeholder="Filter Schedules">
</ion-searchbar>
<h5> Search - Custom Placeholder </h5>
<ion-searchbar
id="dynamicProp"
value="33"
autocorrect="on"
show-cancel-button="true"
autocomplete="on"
spellcheck="false"
type="number"
placeholder="Filter Schedules">
</ion-searchbar>
<h5> Search - No Cancel Button </h5>
<ion-searchbar
value="after view"
autocorrect="off"
autocomplete="off"
spellcheck="true"
type="text"
show-cancel-button="false">
</ion-searchbar>
<h5> Search - No Cancel Button </h5>
<ion-searchbar
value="after view"
autocorrect="off"
autocomplete="off"
spellcheck="true"
type="text"
show-cancel-button="false">
</ion-searchbar>
<h5> Search - Custom Cancel Button Danger </h5>
<ion-searchbar
show-cancel-button
cancel-button-text="Really Long Cancel"
color="danger">
</ion-searchbar>
<h5> Search - Custom Cancel Button Danger </h5>
<ion-searchbar
show-cancel-button
cancel-button-text="Really Long Cancel"
color="danger">
</ion-searchbar>
<h5> Search - Value passed </h5>
<ion-searchbar
value="mysearch"
cancel-button-text="Really Long Cancel"
color="dark"
show-cancel-button>
</ion-searchbar>
<h5> Search - Value passed </h5>
<ion-searchbar
value="mysearch"
cancel-button-text="Really Long Cancel"
color="dark"
show-cancel-button>
</ion-searchbar>
<h5> Search - Mode iOS</h5>
<ion-searchbar
mode="ios"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Mode iOS</h5>
<ion-searchbar
mode="ios"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Mode MD</h5>
<ion-searchbar
mode="md"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Mode MD</h5>
<ion-searchbar
mode="md"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Mode WP</h5>
<ion-searchbar
mode="wp"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Mode WP</h5>
<ion-searchbar
mode="wp"
animated="true"
show-cancel-button
placeholder="Search">
</ion-searchbar>
<h5> Search - Animated and No Cancel</h5>
<ion-searchbar
id="dynamicAttr"
placeholder="Search"
animated="true"
show-cancel-button="false">
</ion-searchbar>
<h5> Search - Animated and No Cancel</h5>
<ion-searchbar
id="dynamicAttr"
placeholder="Search"
animated="true"
show-cancel-button="false">
</ion-searchbar>
<p padding>
<ion-button block (click)="changeValue()">Change Value</ion-button>
</p>
<p padding>
<ion-button block (click)="changeValue()">Change Value</ion-button>
</p>
<div padding-horizontal>
<ion-button block onClick="toggleProp()">Toggle Property</ion-button>
</div>
<div padding>
<ion-button block color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
</div>
<div padding-horizontal>
<ion-button block onClick="toggleProp()">Toggle Property</ion-button>
</div>
<div padding>
<ion-button block color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
</div>
<script>
function toggleAttr() {
var dynamicAttr = document.getElementById('dynamicAttr');
<script>
function toggleAttr() {
var dynamicAttr = document.getElementById('dynamicAttr');
// Toggle animated attribute
const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
dynamicAttr.setAttribute('animated', attrIsAnimated);
// Toggle animated attribute
const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
dynamicAttr.setAttribute('animated', attrIsAnimated);
// Toggle show-cancel-button attribute
const attrShowCancel = dynamicAttr.getAttribute('show-cancel-button') === 'true' ? false : true;
dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
// Toggle show-cancel-button attribute
const attrShowCancel = dynamicAttr.getAttribute('show-cancel-button') === 'true' ? false : true;
dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
// Toggle placeholder attribute
const attrPlaceholder = dynamicAttr.getAttribute('placeholder') === 'Search' ? 'Enter a Search Term' : 'Search';
dynamicAttr.setAttribute('placeholder', attrPlaceholder);
}
// Toggle placeholder attribute
const attrPlaceholder = dynamicAttr.getAttribute('placeholder') === 'Search' ? 'Enter a Search Term' : 'Search';
dynamicAttr.setAttribute('placeholder', attrPlaceholder);
}
function toggleProp() {
var dynamicProp = document.getElementById('dynamicProp');
console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);
function toggleProp() {
var dynamicProp = document.getElementById('dynamicProp');
console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);
// Toggle autocorrect property
const propIsAutocorrect = dynamicProp.autocorrect === 'on' ? 'off' : 'on';
dynamicProp.autocorrect = propIsAutocorrect;
// Toggle autocorrect property
const propIsAutocorrect = dynamicProp.autocorrect === 'on' ? 'off' : 'on';
dynamicProp.autocorrect = propIsAutocorrect;
// Toggle autocomplete property
const propIsAutocomplete = dynamicProp.autocomplete === 'on' ? 'off' : 'on';
dynamicProp.autocomplete = propIsAutocomplete;
// Toggle autocomplete property
const propIsAutocomplete = dynamicProp.autocomplete === 'on' ? 'off' : 'on';
dynamicProp.autocomplete = propIsAutocomplete;
// Toggle spellcheck property
const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
dynamicProp.spellcheck = propIsSpellcheck;
}
</script>
</ion-content>
// Toggle spellcheck property
const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
dynamicProp.spellcheck = propIsSpellcheck;
}
</script>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

178
packages/core/src/components/segment/test/basic.html
View File

@ -8,102 +8,104 @@
</head>
<body>
<ion-app>
<ion-content>
<ion-toolbar no-border-top>
<ion-segment value="Free">
<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-page>
<ion-content>
<ion-toolbar no-border-top>
<ion-segment value="Free">
<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 no-border-bottom>
<ion-segment color="danger">
<ion-segment-button value="sunny">
Sunny
</ion-segment-button>
<ion-segment-button value="rainy" checked>
Rainy
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar no-border-top no-border-bottom>
<ion-segment color="danger">
<ion-segment-button value="sunny">
Sunny
</ion-segment-button>
<ion-segment-button value="rainy" checked>
Rainy
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<div padding>
<ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
</ion-segment-button>
</ion-segment>
<div padding>
<ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="Reading List">
Reading List
</ion-segment-button>
<ion-segment-button value="Shared Links">
Shared Links
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="Reading List">
Reading List
</ion-segment-button>
<ion-segment-button value="Shared Links">
Shared Links
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicAttrElem" color="secondary" value="active">
<ion-segment-button value="active">
Active
</ion-segment-button>
<ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
Inactive
</ion-segment-button>
</ion-segment>
</div>
<ion-segment id="dynamicAttrElem" color="secondary" value="active">
<ion-segment-button value="active">
Active
</ion-segment-button>
<ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
Inactive
</ion-segment-button>
</ion-segment>
</div>
<div padding-horizontal>
<ion-button block onClick="toggleDisabled()">Toggle Disabled</ion-button>
</div>
<div padding>
<ion-button block color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
</div>
<div padding-horizontal>
<ion-button block onClick="toggleDisabled()">Toggle Disabled</ion-button>
</div>
<div padding>
<ion-button block color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
</div>
<script>
var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
var dynamicPropDisable = document.getElementById('dynamicPropDisable');
<script>
var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
var dynamicPropDisable = document.getElementById('dynamicPropDisable');
function toggleDisabled() {
const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
dynamicPropDisable.disabled = propIsDisabled;
}
function toggleValue() {
var dynamicAttrElem = document.getElementById('dynamicAttrElem');
var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
if (dynamicAttrValue === 'active') {
dynamicAttrElem.setAttribute('value', 'inactive');
} else if (dynamicAttrValue === 'inactive') {
dynamicAttrElem.setAttribute('value', 'disabled');
} else {
dynamicAttrElem.setAttribute('value', 'active');
function toggleDisabled() {
const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
dynamicPropDisable.disabled = propIsDisabled;
}
}
</script>
</ion-content>
function toggleValue() {
var dynamicAttrElem = document.getElementById('dynamicAttrElem');
var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
if (dynamicAttrValue === 'active') {
dynamicAttrElem.setAttribute('value', 'inactive');
} else if (dynamicAttrValue === 'inactive') {
dynamicAttrElem.setAttribute('value', 'disabled');
} else {
dynamicAttrElem.setAttribute('value', 'active');
}
}
</script>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

378
packages/core/src/components/select/test/basic.html
View File

@ -8,218 +8,220 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Select</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Select</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content test-content">
<ion-list>
<ion-list-header>Single Value Select</ion-list-header>
<ion-content class="outer-content test-content">
<ion-list>
<ion-list-header>Single Value Select</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select name="gender" placeholder="Select One">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select name="gender" placeholder="Select One">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Hair Color</ion-label>
<ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown" selected>Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Hair Color</ion-label>
<ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown" selected>Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Date</ion-label>
<ion-select placeholder="Month">
<ion-select-option value="01">January</ion-select-option>
<ion-select-option value="02">February</ion-select-option>
<ion-select-option value="03" selected="true">March</ion-select-option>
<ion-select-option value="04">April</ion-select-option>
<ion-select-option value="05">May</ion-select-option>
<ion-select-option value="06">June</ion-select-option>
<ion-select-option value="07">July</ion-select-option>
<ion-select-option value="08">August</ion-select-option>
<ion-select-option value="09">September</ion-select-option>
<ion-select-option value="10">October</ion-select-option>
<ion-select-option value="11">November</ion-select-option>
<ion-select-option value="12">December</ion-select-option>
</ion-select>
<ion-select placeholder="Year">
<ion-select-option>1989</ion-select-option>
<ion-select-option>1990</ion-select-option>
<ion-select-option>1991</ion-select-option>
<ion-select-option>1992</ion-select-option>
<ion-select-option>1993</ion-select-option>
<ion-select-option selected="true">1994</ion-select-option>
<ion-select-option>1995</ion-select-option>
<ion-select-option>1996</ion-select-option>
<ion-select-option>1997</ion-select-option>
<ion-select-option>1998</ion-select-option>
<ion-select-option>1999</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Date</ion-label>
<ion-select placeholder="Month">
<ion-select-option value="01">January</ion-select-option>
<ion-select-option value="02">February</ion-select-option>
<ion-select-option value="03" selected="true">March</ion-select-option>
<ion-select-option value="04">April</ion-select-option>
<ion-select-option value="05">May</ion-select-option>
<ion-select-option value="06">June</ion-select-option>
<ion-select-option value="07">July</ion-select-option>
<ion-select-option value="08">August</ion-select-option>
<ion-select-option value="09">September</ion-select-option>
<ion-select-option value="10">October</ion-select-option>
<ion-select-option value="11">November</ion-select-option>
<ion-select-option value="12">December</ion-select-option>
</ion-select>
<ion-select placeholder="Year">
<ion-select-option>1989</ion-select-option>
<ion-select-option>1990</ion-select-option>
<ion-select-option>1991</ion-select-option>
<ion-select-option>1992</ion-select-option>
<ion-select-option>1993</ion-select-option>
<ion-select-option selected="true">1994</ion-select-option>
<ion-select-option>1995</ion-select-option>
<ion-select-option>1996</ion-select-option>
<ion-select-option>1997</ion-select-option>
<ion-select-option>1998</ion-select-option>
<ion-select-option>1999</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-list>
<ion-list>
<ion-list-header>Popover Interface Select</ion-list-header>
<ion-list>
<ion-list-header>Popover Interface Select</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select name="gender" interface="popover">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select name="gender" interface="popover">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" value="n64" interface="popover">
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" value="n64" interface="popover">
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Date</ion-label>
<ion-select placeholder="Month" interface="popover">
<ion-select-option value="01">January</ion-select-option>
<ion-select-option value="02">February</ion-select-option>
<ion-select-option value="03" selected="true">March</ion-select-option>
<ion-select-option value="04">April</ion-select-option>
<ion-select-option value="05">May</ion-select-option>
<ion-select-option value="06">June</ion-select-option>
<ion-select-option value="07">July</ion-select-option>
<ion-select-option value="08">August</ion-select-option>
<ion-select-option value="09">September</ion-select-option>
<ion-select-option value="10">October</ion-select-option>
<ion-select-option value="11">November</ion-select-option>
<ion-select-option value="12">December</ion-select-option>
</ion-select>
<ion-select placeholder="Year" interface="popover">
<ion-select-option>1989</ion-select-option>
<ion-select-option>1990</ion-select-option>
<ion-select-option>1991</ion-select-option>
<ion-select-option>1992</ion-select-option>
<ion-select-option>1993</ion-select-option>
<ion-select-option selected="true">1994</ion-select-option>
<ion-select-option>1995</ion-select-option>
<ion-select-option>1996</ion-select-option>
<ion-select-option>1997</ion-select-option>
<ion-select-option>1998</ion-select-option>
<ion-select-option>1999</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Date</ion-label>
<ion-select placeholder="Month" interface="popover">
<ion-select-option value="01">January</ion-select-option>
<ion-select-option value="02">February</ion-select-option>
<ion-select-option value="03" selected="true">March</ion-select-option>
<ion-select-option value="04">April</ion-select-option>
<ion-select-option value="05">May</ion-select-option>
<ion-select-option value="06">June</ion-select-option>
<ion-select-option value="07">July</ion-select-option>
<ion-select-option value="08">August</ion-select-option>
<ion-select-option value="09">September</ion-select-option>
<ion-select-option value="10">October</ion-select-option>
<ion-select-option value="11">November</ion-select-option>
<ion-select-option value="12">December</ion-select-option>
</ion-select>
<ion-select placeholder="Year" interface="popover">
<ion-select-option>1989</ion-select-option>
<ion-select-option>1990</ion-select-option>
<ion-select-option>1991</ion-select-option>
<ion-select-option>1992</ion-select-option>
<ion-select-option>1993</ion-select-option>
<ion-select-option selected="true">1994</ion-select-option>
<ion-select-option>1995</ion-select-option>
<ion-select-option>1996</ion-select-option>
<ion-select-option>1997</ion-select-option>
<ion-select-option>1998</ion-select-option>
<ion-select-option>1999</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-list>
<ion-list>
<ion-list-header>Action Sheet Interface Select</ion-list-header>
<ion-list>
<ion-list-header>Action Sheet Interface Select</ion-list-header>
<ion-item>
<ion-label>Mute Notifications</ion-label>
<ion-select name="notifications" interface="action-sheet">
<ion-select-option value="mute_15">For 15 Minutes</ion-select-option>
<ion-select-option value="mute_1">For 1 Hour</ion-select-option>
<ion-select-option value="mute_23">For 24 Hours</ion-select-option>
<ion-select-option value="mute_inf">Until I turn it back on</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Mute Notifications</ion-label>
<ion-select name="notifications" interface="action-sheet">
<ion-select-option value="mute_15">For 15 Minutes</ion-select-option>
<ion-select-option value="mute_1">For 1 Hour</ion-select-option>
<ion-select-option value="mute_23">For 24 Hours</ion-select-option>
<ion-select-option value="mute_inf">Until I turn it back on</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Rating</ion-label>
<ion-select name="rating" interface="action-sheet">
<ion-select-option value="1">1 Star</ion-select-option>
<ion-select-option value="2">2 Stars</ion-select-option>
<ion-select-option value="3">3 Stars</ion-select-option>
<ion-select-option value="4">4 Stars</ion-select-option>
<ion-select-option value="5">5 Stars</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Rating</ion-label>
<ion-select name="rating" interface="action-sheet">
<ion-select-option value="1">1 Star</ion-select-option>
<ion-select-option value="2">2 Stars</ion-select-option>
<ion-select-option value="3">3 Stars</ion-select-option>
<ion-select-option value="4">4 Stars</ion-select-option>
<ion-select-option value="5">5 Stars</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-list>
<ion-list>
<ion-list-header>Multiple Value Select</ion-list-header>
<ion-list>
<ion-list-header>Multiple Value Select</ion-list-header>
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
<ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
<ion-select-option value="peppers">Green Peppers</ion-select-option>
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
<ion-select-option value="onions">Onions</ion-select-option>
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="sausage">Sausage</ion-select-option>
<ion-select-option value="Spinach">Spinach</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
<ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
<ion-select-option value="peppers">Green Peppers</ion-select-option>
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
<ion-select-option value="onions">Onions</ion-select-option>
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="sausage">Sausage</ion-select-option>
<ion-select-option value="Spinach">Spinach</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Pets</ion-label>
<ion-select name="pets" multiple="true">
<ion-select-option value="bird">Bird</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Pets</ion-label>
<ion-select name="pets" multiple="true">
<ion-select-option value="bird">Bird</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Skittles</ion-label>
<ion-select name="skittles" multiple="true" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="red">Red</ion-select-option>
<ion-select-option value="purple">Purple</ion-select-option>
<ion-select-option value="yellow">Yellow</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="green">Green</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Skittles</ion-label>
<ion-select name="skittles" multiple="true" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="red">Red</ion-select-option>
<ion-select-option value="purple">Purple</ion-select-option>
<ion-select-option value="yellow">Yellow</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="green">Green</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-select multiple disabled="true">
<ion-select-option checked="true">Selected Text</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-select multiple disabled="true">
<ion-select-option checked="true">Selected Text</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-list>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
</div>
<div text-center>
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
Toggle Disabled
</ion-button>
</div>
</ion-content>
</ion-content>
</ion-page>
<script>
function toggleBoolean(id, prop) {

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

@ -8,45 +8,47 @@
</head>
<body>
<ion-app>
<ion-content>
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="ios-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
<ion-page>
<ion-content>
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="ios-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

2
packages/core/src/components/split-pane/test/basic.html
View File

@ -45,7 +45,7 @@
</ion-menu>
<ion-page main class="show-page">
<ion-page main>
<ion-header>
<ion-toolbar>

32
packages/core/src/components/toast/test/basic.html
View File

@ -10,22 +10,24 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Popover</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button block onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
<ion-button block onclick="presentToast('top')">Show Toast Top</ion-button>
<ion-button block onclick="presentToast('middle')">Show Toast Middle</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with close button</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with close button and custom text</ion-button>
<!-- <ion&#45;button block onclick="presentToastWithOptions()">Show Toast Middle</ion&#45;button> -->
<ion-toast-controller></ion-toast-controller>
</ion-content>
<ion-content padding>
<ion-button block onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
<ion-button block onclick="presentToast('top')">Show Toast Top</ion-button>
<ion-button block onclick="presentToast('middle')">Show Toast Middle</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with close button</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with close button and custom text</ion-button>
<!-- <ion&#45;button block onclick="presentToastWithOptions()">Show Toast Middle</ion&#45;button> -->
<ion-toast-controller></ion-toast-controller>
</ion-content>
</ion-page>
</ion-app>
<script>
function presentToast(position) {

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

@ -8,73 +8,75 @@
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Toggles</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Toggles</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Apple</ion-label>
<ion-toggle slot="start" name="apple" checked></ion-toggle>
</ion-item>
<ion-list>
<ion-item>
<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>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>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>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>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>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, 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>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-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 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>
<p>
<ion-toggle id="standAloneChecked"></ion-toggle>
Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
</p>
</ion-content>
</ion-page>
<script>
function printForm(ev) {