refactor(button): add ion-button attribute and icon attributes to style buttons

BREAKING CHANGES:

- `<button>` becomes `<button ion-button>`
- `<a button>` becomes `<a ion-button>`
- `<button ion-item>` does not get the `ion-button` attribute
- Buttons inside of `<ion-item-options>` do get the `ion-button`
attribute
- Removed the `category` attribute, this should be passed in
`ion-button` instead.
- Button attributes added for icons in buttons: `icon-only`,
`icon-left`, and `icon-right`

closes #7466
This commit is contained in:
Brandy Carney
2016-08-16 17:11:02 -04:00
parent 90929d0ef9
commit 938864e8d0
179 changed files with 1393 additions and 1081 deletions

View File

@ -1,23 +1,23 @@
<ion-slides #mySlider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()" (ionDrag)="onSlideMove($event)" class="my-slides">
<ion-slide padding>
<h1>Slide 1</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button block (click)="getLength()">Get Slide Length</button>
<button block (click)="getIndex()">Get Index</button>
<button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
<button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
<button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button ion-button block (click)="getLength()">Get Slide Length</button>
<button ion-button block (click)="getIndex()">Get Index</button>
</ion-slide>
<ion-slide padding>
<h1>Slide 2</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button block (click)="getIndex()">Get Index</button>
<button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
<button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
<button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button ion-button block (click)="getIndex()">Get Index</button>
</ion-slide>
<ion-slide padding>
<h1>Slide 3</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="getIndex()">Get Index</button>
<button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
<button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
<button ion-button block (click)="getIndex()">Get Index</button>
</ion-slide>
</ion-slides>

View File

@ -2,7 +2,7 @@
<ion-navbar>
<ion-buttons end>
<button (click)="skip()">
<button ion-button (click)="skip()">
{{continueText}}
</button>
</ion-buttons>
@ -35,7 +35,7 @@
<li>There is no step 3</li>
</ol>
</div>
<button (click)="toggleLastSlide()">Toggle Last Slide</button>
<button ion-button (click)="toggleLastSlide()">Toggle Last Slide</button>
</ion-slide>
<ion-slide *ngIf="showSlide">
<h3>Any questions?</h3>