javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(button): add advanced usage with property binding, update description of color

Browse Source
This commit is contained in:
Brandy Carney
2016-10-21 18:27:07 -04:00
parent a49bdf0c8b
commit 5f3aedc0f7
1 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/button/button.ts
View File

@ -11,6 +11,7 @@ import { isTrueProperty } from '../../util/util';
* @description
* Buttons are simple components in Ionic. They can consist of text and icons
* and be enhanced by a wide range of attributes.
*
* @usage
*
* ```html
@ -63,6 +64,48 @@ import { isTrueProperty } from '../../util/util';
* <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/
* @see {@link /docs/v2/components#buttons Button Component 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()
set color(val: string) {