mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
docs(button): add advanced usage with property binding, update description of color
This commit is contained in:
@ -11,6 +11,7 @@ import { isTrueProperty } from '../../util/util';
|
|||||||
* @description
|
* @description
|
||||||
* Buttons are simple components in Ionic. They can consist of text and icons
|
* Buttons are simple components in Ionic. They can consist of text and icons
|
||||||
* and be enhanced by a wide range of attributes.
|
* and be enhanced by a wide range of attributes.
|
||||||
|
*
|
||||||
* @usage
|
* @usage
|
||||||
*
|
*
|
||||||
* ```html
|
* ```html
|
||||||
@ -63,6 +64,48 @@ import { isTrueProperty } from '../../util/util';
|
|||||||
* <button ion-button small>Small</button>
|
* <button ion-button small>Small</button>
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
|
* @advanced
|
||||||
|
*
|
||||||
|
* ```html
|
||||||
|
*
|
||||||
|
* <!-- Bind the color and outline inputs to an expression -->
|
||||||
|
* <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
|
||||||
|
* Danger (Solid)
|
||||||
|
* </button>
|
||||||
|
*
|
||||||
|
* <!-- Bind the color and round inputs to an expression -->
|
||||||
|
* <button ion-button [color]="myColor" [round]="isRound">
|
||||||
|
* Secondary (Round)
|
||||||
|
* </button>
|
||||||
|
*
|
||||||
|
* <!-- Bind the color and clear inputs to an expression -->
|
||||||
|
* <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
|
||||||
|
* Primary (Clear)
|
||||||
|
* </button>
|
||||||
|
*
|
||||||
|
* <!-- Bind the color, outline and round inputs to an expression -->
|
||||||
|
* <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
|
||||||
|
* Dark (Solid + Round)
|
||||||
|
* </button>
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* ```ts
|
||||||
|
* @Component({
|
||||||
|
* templateUrl: 'main.html'
|
||||||
|
* })
|
||||||
|
* class E2EPage {
|
||||||
|
* isDanger: boolean = true;
|
||||||
|
* isSecondary: boolean = false;
|
||||||
|
* isRound: boolean = true;
|
||||||
|
* isOutline: boolean = false;
|
||||||
|
* isClear: boolean = true;
|
||||||
|
* myColor: string = 'secondary';
|
||||||
|
* myColor2: string = 'dark';
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
*
|
||||||
* @demo /docs/v2/demos/src/button/
|
* @demo /docs/v2/demos/src/button/
|
||||||
* @see {@link /docs/v2/components#buttons Button Component Docs}
|
* @see {@link /docs/v2/components#buttons Button Component Docs}
|
||||||
* @see {@link /docs/v2/components#fabs FabButton Docs}
|
* @see {@link /docs/v2/components#fabs FabButton Docs}
|
||||||
@ -201,7 +244,7 @@ export class Button extends Ion {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
|
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
|
||||||
*/
|
*/
|
||||||
@Input()
|
@Input()
|
||||||
set color(val: string) {
|
set color(val: string) {
|
||||||
|
Reference in New Issue
Block a user