javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +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> <ion-content padding style="text-align:center" no-bounce>
<p> <p>
<a ion-button>Default</a> <ion-button href="#">Default</ion-button>
<a ion-button class="activated">Default.activated</a> <ion-button href="#" class="activated">Default.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button color="primary">Primary</a> <ion-button href="#" color="primary">Primary</ion-button>
<a ion-button color="primary" class="activated">Primary.activated</a> <ion-button href="#" color="primary" class="activated">Primary.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button color="secondary">Secondary</a> <ion-button href="#" color="secondary">Secondary</ion-button>
<a ion-button color="secondary" class="activated">Secondary.activated</a> <ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button color="danger">Danger</a> <ion-button href="#" color="danger">Danger</ion-button>
<a ion-button color="danger" class="activated">Danger.activated</a> <ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button color="light">Light</a> <ion-button href="#" color="light">Light</ion-button>
<a ion-button color="light" class="activated">Light.activated</a> <ion-button href="#" color="light" class="activated">Light.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button color="dark">Dark</a> <ion-button href="#" color="dark">Dark</ion-button>
<a ion-button color="dark" class="activated">Dark.activated</a> <ion-button href="#" color="dark" class="activated">Dark.activated</ion-button>
</p> </p>
<p> <p>
<a ion-button disabled>A Disabled</a> <ion-button href="#" disabled>A Disabled</ion-button>
<a ion-button color="secondary" disabled>Secondary Disabled</a> <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
</p> </p>
<p> <p>
<a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a> <ion-button href="#" [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
<a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a> <ion-button href="#" outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
</p> </p>
</ion-content> </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"> <ion-content padding style="text-align:center">
<p> <p>
<a ion-button block href="#">a[ion-button][block]</a> <ion-button block href="#">a[ion-button][block]</ion-button>
<button ion-button block>button[ion-button][block]</button> <ion-button block>button[ion-button][block]</ion-button>
</p> </p>
<p> <p>
<a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a> <ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button>
<button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button> <ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
</p> </p>
<p> <p>
<a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a> <ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</ion-button>
<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>
<p> <p>
<a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a> <ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</ion-button>
<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>
<p> <p>
<a ion-button block round href="#">a[ion-button][block][round]</a> <ion-button block round href="#">a[ion-button][block][round]</ion-button>
<button ion-button block round>button[ion-button][block][round]</button> <ion-button block round>button[ion-button][block][round]</ion-button>
</p> </p>
<p> <p>
<a ion-button block round outline href="#">a[ion-button][block][round][outline]</a> <ion-button block round outline href="#">a[ion-button][block][round][outline]</ion-button>
<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>
<p> <p>
<button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button> <ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
</p> </p>
</ion-content> </ion-content>

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

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

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

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

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

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

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

@ -52,35 +52,52 @@
</ion-list> </ion-list>
<p> <p>
<a ion-button <ion-button
href="#"
[navPush]="pushPage" [navPush]="pushPage"
[navParams]="{msg:'a (always visible)'}">a (always visible)</a> [navParams]="{msg:'a (always visible)'}">
a (always visible)
</ion-button>
</p> </p>
<p *ngIf="visible"> <p *ngIf="visible">
<a ion-button <ion-button
href="#"
[navPush]="pushPage" [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>
<p> <p>
<a ion-button <ion-button
href="#"
*ngIf="visible" *ngIf="visible"
[navPush]="pushPage" [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>
<p *ngIf="!visible"> <p *ngIf="!visible">
<a ion-button color="danger" <ion-button
href="#"
color="danger"
[navPush]="pushPage" [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>
<p> <p>
<a ion-button color="danger" <ion-button
href="#"
color="danger"
*ngIf="!visible" *ngIf="!visible"
[navPush]="pushPage" [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>
<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-input type="password"></ion-input>
</ion-item> </ion-item>
<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-item>
</ion-card> </ion-card>

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

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