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

chore(): updating button tests.

Browse Source
This commit is contained in:
Josh Thomas
2017-05-01 11:46:27 -05:00
parent 193eafe1e9
commit a61d0aff46
33 changed files with 223 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/button/button.ts
View File

@ -89,6 +89,7 @@ export class Button {
*/
@Prop() default: boolean = false;
@Prop() disabled: boolean = false;
/**
* @input {boolean} If true, activates a transparent button style with a border.
* Type: style
@ -228,9 +229,14 @@ export class Button {
return prevValue;
}, {});
console.log(this.disabled);
return h(this,
h('div', {
class: buttonClasses
class: buttonClasses,
props: {
disabled: this.disabled
}
},
[
h('span', {

10
src/components/button/test/anchors/app/app.component.ts
View File

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
import { PageOne } from '../pages/page-one/page-one';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class AppComponent {
rootPage = PageOne;
}

19
src/components/button/test/anchors/app/app.module.ts
View File

@ -1,19 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from '../../../../..';
import { AppComponent } from './app.component';
import { PageOneModule } from '../pages/page-one/page-one.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent),
PageOneModule
],
bootstrap: [IonicApp]
})
export class AppModule {}

5
src/components/button/test/anchors/app/main.ts
View File

@ -1,5 +0,0 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

1
src/components/button/test/anchors/e2e.ts
View File

@ -1 +0,0 @@

52
src/components/button/test/anchors/pages/page-one/page-one.html
View File

@ -1,52 +0,0 @@
<ion-header>
<ion-toolbar>
<ion-title>Anchor Buttons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align:center" no-bounce>
<p>
<a ion-button>Default</a>
<a ion-button class="activated">Default.activated</a>
</p>
<p>
<a ion-button color="primary">Primary</a>
<a ion-button color="primary" class="activated">Primary.activated</a>
</p>
<p>
<a ion-button color="secondary">Secondary</a>
<a ion-button color="secondary" class="activated">Secondary.activated</a>
</p>
<p>
<a ion-button color="danger">Danger</a>
<a ion-button color="danger" class="activated">Danger.activated</a>
</p>
<p>
<a ion-button color="light">Light</a>
<a ion-button color="light" class="activated">Light.activated</a>
</p>
<p>
<a ion-button color="dark">Dark</a>
<a ion-button color="dark" class="activated">Dark.activated</a>
</p>
<p>
<a ion-button disabled>A Disabled</a>
<a ion-button color="secondary" disabled>Secondary Disabled</a>
</p>
<p>
<a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a>
<a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a>
</p>
</ion-content>

17
src/components/button/test/anchors/pages/page-one/page-one.module.ts
View File

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@NgModule({
declarations: [
PageOne,
],
imports: [
IonicPageModule.forChild(PageOne),
],
entryComponents: [
PageOne,
]
})
export class PageOneModule {}

22
src/components/button/test/anchors/pages/page-one/page-one.ts
View File

@ -1,22 +0,0 @@
import { Component } from '@angular/core';
import { App } from '../../../../../..';
@Component({
templateUrl: 'page-one.html'
})
export class PageOne {
btnColor: string;
testingColors = ['primary', 'secondary', 'danger', 'dark'];
testingColorIndex = 0;
constructor(app: App) {
app.setTitle('Basic Buttons');
this.chgColor();
}
chgColor() {
this.btnColor = this.testingColors[this.testingColorIndex];
console.log('dynamic btnColor', this.btnColor);
this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
}
}

44
src/components/button/test/attributes/pages/page-one/page-one.html
View File

@ -2,10 +2,10 @@
<ion-toolbar>
<ion-buttons end>
<button ion-button>Default</button>
<button ion-button solid>Solid</button>
<button ion-button outline>Outline</button>
<button ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</button>
<ion-button>Default</ion-button>
<ion-button solid>Solid</ion-button>
<ion-button outline>Outline</ion-button>
<ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</ion-button>
</ion-buttons>
</ion-toolbar>
@ -14,26 +14,26 @@
<ion-content padding style="text-align:center" no-bounce>
<h5>Button Displays</h5>
<button ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
<button ion-button [full]="isFull">Full</button>
<button ion-button full block>Both</button>
<ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</ion-button>
<ion-button [full]="isFull">Full</ion-button>
<ion-button full block>Both</ion-button>
<h5>Button Styles (Click to Toggle)</h5>
<button ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</button>
<button ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</button>
<button ion-button [clear]="isClear" (click)="toggleStyles()">Clear</button>
<ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</ion-button>
<ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</ion-button>
<ion-button [clear]="isClear" (click)="toggleStyles()">Clear</ion-button>
<h5>Button Sizes</h5>
<button ion-button small="true">Small</button>
<button ion-button default="true">Default</button>
<button ion-button large>Large</button>
<ion-button small="true">Small</ion-button>
<ion-button default="true">Default</ion-button>
<ion-button large>Large</ion-button>
<h5>Button Colors (Click to Toggle)</h5>
<button ion-button block [color]="isSecondary" (click)="toggleColors()">Block</button>
<button ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</button>
<button ion-button outline [color]="isDark" (click)="toggleColors()">Outline</button>
<button ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</button>
<button ion-button (click)="removeColors()">Remove Colors</button>
<ion-button block [color]="isSecondary" (click)="toggleColors()">Block</ion-button>
<ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</ion-button>
<ion-button outline [color]="isDark" (click)="toggleColors()">Outline</ion-button>
<ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</ion-button>
<ion-button (click)="removeColors()">Remove Colors</ion-button>
</ion-content>
@ -41,10 +41,10 @@
<ion-toolbar>
<ion-buttons end>
<button ion-button color="secondary">Default</button>
<button ion-button solid color="danger">Solid</button>
<button ion-button outline color="dark">Outline</button>
<button ion-button clear color="secondary">Clear</button>
<ion-button color="secondary">Default</ion-button>
<ion-button solid color="danger">Solid</ion-button>
<ion-button outline color="dark">Outline</ion-button>
<ion-button clear color="secondary">Clear</ion-button>
</ion-buttons>
</ion-toolbar>

5
src/components/button/test/attributes/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

40
src/components/button/test/basic/pages/page-one/page-one.html
View File

@ -8,45 +8,45 @@
<ion-content padding style="text-align:center" no-bounce>
<!--
<p>
<button ion-button (click)="test($event)">Default</button>
<button ion-button (click)="test($event)" class="activated">Default.activated</button>
<ion-button (click)="test($event)">Default</ion-button>
<ion-button (click)="test($event)" class="activated">Default.activated</ion-button>
</p>
<p>
<button ion-button color="primary">Primary</button>
<button ion-button color="primary" class="activated">Primary.activated</button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="primary" class="activated">Primary.activated</ion-button>
</p>
<p>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="secondary" class="activated">Secondary.activated</button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="secondary" class="activated">Secondary.activated</ion-button>
</p>
<p>
<button ion-button color="danger">Danger</button>
<button ion-button color="danger" class="activated">Danger.activated</button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="danger" class="activated">Danger.activated</ion-button>
</p>
<p>
<button ion-button color="light">Light</button>
<button ion-button color="light" class="activated">Light.activated</button>
<ion-button color="light">Light</ion-button>
<ion-button color="light" class="activated">Light.activated</ion-button>
</p>
<p>
<button ion-button color="dark">Dark</button>
<button ion-button color="dark" class="activated">Dark.activated</button>
<ion-button color="dark">Dark</ion-button>
<ion-button color="dark" class="activated">Dark.activated</ion-button>
</p>
-->
<p>
<button ion-button disabled>Button Disabled</button>
<button ion-button color="secondary" disabled>Secondary Disabled</button>
<ion-button disabled large clear>Button Disabled</ion-button>
<ion-button color="secondary" disabled>Secondary Disabled</ion-button>
</p>
<!--
<p>
<button ion-button [color]="btnColor" (click)="chgColor()">Change Color</button>
<button ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
<ion-button [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
<ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
</p>
-->
</ion-content>

5
src/components/button/test/basic/pages/page-one/page-one.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -13,6 +13,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

14
src/components/button/test/block/pages/page-one/page-one.html
View File

@ -11,36 +11,36 @@
<p>
<a ion-button block href="#">a[ion-button][block]</a>
<button ion-button block>button[ion-button][block]</button>
<ion-button block>button[ion-button][block]</ion-button>
</p>
<p>
<a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
<ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
</p>
<p>
<a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
<button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
<ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</ion-button>
</p>
<p>
<a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
<button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
<ion-button block clear color="dark">button[ion-button][clear][block][dark]</ion-button>
</p>
<p>
<a ion-button block round href="#">a[ion-button][block][round]</a>
<button ion-button block round>button[ion-button][block][round]</button>
<ion-button block round>button[ion-button][block][round]</ion-button>
</p>
<p>
<a ion-button block round outline href="#">a[ion-button][block][round][outline]</a>
<button ion-button block round outline>button[ion-button][block][round][outline]</button>
<ion-button block round outline>button[ion-button][block][round][outline]</ion-button>
</p>
<p>
<button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
<ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
</p>
</ion-content>

5
src/components/button/test/block/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

26
src/components/button/test/clear/pages/page-one/page-one.html
View File

@ -10,37 +10,37 @@
<ion-content padding style="text-align:center">
<p>
<button ion-button clear>Default</button>
<button ion-button clear class="activated">Default.activated</button>
<ion-button clear>Default</ion-button>
<ion-button clear class="activated">Default.activated</ion-button>
</p>
<p>
<button ion-button clear color="primary">Primary</button>
<button ion-button clear color="primary" class="activated">Primary.activated</button>
<ion-button clear color="primary">Primary</ion-button>
<ion-button clear color="primary" class="activated">Primary.activated</ion-button>
</p>
<p>
<button ion-button clear color="secondary">Secondary</button>
<button ion-button clear color="secondary" class="activated">Secondary.activated</button>
<ion-button clear color="secondary">Secondary</ion-button>
<ion-button clear color="secondary" class="activated">Secondary.activated</ion-button>
</p>
<p>
<button ion-button clear color="danger">Danger</button>
<button ion-button clear color="danger" class="activated">Danger.activated</button>
<ion-button clear color="danger">Danger</ion-button>
<ion-button clear color="danger" class="activated">Danger.activated</ion-button>
</p>
<p>
<button ion-button clear color="light">Light</button>
<button ion-button clear color="light" class="activated">Light.activated</button>
<ion-button clear color="light">Light</ion-button>
<ion-button clear color="light" class="activated">Light.activated</ion-button>
</p>
<p>
<button ion-button clear color="dark">Dark</button>
<button ion-button clear color="dark" class="activated">Dark.activated</button>
<ion-button clear color="dark">Dark</ion-button>
<ion-button clear color="dark" class="activated">Dark.activated</ion-button>
</p>
<p>
<button ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
<ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</ion-button>
</p>
</ion-content>

5
src/components/button/test/clear/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

36
src/components/button/test/decorator/pages/page-one/page-one.html
View File

@ -3,9 +3,9 @@
<ion-toolbar>
<ion-title>Outline Buttons</ion-title>
<ion-buttons end>
<button ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
<ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
{{strong ? 'Done' : 'Edit' }}
</button>
</ion-button>
</ion-buttons>
</ion-toolbar>
@ -15,43 +15,43 @@
<ion-content padding style="text-align:center" class="outer-content">
<p>
<button ion-button [strong]="strong" small>Default (small)</button>
<button ion-button strong small>Default (small)</button>
<ion-button [strong]="strong" small>Default (small)</ion-button>
<ion-button strong small>Default (small)</ion-button>
</p>
<p>
<button ion-button outline [strong]="strong" color="secondary">Outline</button>
<button ion-button outline strong color="secondary">Outline</button>
<ion-button outline [strong]="strong" color="secondary">Outline</ion-button>
<ion-button outline strong color="secondary">Outline</ion-button>
</p>
<p>
<button ion-button block [strong]="strong" color="danger" large>Block (large)</button>
<button ion-button block strong color="danger" large>Block (large)</button>
<ion-button block [strong]="strong" color="danger" large>Block (large)</ion-button>
<ion-button block strong color="danger" large>Block (large)</ion-button>
</p>
<p>
<button ion-button full [strong]="strong" color="dark">Full</button>
<button ion-button full strong color="dark">Default</button>
<ion-button full [strong]="strong" color="dark">Full</ion-button>
<ion-button full strong color="dark">Default</ion-button>
</p>
<p>
<button ion-button raised [strong]="strong" color="light">Raised</button>
<button ion-button raised strong color="light">Raised</button>
<ion-button raised [strong]="strong" color="light">Raised</ion-button>
<ion-button raised strong color="light">Raised</ion-button>
</p>
<p>
<button ion-button round [strong]="strong">Round</button>
<button ion-button round strong>Round</button>
<ion-button round [strong]="strong">Round</ion-button>
<ion-button round strong>Round</ion-button>
</p>
<p>
<button ion-button clear [strong]="strong">Clear</button>
<button ion-button clear strong>Clear</button>
<ion-button clear [strong]="strong">Clear</ion-button>
<ion-button clear strong>Clear</ion-button>
</p>
<p>
<button ion-button clear [strong]="strong">Default</button>
<button ion-button clear strong>Default</button>
<ion-button clear [strong]="strong">Default</ion-button>
<ion-button clear strong>Default</ion-button>
</p>
</ion-content>

5
src/components/button/test/decorator/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

30
src/components/button/test/dynamic/pages/page-one/page-one.html
View File

@ -2,12 +2,12 @@
<ion-toolbar>
<ion-buttons start>
<button ion-button color="danger" *ngIf="showIf">ngIf</button>
<button ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
<ion-button color="danger" *ngIf="showIf">ngIf</ion-button>
<ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons end>
<button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
<ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</ion-button>
</ion-buttons>
</ion-toolbar>
@ -16,25 +16,25 @@
<ion-content padding>
<button ion-button block [solid]="isSolid">Solid</button>
<button ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
<button ion-button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</button>
<button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
<button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
<ion-button block [solid]="isSolid">Solid</ion-button>
<ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</ion-button>
<ion-button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</ion-button>
<ion-button block [color]="myColor1" [round]="isCustom">Custom #1</ion-button>
<ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</ion-button>
<hr/>
<button ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</button>
<button ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</button>
<ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</ion-button>
<ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</ion-button>
<hr/>
<button ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</button>
<ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</ion-button>
<hr/>
<button ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
<button ion-button block clear color="danger" (click)="reset()">Reset all buttons</button>
<button ion-button small *ngFor="let button of buttons"
<ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</ion-button>
<ion-button block clear color="danger" (click)="reset()">Reset all buttons</ion-button>
<ion-button small *ngFor="let button of buttons"
[outline]="!button.selected && button.value !== value"
[color]="(button.selected || button.value === value) ? button.value : 'secondary'"
(click)="setValue(button.value)">
<ion-icon *ngIf="button.icon" name="{{button.icon}}"></ion-icon>
{{button.text}}
</button>
</ion-button>
</ion-content>

5
src/components/button/test/dynamic/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

12
src/components/button/test/full/pages/page-one/page-one.html
View File

@ -11,7 +11,7 @@
<p>
<a ion-button full href="#">a[ion-button][full]</a>
<button ion-button full>button[ion-button][full]</button>
<ion-button full>button[ion-button][full]</ion-button>
</p>
<p>
@ -19,25 +19,25 @@
<ion-icon name="help-circle"></ion-icon>
a[ion-button][full] + icon
</a>
<button ion-button full icon-left>
<ion-button full icon-left>
<ion-icon name="help-circle"></ion-icon>
button[ion-button][full] + icon
</button>
</ion-button>
</p>
<p>
<a ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</a>
<button ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</button>
<ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</ion-button>
</p>
<p>
<a ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</a>
<button ion-button full clear color="light">button[ion-button][full][clear][light]</button>
<ion-button full clear color="light">button[ion-button][full][clear][light]</ion-button>
</p>
<p>
<a ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</a>
<button ion-button full clear color="dark">button[ion-button][full][clear][dark]</button>
<ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
</p>
</ion-content>

5
src/components/button/test/full/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

36
src/components/button/test/icons/pages/page-one/page-one.html
View File

@ -10,10 +10,10 @@
<ion-content padding>
<div>
<button ion-button icon-left>
<ion-button icon-left>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
</ion-button>
<a ion-button icon-left>
<ion-icon name="home"></ion-icon>
Left Icon
@ -21,10 +21,10 @@
</div>
<div>
<button ion-button icon-right>
<ion-button icon-right>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
</ion-button>
<a ion-button icon-right>
Right Icon
<ion-icon name="star"></ion-icon>
@ -32,19 +32,19 @@
</div>
<div>
<button ion-button icon-only>
<ion-button icon-only>
<ion-icon name="flag"></ion-icon>
</button>
</ion-button>
<a ion-button icon-only>
<ion-icon name="flag"></ion-icon>
</a>
</div>
<div>
<button ion-button large icon-left>
<ion-button large icon-left>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</button>
</ion-button>
<a ion-button large icon-left>
<ion-icon name="help-circle"></ion-icon>
Left, Large
@ -52,10 +52,10 @@
</div>
<div>
<button ion-button large icon-right>
<ion-button large icon-right>
Right, Large
<ion-icon name="settings"></ion-icon>
</button>
</ion-button>
<a ion-button large icon-right>
Right, Large
<ion-icon name="settings"></ion-icon>
@ -63,19 +63,19 @@
</div>
<div>
<button ion-button large icon-only>
<ion-button large icon-only>
<ion-icon name="heart"></ion-icon>
</button>
</ion-button>
<a ion-button large icon-only>
<ion-icon name="heart"></ion-icon>
</a>
</div>
<div>
<button ion-button small icon-left>
<ion-button small icon-left>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</button>
</ion-button>
<a ion-button small icon-left>
<ion-icon name="checkmark"></ion-icon>
Left, Small
@ -83,10 +83,10 @@
</div>
<div>
<button ion-button small icon-right>
<ion-button small icon-right>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-button>
<a ion-button small icon-right>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
@ -94,9 +94,9 @@
</div>
<div>
<button ion-button small icon-only>
<ion-button small icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-button>
<a ion-button small icon-only>
<ion-icon name="search"></ion-icon>
</a>

5
src/components/button/test/icons/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

34
src/components/button/test/outline/pages/page-one/page-one.html
View File

@ -10,53 +10,53 @@
<ion-content padding style="text-align:center" class="outer-content">
<p>
<button ion-button outline>Default</button>
<button ion-button outline class="activated">Default.activated</button>
<ion-button outline>Default</ion-button>
<ion-button outline class="activated">Default.activated</ion-button>
</p>
<p>
<button ion-button outline color="primary">Primary</button>
<button ion-button outline color="primary" class="activated">Primary.activated</button>
<ion-button outline color="primary">Primary</ion-button>
<ion-button outline color="primary" class="activated">Primary.activated</ion-button>
</p>
<p>
<button ion-button outline color="secondary">Secondary</button>
<button ion-button outline color="secondary" class="activated">Secondary.activated</button>
<ion-button outline color="secondary">Secondary</ion-button>
<ion-button outline color="secondary" class="activated">Secondary.activated</ion-button>
</p>
<p>
<button ion-button outline color="danger">Danger</button>
<button ion-button outline color="danger" class="activated">Danger.activated</button>
<ion-button outline color="danger">Danger</ion-button>
<ion-button outline color="danger" class="activated">Danger.activated</ion-button>
</p>
<p>
<button ion-button outline color="light">Light</button>
<button ion-button outline color="light" class="activated">Light.activated</button>
<ion-button outline color="light">Light</ion-button>
<ion-button outline color="light" class="activated">Light.activated</ion-button>
</p>
<p>
<button ion-button outline color="dark">Dark</button>
<button ion-button outline color="dark" class="activated">Dark.activated</button>
<ion-button outline color="dark">Dark</ion-button>
<ion-button outline color="dark" class="activated">Dark.activated</ion-button>
</p>
<p>
<button ion-button outline block>button[ion-button][outline][block]</button>
<ion-button outline block>button[ion-button][outline][block]</ion-button>
</p>
<p>
<button ion-button outline block class="activated">[outline][block].activated</button>
<ion-button outline block class="activated">[outline][block].activated</ion-button>
</p>
<p>
<button ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</button>
<ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</ion-button>
</p>
<p>
<button ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</button>
<ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</ion-button>
</p>
<p>
<button ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
<ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</ion-button>
</p>
</ion-content>

5
src/components/button/test/outline/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

5
src/components/button/test/raised/app.module.ts
View File

@ -1,4 +1,4 @@
import { Component, NgModule } from '@angular/core';
import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from '../../../..';
@ -27,6 +27,9 @@ export class AppComponent {
bootstrap: [IonicApp],
entryComponents: [
E2EPage
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {}

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

@ -10,32 +10,32 @@
<ion-content padding style="text-align:center">
<p>
<button ion-button raised><span>Default</span></button>
<button ion-button raised raised class="activated">Default.activated</button>
<ion-button raised><span>Default</span></ion-button>
<ion-button raised raised class="activated">Default.activated</ion-button>
</p>
<p>
<button ion-button raised outline>Outline</button>
<button ion-button raised outline class="activated">Outline.activated</button>
<ion-button raised outline>Outline</ion-button>
<ion-button raised outline class="activated">Outline.activated</ion-button>
</p>
<p>
<button ion-button raised clear>Clear</button>
<button ion-button raised clear class="activated">Clear.activated</button>
<ion-button raised clear>Clear</ion-button>
<ion-button raised clear class="activated">Clear.activated</ion-button>
</p>
<p>
<button ion-button raised round>Round</button>
<button ion-button raised round class="activated">Round.activated</button>
<ion-button raised round>Round</ion-button>
<ion-button raised round class="activated">Round.activated</ion-button>
</p>
<p>
<button ion-button raised block>Block</button>
<button ion-button raised block class="activated">Block.activated</button>
<ion-button raised block>Block</ion-button>
<ion-button raised block class="activated">Block.activated</ion-button>
</p>
<p>
<button ion-button raised clear disabled>Clear Disabled</button>
<ion-button raised clear disabled>Clear Disabled</ion-button>
</p>
</ion-content>

20
src/components/button/test/round/pages/page-one/page-one.html
View File

@ -9,17 +9,17 @@
<ion-content padding>
<button ion-button round>button</button>
<button ion-button round color="light">button light</button>
<button ion-button round color="secondary">button secondary</button>
<button ion-button round color="danger">button danger</button>
<button ion-button round color="dark">button dark</button>
<ion-button round>button</ion-button>
<ion-button round color="light">button light</ion-button>
<ion-button round color="secondary">button secondary</ion-button>
<ion-button round color="danger">button danger</ion-button>
<ion-button round color="dark">button dark</ion-button>
<button ion-button round outline>button</button>
<button ion-button round color="light" outline>button light</button>
<button ion-button round color="secondary" outline>button secondary</button>
<button ion-button round color="danger" outline>button danger</button>
<button ion-button round color="dark" outline>button dark</button>
<ion-button round outline>button</ion-button>
<ion-button round color="light" outline>button light</ion-button>
<ion-button round color="secondary" outline>button secondary</ion-button>
<ion-button round color="danger" outline>button danger</ion-button>
<ion-button round color="dark" outline>button dark</ion-button>
</ion-content>

5
src/components/button/test/round/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

14
src/components/button/test/sizes/pages/page-one/page-one.html
View File

@ -11,26 +11,26 @@
<p>
<a ion-button href="#">a[ion-button]</a>
<button ion-button>button</button>
<ion-button>button</ion-button>
</p>
<p>
<a ion-button small href="#">a[ion-button][small]</a>
<button ion-button small>button[ion-button][small]</button>
<ion-button small>button[ion-button][small]</ion-button>
</p>
<p>
<a ion-button outline small href="#">a[ion-button][outline][small]</a>
<button ion-button outline small>button[ion-button][outline][small]</button>
<ion-button outline small>button[ion-button][outline][small]</ion-button>
</p>
<p>
<a ion-button clear small href="#">a[ion-button][clear][small]</a>
<button ion-button clear small>button[ion-button][clear][small]</button>
<ion-button clear small>button[ion-button][clear][small]</ion-button>
</p>
<p>
<button ion-button large>[large]</button>
<ion-button large>[large]</ion-button>
<a ion-button large href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
@ -41,12 +41,12 @@
<p>
<a ion-button outline large href="#">a[ion-button][outline][large]</a>
<button ion-button outline large>button[ion-button][outline][large]</button>
<ion-button outline large>button[ion-button][outline][large]</ion-button>
</p>
<p>
<a ion-button clear large href="#">a[clear][large]</a>
<button ion-button clear large>button[ion-button][clear][large]</button>
<ion-button clear large>button[ion-button][clear][large]</ion-button>
</p>
</ion-content>

5
src/components/button/test/sizes/pages/page-one/page-one.module.ts
View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from '../../../../../..';
import { PageOne } from './page-one';
@ -12,6 +12,9 @@ import { PageOne } from './page-one';
],
entryComponents: [
PageOne,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule {}

5
src/components/slides/test/control/app.module.ts
View File

@ -1,4 +1,4 @@
import { Component, NgModule } from '@angular/core';
import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from '../../../..';
@ -30,6 +30,9 @@ export class AppComponent {
entryComponents: [
AppComponent,
MyPage
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {}