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

Allows setting the color and style button attributes at once.

Browse Source
This commit is contained in:
Ignat Ignatov
2016-04-17 14:02:22 +02:00
parent d2b3cc39a5
commit c5c5e49003
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ionic/components/button/button.ts
View File

@ -27,7 +27,7 @@ import {isTrueProperty} from '../../util/util';
* @property [fab-center] - Position a fab button towards the center. * @property [fab-center] - Position a fab button towards the center.
* @property [fab-top] - Position a fab button towards the top. * @property [fab-top] - Position a fab button towards the top.
* @property [fab-bottom] - Position a fab button towards the bottom. * @property [fab-bottom] - Position a fab button towards the bottom.
* @property [color] - Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
* *
* @demo /docs/v2/demos/button/ * @demo /docs/v2/demos/button/
* @see {@link /docs/v2/components#buttons Button Component Docs} * @see {@link /docs/v2/components#buttons Button Component Docs}
@ -135,20 +135,26 @@ export class Button {
if (isTrueProperty(attrValue)) { if (isTrueProperty(attrValue)) {
this[type] = attrName; this[type] = attrName;
this._setClass(attrName, true); this._setClass(attrName, true);
} else { } else {
this[type] = null; // Special handling for '_style' which defaults to 'default'.
this[type] = (type === '_style' ? 'default' : null);
}
if (type === '_style') {
this._setColor(attrName, isTrueProperty(attrValue));
} }
} }
/** /**
* @input {string} Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). * @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string|string[]) {
this._assignCss(false); // Clear the colors for all styles including the default one.
this._colors = [val]; this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false);
this._assignCss(true); // Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc).
this._colors = (val instanceof Array ? val : [val]);
// Set the colors for the currently effective style.
this._setColor(this._style, true);
} }
constructor( constructor(
@ -289,11 +295,7 @@ export class Button {
this._setClass(this._display, assignCssClass); // button-full this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left this._setClass(this._icon, assignCssClass); // button-icon-left
this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary
let colorStyle = (this._style !== 'default' ? this._style + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});
} }
} }
@ -306,6 +308,22 @@ export class Button {
} }
} }
/**
* @private
*/
private _setColor(type: string|string[], assignCssClass: boolean) {
if (type && this._init) {
// Support array to allow removal of many styles at once.
let styles = (type instanceof Array ? type : [type]);
styles.forEach(styleName => {
let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});
});
}
}
/** /**
* @private * @private
*/ */