mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
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:
@ -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>
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user