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

test(header): update header markup

Browse Source
This commit is contained in:
Adam Bradley
2016-06-17 11:43:30 -05:00
parent 33672aef62
commit 1a8f6d745d
121 changed files with 1418 additions and 824 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/action-sheet/test/basic/index.ts
View File

@ -154,12 +154,14 @@ class E2EPage {
@Component({ @Component({
template: ` template: `
<ion-toolbar> <ion-header>
<ion-buttons start> <ion-toolbar>
<button (click)="dismiss()">Close</button> <ion-buttons start>
</ion-buttons> <button (click)="dismiss()">Close</button>
<ion-title>Modal</ion-title> </ion-buttons>
</ion-toolbar> <ion-title>Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
Hi, I'm Bob, and I'm a modal. Hi, I'm Bob, and I'm a modal.
</ion-content> </ion-content>

12
src/components/action-sheet/test/basic/main.html
View File

@ -1,9 +1,14 @@
<ion-header>
<ion-navbar>
<ion-title>Action Sheet</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar *navbar>
<ion-title>Action Sheet</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>
<button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button> <button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
<button block (click)="presentActionSheet2()">Present Action Sheet 2</button> <button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
<button block (click)="presentActionSheet3()">Present Action Sheet 3</button> <button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
@ -11,4 +16,5 @@
<pre> <pre>
Result: {{result}} Result: {{result}}
</pre> </pre>
</ion-content> </ion-content>

14
src/components/alert/test/basic/index.ts
View File

@ -295,12 +295,14 @@ class E2EPage {
@Component({ @Component({
template: ` template: `
<ion-toolbar> <ion-header>
<ion-buttons> <ion-toolbar>
<button (click)="dismiss()">Close</button> <ion-buttons>
</ion-buttons> <button (click)="dismiss()">Close</button>
<ion-title>Modal</ion-title> </ion-buttons>
</ion-toolbar> <ion-title>Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
Hi, I'm Bob, and I'm a modal. Hi, I'm Bob, and I'm a modal.
</ion-content> </ion-content>

11
src/components/alert/test/basic/main.html
View File

@ -1,6 +1,11 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Alerts</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Alerts</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>

10
src/components/alert/test/dismiss/index.ts
View File

@ -24,7 +24,7 @@ export class E2EPage {
] ]
}); });
alert.onDismiss((asdf) => { alert.onDismiss(() => {
console.log('dismiss'); console.log('dismiss');
this.nav.push(AnotherPage); this.nav.push(AnotherPage);
}); });
@ -35,9 +35,11 @@ export class E2EPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Another Page</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Another Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<form [ngFormModel]="form" (ngSubmit)="submit(form.value)"> <form [ngFormModel]="form" (ngSubmit)="submit(form.value)">
<ion-list> <ion-list>

15
src/components/alert/test/dismiss/main.html
View File

@ -1,8 +1,13 @@
<ion-navbar *navbar> <ion-header>
<ion-title>
Alert Dismiss <ion-navbar>
</ion-title> <ion-title>
</ion-navbar> Alert Dismiss
</ion-title>
</ion-navbar>
</ion-header>
<ion-content> <ion-content>

11
src/components/app/test/animations/main.html
View File

@ -1,6 +1,11 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Animations</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Animations</ion-title>
</ion-navbar>
</ion-header>
<ion-content> <ion-content>

44
src/components/app/test/cordova/index.ts
View File

@ -23,17 +23,19 @@ export class OtherData {
@Component({ @Component({
template: ` template: `
<ion-toolbar> <ion-header>
<ion-title>This is a modal</ion-title> <ion-toolbar>
<button menuToggle class="e2eCordovaOpenLeftMenu"> <ion-title>This is a modal</ion-title>
<ion-icon name="menu"></ion-icon> <button menuToggle class="e2eCordovaOpenLeftMenu">
</button> <ion-icon name="menu"></ion-icon>
<ion-buttons end>
<button>
<ion-icon name="funnel"></ion-icon>
</button> </button>
</ion-buttons> <ion-buttons end>
</ion-toolbar> <button>
<ion-icon name="funnel"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
<p>The modal toolbar should have status bar padding.</p> <p>The modal toolbar should have status bar padding.</p>
<button block (click)="dismissModal()">Close modal</button> <button block (click)="dismissModal()">Close modal</button>
@ -97,17 +99,19 @@ class Page3 {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>This is a tab page</ion-title> <ion-navbar>
<button menuToggle> <ion-title>This is a tab page</ion-title>
<ion-icon name="menu"></ion-icon> <button menuToggle>
</button> <ion-icon name="menu"></ion-icon>
<ion-buttons end>
<button>
<ion-icon name="funnel"></ion-icon>
</button> </button>
</ion-buttons> <ion-buttons end>
</ion-navbar> <button>
<ion-icon name="funnel"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<p>The toolbar should have status bar padding.</p> <p>The toolbar should have status bar padding.</p>
</ion-content> </ion-content>

46
src/components/app/test/cordova/page1.html
View File

@ -1,27 +1,35 @@
<ion-navbar *navbar primary> <ion-header>
<ion-segment [(ngModel)]="sort" light>
<ion-segment-button value="all">All</ion-segment-button> <ion-navbar primary>
<ion-segment-button value="favorites">Favorites</ion-segment-button> <ion-segment [(ngModel)]="sort" light>
</ion-segment> <ion-segment-button value="all">All</ion-segment-button>
<button menuToggle> <ion-segment-button value="favorites">Favorites</ion-segment-button>
<ion-icon name="menu"></ion-icon> </ion-segment>
</button> <button menuToggle>
<ion-buttons end> <ion-icon name="menu"></ion-icon>
<button>
<ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> <ion-buttons end>
<button menuToggle="right" right> <button>
<ion-icon name="menu"></ion-icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-navbar> </ion-buttons>
<ion-toolbar> <button menuToggle="right" right>
<ion-title>I'm a toolbar</ion-title> <ion-icon name="menu"></ion-icon>
</ion-toolbar> </button>
</ion-navbar>
<ion-toolbar>
<ion-title>I'm a toolbar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div> <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
<button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button> <button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
<button block secondary (click)="goToTabs()">Go to Tabs</button> <button block secondary (click)="goToTabs()">Go to Tabs</button>
</ion-content> </ion-content>

40
src/components/app/test/cordova/page2.html
View File

@ -1,25 +1,33 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Page 2</ion-title>
<button menuToggle> <ion-navbar>
<ion-icon name="menu"></ion-icon> <ion-title>Page 2</ion-title>
</button> <button menuToggle>
<ion-buttons end> <ion-icon name="menu"></ion-icon>
<button>
<ion-icon name="funnel"></ion-icon>
</button> </button>
</ion-buttons> <ion-buttons end>
<button menuToggle="right" right> <button>
<ion-icon name="menu"></ion-icon> <ion-icon name="funnel"></ion-icon>
</button> </button>
</ion-navbar> </ion-buttons>
<ion-toolbar> <button menuToggle="right" right>
<ion-title>I'm a toolbar</ion-title> <ion-icon name="menu"></ion-icon>
</ion-toolbar> </button>
</ion-navbar>
<ion-toolbar>
<ion-title>I'm a toolbar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div> <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
<button block [navPush]="page1">Go to Page 1</button> <button block [navPush]="page1">Go to Page 1</button>
<button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button> <button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button>
<button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button> <button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
</ion-content> </ion-content>

13
src/components/app/test/cordova/page3.html
View File

@ -1,10 +1,17 @@
<ion-content padding> <ion-content padding>
<h2>Page 3</h2> <h2>Page 3</h2>
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div> <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
<button block (click)="goBack()" class="e2eCordovaGoBack">Go Back</button> <button block (click)="goBack()" class="e2eCordovaGoBack">Go Back</button>
</ion-content> </ion-content>
<ion-toolbar position="bottom">
<ion-title>I'm a bottom toolbar</ion-title> <ion-footer>
</ion-toolbar>
<ion-toolbar>
<ion-title>I'm a bottom toolbar</ion-title>
</ion-toolbar>
</ion-footer>

11
src/components/app/test/gestures/main.html
View File

@ -1,6 +1,11 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Gestures</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Gestures</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>

10
src/components/app/test/typography/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Typography</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Typography</ion-title>
</ion-toolbar>
<ion-content padding> <ion-content padding>

14
src/components/badge/test/basic/main.html
View File

@ -1,8 +1,14 @@
<ion-toolbar> <ion-header>
<ion-title>Badges</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Badges</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-list-header> <ion-list-header>
Badges Right Badges Right
@ -32,6 +38,7 @@
<ion-badge item-right dark>99</ion-badge> <ion-badge item-right dark>99</ion-badge>
</ion-item> </ion-item>
</ion-list> </ion-list>
<ion-list> <ion-list>
<ion-list-header> <ion-list-header>
Badges Left Badges Left
@ -61,4 +68,5 @@
<ion-badge item-left dark>99</ion-badge> <ion-badge item-left dark>99</ion-badge>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

10
src/components/button/test/block/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Block Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Block Buttons</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">

10
src/components/button/test/clear/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Clear Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Clear Buttons</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">

24
src/components/button/test/dynamic/main.html
View File

@ -1,15 +1,20 @@
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons end>
<button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-buttons start>
<button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons end>
<button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
</ion-buttons>
</ion-toolbar>
<ion-content padding> <ion-content padding>
<button block [solid]="isSolid">Solid</button> <button block [solid]="isSolid">Solid</button>
<button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button> <button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
<button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</button> <button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</button>
@ -22,4 +27,5 @@
<hr/> <hr/>
<button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button> <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
<button block clear danger (click)="reset()">Reset all buttons</button> <button block clear danger (click)="reset()">Reset all buttons</button>
</ion-content> </ion-content>

12
src/components/button/test/full/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Full Buttons</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Full Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
@ -34,4 +39,5 @@
<a button full clear dark href="#">a[button][full][clear][dark]</a> <a button full clear dark href="#">a[button][full][clear][dark]</a>
<button full clear dark>button[full][clear][dark]</button> <button full clear dark>button[full][clear][dark]</button>
</p> </p>
</ion-content> </ion-content>

10
src/components/button/test/icons/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Buttons Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Buttons Icons</ion-title>
</ion-toolbar>
<ion-content padding> <ion-content padding>

11
src/components/button/test/raised/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Raised Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Raised Buttons</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">
@ -38,4 +42,5 @@
<p> <p>
<button raised clear disabled>Clear Disabled</button> <button raised clear disabled>Clear Disabled</button>
</p> </p>
</ion-content> </ion-content>

12
src/components/button/test/round/main.html
View File

@ -1,9 +1,14 @@
<ion-header>
<ion-toolbar>
<ion-title>Round Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Round Buttons</ion-title>
</ion-toolbar>
<ion-content padding> <ion-content padding>
<button round>button</button> <button round>button</button>
<button round light>button light</button> <button round light>button light</button>
<button round secondary>button secondary</button> <button round secondary>button secondary</button>
@ -18,6 +23,7 @@
</ion-content> </ion-content>
<style> <style>
button { button {
display: block !important; display: block !important;

10
src/components/button/test/sizes/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Button Sizes</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Button Sizes</ion-title>
</ion-toolbar>
<ion-content padding> <ion-content padding>

9
src/components/card/test/advanced/main.html
View File

@ -1,5 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Advanced Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
<ion-content class="outer-content"> <ion-content class="outer-content">
@ -119,6 +125,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

8
src/components/card/test/basic/main.html
View File

@ -1,5 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Basic Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
<ion-content style="background: #e5e5e5"> <ion-content style="background: #e5e5e5">

7
src/components/card/test/images/main.html
View File

@ -1,5 +1,10 @@
<ion-header>
<ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Card Images</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

9
src/components/card/test/list/main.html
View File

@ -1,5 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>List Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar><ion-title>List Cards</ion-title></ion-toolbar>
<ion-content class="outer-content"> <ion-content class="outer-content">
@ -100,5 +106,4 @@
</ion-card> </ion-card>
</ion-content> </ion-content>

155
src/components/card/test/map/main.html
View File

@ -1,102 +1,107 @@
<ion-header>
<ion-toolbar>
<ion-title>Map Card</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Map Card</ion-title>
</ion-toolbar>
<ion-content class="map-cards"> <ion-content class="map-cards">
<ion-card> <ion-card>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<button fab fab-right fab-top> <button fab fab-right fab-top>
<ion-icon name="pin"></ion-icon> <ion-icon name="pin"></ion-icon>
</button>
<ion-item>
<ion-icon item-left large name="football"></ion-icon>
<h2>Museum of Football</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-item>
<ion-icon item-left large name="wine"></ion-icon>
<h2>Institute of Fine Cocktails</h2>
<p>14 S. Hop Avenue, Madison, WI 53703</p>
</ion-item>
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button primary clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button> </button>
</ion-item>
</ion-card> <ion-item>
<ion-icon item-left large name="football"></ion-icon>
<h2>Museum of Football</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-card> <ion-item>
<ion-icon item-left large name="wine"></ion-icon>
<h2>Institute of Fine Cocktails</h2>
<p>14 S. Hop Avenue, Madison, WI 53703</p>
</ion-item>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <ion-item>
<button danger fab fab-right fab-top> <span item-left>18 min</span>
<ion-icon name="pin"></ion-icon> <span item-left>(2.6 mi)</span>
</button> <button primary clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
<ion-item> </ion-card>
<ion-icon item-left large name="cloud"></ion-icon>
<h2>Yoshi's Island</h2>
<p>Iggy Koopa</p>
</ion-item>
<ion-item> <ion-card>
<ion-icon item-left large name="leaf"></ion-icon>
<h2>Forest of Illusion</h2>
<p>Roy Koopa</p>
</ion-item>
<ion-item> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<span item-left>3 hr</span> <button danger fab fab-right fab-top>
<span item-left>(4.8 mi)</span> <ion-icon name="pin"></ion-icon>
<button danger clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button> </button>
</ion-item>
</ion-card> <ion-item>
<ion-icon item-left large name="cloud"></ion-icon>
<h2>Yoshi's Island</h2>
<p>Iggy Koopa</p>
</ion-item>
<ion-card> <ion-item>
<ion-icon item-left large name="leaf"></ion-icon>
<h2>Forest of Illusion</h2>
<p>Roy Koopa</p>
</ion-item>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <ion-item>
<button secondary fab fab-right fab-top> <span item-left>3 hr</span>
<ion-icon name="pin"></ion-icon> <span item-left>(4.8 mi)</span>
</button> <button danger clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
<ion-item> </ion-card>
<ion-icon item-left large name="information-circle"></ion-icon>
<h2>Museum of Information</h2>
<p>44 Rue de Info, 75010 Paris, France</p>
</ion-item>
<ion-item> <ion-card>
<ion-icon item-left large name="leaf"></ion-icon>
<h2>General Pharmacy</h2>
<p>1 Avenue Faux, 75010 Paris, France</p>
</ion-item>
<ion-item> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<span item-left secondary>26 min</span> <button secondary fab fab-right fab-top>
<span item-left>(8.1 mi)</span> <ion-icon name="pin"></ion-icon>
<button secondary clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button> </button>
</ion-item>
</ion-card> <ion-item>
<ion-icon item-left large name="information-circle"></ion-icon>
<h2>Museum of Information</h2>
<p>44 Rue de Info, 75010 Paris, France</p>
</ion-item>
<ion-item>
<ion-icon item-left large name="leaf"></ion-icon>
<h2>General Pharmacy</h2>
<p>1 Avenue Faux, 75010 Paris, France</p>
</ion-item>
<ion-item>
<span item-left secondary>26 min</span>
<span item-left>(8.1 mi)</span>
<button secondary clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
</ion-card>
</ion-content> </ion-content>
<style> <style>
.map-cards img { .map-cards img {
height: 200px; height: 200px;

167
src/components/card/test/social/main.html
View File

@ -1,109 +1,114 @@
<ion-header>
<ion-toolbar>
<ion-title>Social Card</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Social Card</ion-title>
</ion-toolbar>
<ion-content class="social-cards"> <ion-content class="social-cards">
<ion-card> <ion-card>
<ion-item> <ion-item>
<ion-avatar item-left> <ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
<h2>Marty McFly</h2> <h2>Marty McFly</h2>
<p>November 5, 1955</p> <p>November 5, 1955</p>
</ion-item> </ion-item>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<ion-card-content> <ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p> <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div> <div>12 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="text"></ion-icon> <ion-icon name="text"></ion-icon>
<div>4 Comments</div> <div>4 Comments</div>
</button> </button>
<ion-note item-right> <ion-note item-right>
11h ago 11h ago
</ion-note> </ion-note>
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-card> <ion-card>
<ion-item> <ion-item>
<ion-avatar item-left> <ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
<h2>Sarah Connor</h2> <h2>Sarah Connor</h2>
<p>May 12, 1984</p> <p>May 12, 1984</p>
</ion-item> </ion-item>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<ion-card-content> <ion-card-content>
<p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p> <p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p>
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>30 Likes</div> <div>30 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="text"></ion-icon> <ion-icon name="text"></ion-icon>
<div>64 Comments</div> <div>64 Comments</div>
</button> </button>
<ion-note item-right> <ion-note item-right>
30yr ago 30yr ago
</ion-note> </ion-note>
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-card> <ion-card>
<ion-item> <ion-item>
<ion-avatar item-left> <ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
<h2>Dr. Ian Malcolm</h2> <h2>Dr. Ian Malcolm</h2>
<p>June 28, 1990</p> <p>June 28, 1990</p>
</ion-item> </ion-item>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<ion-card-content> <ion-card-content>
<p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p> <p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p>
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>46 Likes</div> <div>46 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name="text"></ion-icon> <ion-icon name="text"></ion-icon>
<div>66 Comments</div> <div>66 Comments</div>
</button> </button>
<ion-note item-right> <ion-note item-right>
2d ago 2d ago
</ion-note> </ion-note>
</ion-item> </ion-item>
</ion-card> </ion-card>
</ion-content> </ion-content>
<style> <style>
.social-cards img { .social-cards img {
height: 200px; height: 200px;

7
src/components/checkbox/test/basic/main.html
View File

@ -1,5 +1,10 @@
<ion-header>
<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Checkboxes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

11
src/components/chip/test/basic/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Chips With Text</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Chips With Text</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">

11
src/components/chip/test/delete/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Chips With Delete</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Chips With Delete</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">

11
src/components/chip/test/image/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Chips With Image</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Chips With Image</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">

11
src/components/datetime/test/basic/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Datetime</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

11
src/components/datetime/test/labels/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Datetime</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

9
src/components/grid/test/alignment/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Grid Alignment</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Grid Alignment</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="alignment-demo"> <ion-content class="alignment-demo">
<ion-row> <ion-row>

9
src/components/grid/test/basic/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Grid</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="grid-demo"> <ion-content class="grid-demo">
<ion-grid> <ion-grid>

9
src/components/grid/test/full/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Grid</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="grid-full"> <ion-content class="grid-full">

11
src/components/icon/test/basic/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Icons</ion-title>
</ion-toolbar>
<ion-content> <ion-content>
@ -87,6 +91,7 @@
</ion-content> </ion-content>
<style> <style>
/*to ensure ng css encapsulation doesn't mess with icon attributes*/ /*to ensure ng css encapsulation doesn't mess with icon attributes*/
code { code {

9
src/components/infinite-scroll/test/basic/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Infinite Scroll</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

9
src/components/infinite-scroll/test/short-list/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Infinite Scroll</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

11
src/components/input/test/clear-input/main.html
View File

@ -1,12 +1,14 @@
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Clear Input</ion-title> <ion-title>Clear Input</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item> <ion-item>
@ -14,7 +16,6 @@
<ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input> <ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

10
src/components/input/test/fixed-inline-labels/main.html
View File

@ -1,7 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Fixed Inline Label Text Input</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Fixed Inline Label Text Input</ion-title>
</ion-toolbar>
<ion-content> <ion-content>

9
src/components/input/test/floating-labels/main.html
View File

@ -1,8 +1,14 @@
<ion-header>
<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Floating Label Text Input</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item> <ion-item>
@ -76,6 +82,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

7
src/components/input/test/form-inputs/main.html
View File

@ -1,5 +1,10 @@
<ion-header>
<ion-toolbar><ion-title>Form Inputs</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Form Inputs</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

7
src/components/input/test/inline-labels/main.html
View File

@ -1,5 +1,10 @@
<ion-header>
<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Inline Label Text Input</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

20
src/components/input/test/input-focus/main.html
View File

@ -1,12 +1,15 @@
<ion-header>
<ion-toolbar primary> <ion-toolbar primary>
<ion-title>Inset Focus</ion-title> <ion-title>Inset Focus</ion-title>
<ion-buttons end> <ion-buttons end>
<button (click)="reload()"> <button (click)="reload()">
Reload Reload
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content> <ion-content>
@ -179,5 +182,4 @@
</ion-list> </ion-list>
</ion-content> </ion-content>

11
src/components/input/test/inset-inputs/main.html
View File

@ -1,12 +1,14 @@
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Inset Inputs</ion-title> <ion-title>Inset Inputs</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<ion-list inset> <ion-list inset>
<ion-item> <ion-item>
@ -67,5 +69,4 @@
</ion-card> </ion-card>
</ion-content> </ion-content>

9
src/components/input/test/placeholder-labels/main.html
View File

@ -1,7 +1,10 @@
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Placeholder Label Text Input</ion-title> <ion-title>Placeholder Label Text Input</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

10
src/components/input/test/stacked-labels/main.html
View File

@ -1,7 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Stacked Label Text Input</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Stacked Label Text Input</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

10
src/components/item/test/buttons/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Items as Links/Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
@ -98,6 +105,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

10
src/components/item/test/dividers/main.html
View File

@ -1,6 +1,14 @@
<ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Item Divider</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<ion-item-group> <ion-item-group>
<ion-item> <ion-item>
Plain Ol' div with some text Plain Ol' div with some text

14
src/components/item/test/groups/index.ts
View File

@ -4,9 +4,11 @@ import {ionicBootstrap, NavController, NavParams} from '../../../../../src';
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>{{session.name}}</ion-title> <ion-navbar>
</ion-navbar> <ion-title>{{session.name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<p>{{session.description}}</p> <p>{{session.description}}</p>
<p><button (click)="nav.pop()">Go Back</button></p> <p><button (click)="nav.pop()">Go Back</button></p>
@ -14,7 +16,7 @@ import {ionicBootstrap, NavController, NavParams} from '../../../../../src';
` `
}) })
class SessionDetail { class SessionDetail {
session; session: any;
constructor(params: NavParams, public nav: NavController) { constructor(params: NavParams, public nav: NavController) {
this.session = params.data; this.session = params.data;
@ -30,11 +32,11 @@ class SessionList {
constructor(public nav: NavController) {} constructor(public nav: NavController) {}
addFavorite(timeSlot, session, slidingItem) { addFavorite(timeSlot: any, session: any, slidingItem: any) {
console.error("addFavorite", timeSlot, session, slidingItem); console.error("addFavorite", timeSlot, session, slidingItem);
} }
openSession(session) { openSession(session: any) {
this.nav.push(SessionDetail, session); this.nav.push(SessionDetail, session);
} }

17
src/components/item/test/groups/session-list.html
View File

@ -1,9 +1,14 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Item Groups</ion-title>
<ion-buttons end> <ion-navbar>
<button (click)="reload()">Reload</button> <ion-title>Item Groups</ion-title>
</ion-buttons> <ion-buttons end>
</ion-navbar> <button (click)="reload()">Reload</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

11
src/components/item/test/icons/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Item Icons</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Item Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

10
src/components/item/test/images/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Item Images</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Item Images</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
@ -60,6 +67,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

10
src/components/item/test/media/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Item Media</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
@ -61,6 +68,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

19
src/components/item/test/sliding/main.html
View File

@ -1,17 +1,23 @@
<ion-header>
<ion-toolbar>
<ion-title>Sliding Items</ion-title>
<ion-buttons end>
<button (click)="reload()">Reload</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title>Sliding Items</ion-title>
<ion-buttons end>
<button (click)="reload()">Reload</button>
</ion-buttons>
</ion-toolbar>
<ion-content> <ion-content>
<div padding> <div padding>
<button block (click)="toggleSliding()">Toggle sliding</button> <button block (click)="toggleSliding()">Toggle sliding</button>
<button block (click)="changeDynamic()">Change Dynamic Options</button> <button block (click)="changeDynamic()">Change Dynamic Options</button>
<button block (click)="closeOpened()">Close Opened Items</button> <button block (click)="closeOpened()">Close Opened Items</button>
</div> </div>
<ion-list #myList> <ion-list #myList>
<ion-item-sliding #item100> <ion-item-sliding #item100>
@ -229,6 +235,7 @@
</ion-content> </ion-content>
<style> <style>
img { img {
height: 100px; height: 100px;

9
src/components/item/test/text/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Item Text</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

9
src/components/list/test/headers/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>List Headers</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

7
src/components/list/test/inset/main.html
View File

@ -1,5 +1,10 @@
<ion-header>
<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Inset List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

11
src/components/list/test/no-lines/main.html
View File

@ -1,6 +1,14 @@
<ion-toolbar><ion-title>List No Lines</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>List No Lines</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<ion-list no-lines> <ion-list no-lines>
<ion-list-header> <ion-list-header>
List With No Lines List With No Lines
@ -148,6 +156,7 @@
</ion-note> </ion-note>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
<style> <style>

12
src/components/list/test/repeat-headers/main.html
View File

@ -1,7 +1,14 @@
<ion-toolbar><ion-title>List Headers Borders</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>List Headers Borders</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<ion-list class="outer-content" *ngFor="let person of people"> <ion-list class="outer-content" *ngFor="let person of people">
<ion-list-header> <ion-list-header>
{{person.name}} {{person.name}}
@ -13,4 +20,5 @@
</div> </div>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

34
src/components/loading/test/basic/index.ts
View File

@ -188,18 +188,22 @@ class E2EPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Page 2</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>Some content</ion-content> <ion-content padding>Some content</ion-content>
<ion-toolbar position="bottom"> <ion-footer>
<ion-buttons end> <ion-toolbar>
<button (click)="goToPage3()"> <ion-buttons end>
Navigate <button (click)="goToPage3()">
<ion-icon name="arrow-forward"></ion-icon> Navigate
</button> <ion-icon name="arrow-forward"></ion-icon>
</ion-buttons> </button>
</ion-toolbar> </ion-buttons>
</ion-toolbar>
</ion-footer>
` `
}) })
class Page2 { class Page2 {
@ -218,9 +222,11 @@ class Page2 {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Page 3</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Page 3</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>Some content</ion-content> <ion-content padding>Some content</ion-content>
` `
}) })

33
src/components/loading/test/basic/main.html
View File

@ -1,9 +1,14 @@
<ion-header>
<ion-navbar>
<ion-title>Loading</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar *navbar>
<ion-title>Loading</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>
<button block (click)="presentLoadingIos()">iOS Spinner</button> <button block (click)="presentLoadingIos()">iOS Spinner</button>
<button block (click)="presentLoadingDots()">Dots Spinner</button> <button block (click)="presentLoadingDots()">Dots Spinner</button>
<button block (click)="presentLoadingBubbles()">Bubbles Spinner</button> <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
@ -14,13 +19,19 @@
<button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button> <button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
<button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button> <button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
<button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button> <button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
</ion-content> </ion-content>
<ion-toolbar position="bottom">
<ion-buttons end> <ion-footer>
<button (click)="goToPage2()">
Navigate <ion-toolbar>
<ion-icon name="arrow-forward"></ion-icon> <ion-buttons end>
</button> <button (click)="goToPage2()">
</ion-buttons> Navigate
</ion-toolbar> <ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

8
src/components/loading/test/tabs/index.ts
View File

@ -38,9 +38,11 @@ class E2EPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Page 2</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>Some content</ion-content> <ion-content padding>Some content</ion-content>
` `
}) })

12
src/components/loading/test/tabs/main.html
View File

@ -1,9 +1,15 @@
<ion-header>
<ion-navbar>
<ion-title>Loading</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar *navbar>
<ion-title>Loading</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>
<button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button> <button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
<button block (click)="presentLoadingNav()">Loading w/ Nav</button> <button block (click)="presentLoadingNav()">Loading w/ Nav</button>
</ion-content> </ion-content>

45
src/components/menu/test/basic/page1.html
View File

@ -1,31 +1,34 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="left"> <button menuToggle="left">
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Menu
</ion-title>
<ion-buttons end>
<button>
<ion-icon name="football"></ion-icon>
</button> </button>
</ion-buttons>
<ion-buttons start> <ion-title>
<button> Menu
<ion-icon name="baseball"></ion-icon> </ion-title>
<ion-buttons end>
<button>
<ion-icon name="football"></ion-icon>
</button>
</ion-buttons>
<ion-buttons start>
<button>
<ion-icon name="baseball"></ion-icon>
</button>
</ion-buttons>
<button menuToggle="right" right secondary>
<ion-icon name="menu"></ion-icon>
</button> </button>
</ion-buttons>
<button menuToggle="right" right secondary> </ion-navbar>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar> </ion-header>
<ion-content padding> <ion-content padding>

20
src/components/menu/test/basic/page2.html
View File

@ -1,15 +1,19 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>
Menu
</ion-title>
</ion-navbar>
</ion-header>
<ion-title>
Menu
</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>

27
src/components/menu/test/basic/page3.html
View File

@ -1,19 +1,18 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Menu
</ion-title>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<button menuToggle="left"> </ion-header>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Menu
</ion-title>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content padding> <ion-content padding>

26
src/components/menu/test/disable-swipe/page1.html
View File

@ -1,18 +1,18 @@
<ion-navbar *navbar> <ion-header>
<button menuToggle="left"> <ion-navbar>
<ion-icon name="menu"></ion-icon> <button menuToggle="left">
</button> <ion-icon name="menu"></ion-icon>
</button>
<ion-title> <ion-title>
Main Main
</ion-title> </ion-title>
<button menuToggle="right" right secondary>
<button menuToggle="right" right secondary> <ion-icon name="menu"></ion-icon>
<ion-icon name="menu"></ion-icon> </button>
</button> </ion-navbar>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>

1
src/components/menu/test/enable-disable/main.html
View File

@ -1,4 +1,3 @@
<ion-menu [content]="content" id="menu1"> <ion-menu [content]="content" id="menu1">
<ion-toolbar secondary> <ion-toolbar secondary>

20
src/components/menu/test/enable-disable/page1.html
View File

@ -1,15 +1,19 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="left"> <button menuToggle="left">
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
Multiple Menus Multiple Menus
</ion-title> </ion-title>
</ion-navbar> </ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<h3> Page 1 </h3> <h3> Page 1 </h3>
<p> <p>

20
src/components/menu/test/enable-disable/page2.html
View File

@ -1,15 +1,19 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="left"> <button menuToggle="left">
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
Multiple Menus Multiple Menus
</ion-title> </ion-title>
</ion-navbar> </ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<h3> Page 2 </h3> <h3> Page 2 </h3>
<p> <p>

1
src/components/menu/test/multiple/main.html
View File

@ -1,4 +1,3 @@
<ion-menu [content]="content" id="menu1"> <ion-menu [content]="content" id="menu1">
<ion-toolbar secondary> <ion-toolbar secondary>

19
src/components/menu/test/multiple/page1.html
View File

@ -1,12 +1,15 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
Multiple Menus Multiple Menus
</ion-title> </ion-title>
</ion-navbar> </ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>

27
src/components/menu/test/overlay/page1.html
View File

@ -1,19 +1,18 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="myMenuId">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Overlay Menu
</ion-title>
<button menuToggle="myMenuId2" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<button menuToggle="myMenuId"> </ion-header>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Overlay Menu
</ion-title>
<button menuToggle="myMenuId2" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content #content padding> <ion-content #content padding>

27
src/components/menu/test/push/page1.html
View File

@ -1,19 +1,18 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Push Menu
</ion-title>
<button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<button menuToggle="left"> </ion-header>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Push Menu
</ion-title>
<button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content #content padding> <ion-content #content padding>

27
src/components/menu/test/reveal/page1.html
View File

@ -1,19 +1,18 @@
<ion-header>
<ion-navbar *navbar> <ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Reveal Menu
</ion-title>
<button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<button menuToggle> </ion-header>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Reveal Menu
</ion-title>
<button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content #content padding> <ion-content #content padding>

5
src/components/modal/test/basic/main.html
View File

@ -1,10 +1,14 @@
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>
<ion-title>Modals</ion-title> <ion-title>Modals</ion-title>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<p> <p>
<button (click)="presentModal()">Present modal, pass params</button> <button (click)="presentModal()">Present modal, pass params</button>
</p> </p>
@ -26,4 +30,5 @@
<p> <p>
{{platforms | json}} {{platforms | json}}
</p> </p>
</ion-content> </ion-content>

56
src/components/nav/test/child-navs/index.ts
View File

@ -12,13 +12,15 @@ ionicBootstrap(E2EApp);
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title> <ion-navbar>
Landing Page Comp <ion-title>
</ion-title> Landing Page Comp
</ion-navbar> </ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home"> <ion-content>
<button primary (click)="goToPage()" class="nested-children-test"> <button primary (click)="goToPage()" class="nested-children-test">
Nested Children Test Nested Children Test
</button> </button>
@ -37,13 +39,15 @@ class LandingPage{
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title> <ion-navbar>
First Page Comp <ion-title>
</ion-title> First Page Comp
</ion-navbar> </ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home"> <ion-content>
<h3>Sub Header First Page</h3> <h3>Sub Header First Page</h3>
<ion-nav [root]="root"></ion-nav> <ion-nav [root]="root"></ion-nav>
</ion-content> </ion-content>
@ -55,13 +59,15 @@ class FirstPage{
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title> <ion-navbar>
Second Page Comp <ion-title>
</ion-title> Second Page Comp
</ion-navbar> </ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home"> <ion-content>
<h3>Sub Header Second Page</h3> <h3>Sub Header Second Page</h3>
<ion-nav [root]="root"></ion-nav> <ion-nav [root]="root"></ion-nav>
</ion-content> </ion-content>
@ -73,13 +79,15 @@ class SecondPage{
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title> <ion-navbar>
Third Page Comp <ion-title>
</ion-title> Third Page Comp
</ion-navbar> </ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home"> <ion-content>
<h3>Sub Header Third Page</h3> <h3>Sub Header Third Page</h3>
<ion-nav [root]="root"></ion-nav> <ion-nav [root]="root"></ion-nav>
</ion-content> </ion-content>

28
src/components/nav/test/insert-views/index.ts
View File

@ -4,12 +4,14 @@ import {ionicBootstrap, NavController} from '../../../../../src';
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Root</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Root</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<button block (click)="pushPage()">Push Page</button> <button block (click)="pushPage()">Push Page</button>
</ion-content>`, </ion-content>`,
}) })
class FirstPage { class FirstPage {
@ -23,13 +25,15 @@ class FirstPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Root</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Root</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<h1>Second page</h1> <h1>Second page</h1>
<button block (click)="insertPage()">Insert Page</button> <button block (click)="insertPage()">Insert Page</button>
</ion-content> </ion-content>
` `
}) })
@ -44,9 +48,11 @@ class SecondPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Inserted Paged</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Inserted Paged</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
Inserted Page Inserted Page
</ion-content> </ion-content>

36
src/components/nav/test/nested/index.ts
View File

@ -5,9 +5,11 @@ import {Config, Nav, App} from '../../../../../src';
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar> <ion-header>
<ion-title>Login</ion-title> <ion-navbar>
</ion-navbar> <ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content style="text-align:center;" padding> <ion-content style="text-align:center;" padding>
<p><button (click)="goToAccount()">Login</button></p> <p><button (click)="goToAccount()">Login</button></p>
<p><button (click)="goBack()">App goBack()</button></p> <p><button (click)="goBack()">App goBack()</button></p>
@ -87,12 +89,14 @@ export class Account {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar primary> <ion-header>
<button menuToggle> <ion-navbar primary>
<ion-icon name="menu"></ion-icon> <button menuToggle>
</button> <ion-icon name="menu"></ion-icon>
<ion-title>Account Dashboard</ion-title> </button>
</ion-navbar> <ion-title>Account Dashboard</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<p><button (click)="goToProfile()">Profile</button></p> <p><button (click)="goToProfile()">Profile</button></p>
<p><button (click)="logOut()">Logout</button></p> <p><button (click)="logOut()">Logout</button></p>
@ -122,12 +126,14 @@ export class Dashboard {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar danger> <ion-header>
<button menuToggle> <ion-navbar danger>
<ion-icon name="menu"></ion-icon> <button menuToggle>
</button> <ion-icon name="menu"></ion-icon>
<ion-title>Account Profile</ion-title> </button>
</ion-navbar> <ion-title>Account Profile</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<p><button (click)="goToDashboard()">Dashboard</button></p> <p><button (click)="goToDashboard()">Dashboard</button></p>
<p><button (click)="logOut()">Logout</button></p> <p><button (click)="logOut()">Logout</button></p>

18
src/components/nav/test/routing/view1.html
View File

@ -1,12 +1,17 @@
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>First View</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>First View</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>
<h4> <h4>
Window Hash: {{windowHash}} Window Hash: {{windowHash}}
</h4> </h4>
@ -22,4 +27,5 @@
<p> <p>
<a href="#/3/151">Third View via href, 151 as id param</a> <a href="#/3/151">Third View via href, 151 as id param</a>
</p> </p>
</ion-content> </ion-content>

22
src/components/nav/test/routing/view2.html
View File

@ -1,14 +1,19 @@
<ion-header>
<ion-navbar primary>
<ion-title>Second View</ion-title>
<ion-buttons end>
<button>
<ion-icon name="help"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-navbar *navbar primary>
<ion-title>Second View</ion-title>
<ion-buttons end>
<button>
<ion-icon name="help"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding> <ion-content padding>
<h4> <h4>
Window Hash: {{windowHash}} Window Hash: {{windowHash}}
</h4> </h4>
@ -24,4 +29,5 @@
<p> <p>
<a href="#/">First View via href</a> <a href="#/">First View via href</a>
</p> </p>
</ion-content> </ion-content>

12
src/components/nav/test/routing/view3.html
View File

@ -1,9 +1,14 @@
<ion-header>
<ion-navbar primary>
<ion-title>Third View</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar *navbar primary>
<ion-title>Third View</ion-title>
</ion-navbar>
<ion-content padding> <ion-content padding>
<h4> <h4>
Window Hash: {{windowHash}} Window Hash: {{windowHash}}
</h4> </h4>
@ -22,4 +27,5 @@
<p> <p>
<a href="#/">First View via href</a> <a href="#/">First View via href</a>
</p> </p>
</ion-content> </ion-content>

15
src/components/picker/test/basic/main.html
View File

@ -1,6 +1,11 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Picker</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Picker</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
@ -27,7 +32,3 @@
</p> </p>
</ion-content> </ion-content>
<style>
</style>

72
src/components/popover/test/basic/main.html
View File

@ -1,24 +1,30 @@
<ion-navbar *navbar primary> <ion-header>
<ion-buttons left>
<button (click)="presentRadioPopover($event)"> <ion-navbar primary>
<ion-icon name="person"></ion-icon> <ion-buttons left>
</button> <button (click)="presentRadioPopover($event)">
<button (click)="presentLongListPopover($event)"> <ion-icon name="person"></ion-icon>
<ion-icon name="search"></ion-icon> </button>
</button> <button (click)="presentLongListPopover($event)">
</ion-buttons> <ion-icon name="search"></ion-icon>
<ion-title>Popover</ion-title> </button>
<ion-buttons end> </ion-buttons>
<button (click)="presentListPopover($event)"> <ion-title>Popover</ion-title>
<ion-icon name="options"></ion-icon> <ion-buttons end>
</button> <button (click)="presentListPopover($event)">
<button (click)="presentRadioPopover($event)"> <ion-icon name="options"></ion-icon>
<ion-icon name="more"></ion-icon> </button>
</button> <button (click)="presentRadioPopover($event)">
</ion-buttons> <ion-icon name="more"></ion-icon>
</ion-navbar> </button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content #popoverContent> <ion-content #popoverContent>
<ion-list> <ion-list>
<button ion-item (click)="presentListPopover($event)" class="e2eOpenListPopover"> <button ion-item (click)="presentListPopover($event)" class="e2eOpenListPopover">
Present List Popover Present List Popover
@ -55,16 +61,22 @@
<div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div> <div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
</div> </div>
</ion-content> </ion-content>
<ion-toolbar position="bottom">
<ion-title>Popover</ion-title> <ion-footer>
<ion-buttons start>
<button (click)="presentListPopover($event)"> <ion-toolbar>
<ion-icon name="more"></ion-icon> <ion-title>Popover</ion-title>
</button> <ion-buttons start>
<button (click)="presentLongListPopover($event)"> <button (click)="presentListPopover($event)">
<ion-icon name="search"></ion-icon> <ion-icon name="more"></ion-icon>
</button> </button>
</ion-buttons> <button (click)="presentLongListPopover($event)">
</ion-toolbar> <ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

10
src/components/radio/test/basic/main.html
View File

@ -1,7 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Radio Group</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Radio Group</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

26
src/components/range/test/basic/page1.html
View File

@ -1,18 +1,18 @@
<ion-navbar *navbar> <ion-header>
<button menuToggle="left"> <ion-navbar>
<ion-icon name="menu"></ion-icon> <button menuToggle="left">
</button> <ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Range
</ion-title>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-title> </ion-header>
Range
</ion-title>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content> <ion-content>

9
src/components/refresher/test/basic/main.html
View File

@ -1,4 +1,11 @@
<ion-toolbar><ion-title>Pull To Refresh</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Pull To Refresh</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

40
src/components/scroll/test/basic/main.html
View File

@ -1,26 +1,32 @@
<!-- <ion-view nav-title="Pull to refresh"> --> <ion-header>
<ion-toolbar><ion-title>Scroll</ion-title></ion-toolbar>
<ion-content> <ion-toolbar>
<ion-title>Scroll</ion-title>
</ion-toolbar>
<h2>Horizontal</h2> </ion-header>
<ion-scroll scroll-x="true" style="height: 200px">
<div style="height: 200px; width: 2500px; background: url('eight_horns.png') repeat"></div>
</ion-scroll>
<h2>Vertical</h2>
<ion-scroll scroll-y="true" style="width: 200px; height: 500px">
<div style="height: 2500px; width: 200px; background: url('eight_horns.png') repeat"></div>
</ion-scroll>
<h2>Both</h2> <ion-content>
<ion-scroll scroll-x="true" scroll-y="true" style="width: 100%; height: 500px">
<div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div> <h2>Horizontal</h2>
</ion-scroll> <ion-scroll scroll-x="true" style="height: 200px">
<div style="height: 200px; width: 2500px; background: url('eight_horns.png') repeat"></div>
</ion-scroll>
<h2>Vertical</h2>
<ion-scroll scroll-y="true" style="width: 200px; height: 500px">
<div style="height: 2500px; width: 200px; background: url('eight_horns.png') repeat"></div>
</ion-scroll>
<h2>Both</h2>
<ion-scroll scroll-x="true" scroll-y="true" style="width: 100%; height: 500px">
<div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div>
</ion-scroll>
</ion-content>
</ion-content>
<!-- </ion-view> -->
<style> <style>
f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; } f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
#counter { #counter {

14
src/components/searchbar/test/nav/detail.html
View File

@ -1,7 +1,15 @@
<ion-navbar *navbar>
<ion-title>Detail</ion-title> <ion-header>
</ion-navbar>
<ion-navbar>
<ion-title>Detail</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<h1>City: {{city}}</h1> <h1>City: {{city}}</h1>
</ion-content> </ion-content>

13
src/components/searchbar/test/nav/main.html
View File

@ -1,7 +1,14 @@
<ion-navbar *navbar> <ion-header>
<ion-title>First Page</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>First Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> <ion-content padding>
<button block (click)="goToSecond()">Go to Searchbar Page</button> <button block (click)="goToSecond()">Go to Searchbar Page</button>
</ion-content> </ion-content>

22
src/components/searchbar/test/nav/search.html
View File

@ -1,17 +1,25 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Searchbar</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Searchbar</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-searchbar primary (ionInput)="getItems($event)" placeholder="Filter Schedules">
</ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-searchbar primary (ionInput)="getItems($event)" placeholder="Filter Schedules">
</ion-searchbar>
</ion-toolbar>
<ion-content> <ion-content>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list> <ion-list>
<button ion-item *ngFor="let item of items" (click)="showDetail(item)" class="e2eSearchbarNavItem"> <button ion-item *ngFor="let item of items" (click)="showDetail(item)" class="e2eSearchbarNavItem">
{{ item }} {{ item }}
</button> </button>
</ion-list> </ion-list>
</ion-content> </ion-content>

12
src/components/searchbar/test/toolbar/main.html
View File

@ -1,8 +1,14 @@
<ion-navbar *navbar> <ion-header>
<ion-title>Test</ion-title>
</ion-navbar> <ion-navbar>
<ion-title>Test</ion-title>
</ion-navbar>
</ion-header>
<ion-content> <ion-content>
<h5 padding-left padding-top> Search - Default Toolbar </h5> <h5 padding-left padding-top> Search - Default Toolbar </h5>
<ion-toolbar> <ion-toolbar>
<ion-searchbar [(ngModel)]="defaultToolbarSearch"></ion-searchbar> <ion-searchbar [(ngModel)]="defaultToolbarSearch"></ion-searchbar>

141
src/components/segment/test/basic/main.html
View File

@ -1,31 +1,37 @@
<ion-toolbar> <ion-header>
<ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends"> <ion-toolbar>
Friends <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
</ion-segment-button> <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
<ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)"> Friends
Enemies </ion-segment-button>
</ion-segment-button> <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
</ion-segment> Enemies
</ion-toolbar> </ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment [(ngModel)]="icons" secondary>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment [(ngModel)]="icons" secondary>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-content padding> <ion-content padding>
<div>Are we friends or enemies? <b>{{ relationship }}</b></div> <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
<h4>Map mode: NgControl</h4> <h4>Map mode: NgControl</h4>
@ -91,46 +97,53 @@
</ion-segment> </ion-segment>
<button block dark (click)="toggleDisabled()">Toggle Disabled</button> <button block dark (click)="toggleDisabled()">Toggle Disabled</button>
</ion-content> </ion-content>
<ion-toolbar position="bottom" primary>
<ion-segment [(ngModel)]="appType" light>
<ion-segment-button value="paid">
Primary
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Light Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom"> <ion-footer>
<ion-segment [(ngModel)]="appType" danger>
<ion-segment-button value="paid">
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Danger Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom"> <ion-toolbar primary>
<ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled"> <ion-segment [(ngModel)]="appType" light>
<ion-segment-button value="paid"> <ion-segment-button value="paid">
Default Primary
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="free"> <ion-segment-button value="free">
Toolbar Toolbar
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="top"> <ion-segment-button value="top" class="e2eSegmentTopGrossing">
Dark Segment Light Segment
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="appType" danger>
<ion-segment-button value="paid">
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Danger Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
<ion-segment-button value="paid">
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Dark Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-footer>

18
src/components/segment/test/nav/index.ts
View File

@ -20,14 +20,16 @@ class SegmentPage {
@Component({ @Component({
template: ` template: `
<ion-navbar *navbar hideBackButton> <ion-header>
<button menuToggle> <ion-navbar hideBackButton>
<ion-icon name="menu"></ion-icon> <button menuToggle>
</button> <ion-icon name="menu"></ion-icon>
<ion-title> </button>
Second Page <ion-title>
</ion-title> Second Page
</ion-navbar> </ion-title>
</ion-navbar>
</ion-header>
<ion-content> <ion-content>
<h1>Page 2</h1> <h1>Page 2</h1>

42
src/components/segment/test/nav/main.html
View File

@ -1,21 +1,27 @@
<ion-navbar *navbar> <ion-header>
<ion-title>
Segment under Navbar <ion-navbar>
</ion-title> <ion-title>
</ion-navbar> Segment under Navbar
<ion-toolbar> </ion-title>
<ion-segment [(ngModel)]="signInType"> </ion-navbar>
<ion-segment-button value="new">
New <ion-toolbar>
</ion-segment-button> <ion-segment [(ngModel)]="signInType">
<ion-segment-button value="existing" class="e2eSegmentExistingSegment"> <ion-segment-button value="new">
Existing New
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="test"> <ion-segment-button value="existing" class="e2eSegmentExistingSegment">
Test Existing
</ion-segment-button> </ion-segment-button>
</ion-segment> <ion-segment-button value="test">
</ion-toolbar> Test
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>

43
src/components/segment/test/swipe/main.html
View File

@ -1,21 +1,27 @@
<ion-navbar *navbar> <ion-header>
<ion-title>
Segment Swipeable under Navbar <ion-navbar>
</ion-title> <ion-title>
</ion-navbar> Segment Swipeable under Navbar
<ion-toolbar> </ion-title>
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)"> </ion-navbar>
<ion-segment-button value="first">
First <ion-toolbar>
</ion-segment-button> <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="second"> <ion-segment-button value="first">
Second First
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="third"> <ion-segment-button value="second">
Third Second
</ion-segment-button> </ion-segment-button>
</ion-segment> <ion-segment-button value="third">
</ion-toolbar> Third
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-content padding>
@ -27,6 +33,7 @@
</ion-content> </ion-content>
<style> <style>
ion-scroll { ion-scroll {
width: 100%; width: 100%;

11
src/components/select/test/multiple-value/main.html
View File

@ -1,6 +1,11 @@
<ion-toolbar> <ion-header>
<ion-title>Select Item: Multiple Value</ion-title>
</ion-toolbar> <ion-toolbar>
<ion-title>Select Item: Multiple Value</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">

Some files were not shown because too many files have changed in this diff Show More