mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +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:
@ -24,7 +24,7 @@ import { ViewController } from '../nav/view-controller';
|
||||
template: `
|
||||
<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>
|
||||
<div class="picker-opts" #colEle [style.width]="col.optionsWidth">
|
||||
<button *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button" category="picker-opt">
|
||||
<button ion-button="picker-opt" *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button">
|
||||
{{o.text}}
|
||||
</button>
|
||||
</div>
|
||||
@ -355,7 +355,7 @@ export class PickerColumnCmp {
|
||||
<div class="picker-wrapper">
|
||||
<div class="picker-toolbar">
|
||||
<div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
|
||||
<button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
|
||||
<button ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
|
||||
{{b.text}}
|
||||
</button>
|
||||
</div>
|
||||
|
@ -9,19 +9,19 @@
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<button block class="e2eTwoColumns" (click)="twoColumns()">
|
||||
<button ion-button block class="e2eTwoColumns" (click)="twoColumns()">
|
||||
2 Columns
|
||||
</button>
|
||||
|
||||
<button block class="e2ePrefixLabel" (click)="prefixLabel()">
|
||||
<button ion-button block class="e2ePrefixLabel" (click)="prefixLabel()">
|
||||
Prefix Label
|
||||
</button>
|
||||
|
||||
<button block class="e2eSuffixLabel" (click)="suffixLabel()">
|
||||
<button ion-button block class="e2eSuffixLabel" (click)="suffixLabel()">
|
||||
Suffix Label
|
||||
</button>
|
||||
|
||||
<button block class="e2eColumnSizesLabel" (click)="columnSizes()">
|
||||
<button ion-button block class="e2eColumnSizesLabel" (click)="columnSizes()">
|
||||
Columns with sizes
|
||||
</button>
|
||||
|
||||
|
Reference in New Issue
Block a user