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

fix(button): update button usage to element ion-button

Browse Source
This commit is contained in:
Brandy Carney
2017-06-13 15:31:01 -04:00
parent 5571c8ff8a
commit 947cb2b260
8 changed files with 180 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -10,37 +10,37 @@
<ion-content padding style="text-align:center">
<p>
<a ion-button block href="#">a[ion-button][block]</a>
<button ion-button block>button[ion-button][block]</button>
<ion-button block href="#">a[ion-button][block]</ion-button>
<ion-button block>button[ion-button][block]</ion-button>
</p>
<p>
<a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
<ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button>
<ion-button block icon-start><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" href="#">a[ion-button][block][outline][secondary]</ion-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" href="#">a[ion-button][block][clear][dark]</ion-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 href="#">a[ion-button][block][round]</ion-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 href="#">a[ion-button][block][round][outline]</ion-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>

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

@ -10,34 +10,34 @@
<ion-content>
<p>
<a ion-button full href="#">a[ion-button][full]</a>
<button ion-button full>button[ion-button][full]</button>
<ion-button full href="#">a[ion-button][full]</ion-button>
<ion-button full>button[ion-button][full]</ion-button>
</p>
<p>
<a ion-button full href="#" icon-start>
<ion-button full href="#" icon-start>
<ion-icon name="help-circle"></ion-icon>
a[ion-button][full] + icon
</a>
<button ion-button full icon-start>
</ion-button>
<ion-button full icon-start>
<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" href="#">a[ion-button][full][outline][secondary]</ion-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" href="#">a[ion-button][full][clear][light]</ion-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" href="#">a[ion-button][full][clear][dark]</ion-button>
<ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
</p>
</ion-content>

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

@ -10,96 +10,96 @@
<ion-content padding>
<div>
<button ion-button icon-start>
<ion-button icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<a ion-button icon-start>
</ion-button>
<ion-button href="#" icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</a>
</ion-button>
</div>
<div>
<button ion-button icon-end>
<ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<a ion-button icon-end>
</ion-button>
<ion-button href="#" icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</a>
</ion-button>
</div>
<div>
<button ion-button icon-only>
<ion-button icon-only>
<ion-icon name="flag"></ion-icon>
</button>
<a ion-button icon-only>
</ion-button>
<ion-button href="#" icon-only>
<ion-icon name="flag"></ion-icon>
</a>
</ion-button>
</div>
<div>
<button ion-button large icon-start>
<ion-button large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</button>
<a ion-button large icon-start>
</ion-button>
<ion-button href="#" large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</a>
</ion-button>
</div>
<div>
<button ion-button large icon-end>
<ion-button large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</button>
<a ion-button large icon-end>
</ion-button>
<ion-button href="#" large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</a>
</ion-button>
</div>
<div>
<button ion-button large icon-only>
<ion-button large icon-only>
<ion-icon name="heart"></ion-icon>
</button>
<a ion-button large icon-only>
</ion-button>
<ion-button href="#" large icon-only>
<ion-icon name="heart"></ion-icon>
</a>
</ion-button>
</div>
<div>
<button ion-button small icon-start>
<ion-button small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</button>
<a ion-button small icon-start>
</ion-button>
<ion-button href="#" small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</a>
</ion-button>
</div>
<div>
<button ion-button small icon-end>
<ion-button small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</button>
<a ion-button small icon-end>
</ion-button>
<ion-button href="#" small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</a>
</ion-button>
</div>
<div>
<button ion-button small icon-only>
<ion-button small icon-only>
<ion-icon name="search"></ion-icon>
</button>
<a ion-button small icon-only>
</ion-button>
<ion-button href="#" small icon-only>
<ion-icon name="search"></ion-icon>
</a>
</ion-button>
</div>
</ion-content>

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

@ -10,43 +10,43 @@
<ion-content padding>
<p>
<a ion-button href="#">a[ion-button]</a>
<button ion-button>button</button>
<ion-button href="#">a[ion-button]</ion-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 href="#">a[ion-button][small]</ion-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 href="#">a[ion-button][outline][small]</ion-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 href="#">a[ion-button][clear][small]</ion-button>
<ion-button clear small>button[ion-button][clear][small]</ion-button>
</p>
<p>
<button ion-button large>[large]</button>
<a ion-button large href="#">
<ion-button large>[large]</ion-button>
<ion-button large href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
<span style="font-size:32px">L</span>
<span style="font-size:24px">L</span>
O</a>
O</ion-button>
</p>
<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 href="#">a[ion-button][outline][large]</ion-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 href="#">a[clear][large]</ion-button>
<ion-button clear large>button[ion-button][clear][large]</ion-button>
</p>
</ion-content>

37
src/components/nav/test/nav-push-pop/main.html
View File

@ -52,35 +52,52 @@
</ion-list>
<p>
<a ion-button
<ion-button
href="#"
[navPush]="pushPage"
[navParams]="{msg:'a (always visible)'}">a (always visible)</a>
[navParams]="{msg:'a (always visible)'}">
a (always visible)
</ion-button>
</p>
<p *ngIf="visible">
<a ion-button
<ion-button
href="#"
[navPush]="pushPage"
[navParams]="{msg:'a (p *ngIf=visible)'}">a (p *ngIf="visible")</a>
[navParams]="{msg:'a (p *ngIf=visible)'}">
a (p *ngIf="visible")
</ion-button>
</p>
<p>
<a ion-button
<ion-button
href="#"
*ngIf="visible"
[navPush]="pushPage"
[navParams]="{msg:'a (a *ngIf=visible)'}">a (a *ngIf="visible")</a>
[navParams]="{msg:'a (a *ngIf=visible)'}">
a (a *ngIf="visible")
</ion-button>
</p>
<p *ngIf="!visible">
<a ion-button color="danger"
<ion-button
href="#"
color="danger"
[navPush]="pushPage"
[navParams]="{msg:'a (p *ngIf=!visible)'}">a (p *ngIf="!visible")</a>
[navParams]="{msg:'a (p *ngIf=!visible)'}">
a (p *ngIf="!visible")
</ion-button>
</p>
<p>
<a ion-button color="danger"
<ion-button
href="#"
color="danger"
*ngIf="!visible"
[navPush]="pushPage"
[navParams]="{msg:'a (a *ngIf=!visible)'}">a (a *ngIf="!visible")</a>
[navParams]="{msg:'a (a *ngIf=!visible)'}">
a (a *ngIf="!visible")
</ion-button>
</p>
<p>

2
src/components/tabs/test/advanced/pages/signin-page/sign-in-page.html
View File

@ -19,7 +19,7 @@
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<a ion-button block [navPush]="tabsPage" class="e2eSignIn">Sign In</a>
<ion-button block [navPush]="tabsPage" class="e2eSignIn">Sign In</ion-button>
</ion-item>
</ion-card>

120
src/components/toolbar/test/scenarios/pages/root-page/root-page.html
View File

@ -10,188 +10,188 @@
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-only>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only color="secondary">
<ion-button icon-only color="secondary">
<ion-icon name="more"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-only>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only color="secondary">
<ion-button icon-only color="secondary">
<ion-icon name="more"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only class="activated">
<ion-button icon-only class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-only class="activated">
</ion-button>
<ion-button icon-only class="activated">
<ion-icon name="search"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only color="secondary" class="activated">
<ion-button icon-only color="secondary" class="activated">
<ion-icon name="more"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only solid>
<ion-button icon-only solid>
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-start solid>
</ion-button>
<ion-button icon-start solid>
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-end solid color="secondary">
<ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<a ion-button icon-only solid class="activated">
<ion-button href="#" icon-only solid class="activated">
<ion-icon name="contact"></ion-icon>
</a>
<button ion-button icon-start solid class="activated">
</ion-button>
<ion-button icon-start solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button ion-button icon-end solid color="secondary" class="activated">
<ion-button icon-end solid color="secondary" class="activated">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only outline>
<ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-start outline>
</ion-button>
<ion-button icon-start outline>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only color="secondary" outline>
<ion-button icon-only color="secondary" outline>
<ion-icon name="contact"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only outline class="activated">
<ion-button icon-only outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-start outline class="activated">
</ion-button>
<ion-button icon-start outline class="activated">
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only color="secondary" outline class="activated">
<ion-button icon-only color="secondary" outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-start>
<ion-button icon-start>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<a ion-button icon-end href="#">
<ion-button href="#" icon-end href="#">
Edit
<ion-icon name="create"></ion-icon>
</a>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button>
<ion-button>
Go Back
</button>
</ion-button>
</ion-buttons>
<ion-buttons end>
<a ion-button href="#">
<ion-button href="#" href="#">
Edit
</a>
</ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<button ion-button menuToggle>
<ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-button>
<ion-buttons start>
<button ion-button icon-only>
<ion-button icon-only>
<ion-icon name="star"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button ion-button icon-only #button1 (click)="buttonClick(button1)">
<ion-button icon-only #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<button ion-button menuToggle right>
<ion-button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
</button>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">