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

use roles for button icons

Browse Source
This commit is contained in:
Adam Bradley
2015-12-06 21:46:13 -06:00
parent 3d3eae1e4f
commit c6626e0af8
6 changed files with 242 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ionic/components/button/button-icon.scss
View File

@@ -4,41 +4,30 @@
// --------------------------------------------------
button,
[button] {
.button-icon-left icon {
margin-left: -0.3em;
padding-right: 0.3em;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.button-icon-right icon {
margin-right: -0.2em;
padding-left: 0.4em;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.button-icon-only {
padding: 0;
min-width: 0.9em;
icon {
font-size: 1.4em;
background: none;
border: none;
pointer-events: none;
padding: 0 0.5em;
font-size: 1.8em;
line-height: 0.67;
pointer-events: none;
}
&.icon-left icon {
margin-left: -0.3em;
padding-right: 0.3em;
}
&.icon-right icon {
margin-right: -0.2em;
padding-left: 0.4em;
}
&.icon-only {
padding: 0;
min-width: 0.9em;
icon {
padding: 0 0.5em;
font-size: 1.8em;
}
}
&[small] icon {
margin-left: 0;
margin-right: 0;
font-size: 1.4em;
}
}

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

@@ -35,11 +35,12 @@ export class Button {
private elementRef: ElementRef,
private renderer: Renderer
) {
this._role = 'button'; // bar-button
this._size = null; // large
this._style = null; // outline
this._display = null; // block
this._colors = []; // primary
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
this._style = null; // outline/clear
this._display = null; // block/full
this._colors = []; // primary/secondary
this._icon = null; // left/right/only
let element = elementRef.nativeElement;
@@ -54,7 +55,18 @@ export class Button {
}
this._readAttrs(element);
this._readIcon(element);
}
afterContentInit() {
this._assignCss(true);
}
setRole(val) {
this._role = val;
}
_readIcon(element) {
// figure out if and where the icon lives in the button
let childNodes = element.childNodes;
let childNode;
@@ -82,23 +94,14 @@ export class Button {
if (nodes.length > 1) {
if (nodes[0] === ICON && nodes[1] === TEXT) {
renderer.setElementClass(elementRef, 'icon-left', true);
this._icon = 'icon-left';
} else if (nodes[0] === TEXT && nodes[1] === ICON) {
renderer.setElementClass(elementRef, 'icon-right', true);
this._icon = 'icon-right';
}
} else if (nodes.length === 1 && nodes[0] === ICON) {
renderer.setElementClass(elementRef, 'icon-only', true);
this._icon = 'icon-only';
}
}
afterContentInit() {
this._assignCss(true);
}
setRole(val) {
this._role = val;
}
_readAttrs(element) {
@@ -125,17 +128,22 @@ export class Button {
}
_assignCss(assignCssClass) {
let setElementClass = this.renderer.setElementClass;
let elementRef = this.elementRef;
let role = this._role;
if (role) {
setElementClass(elementRef, role, assignCssClass); // button
if (this._style) setElementClass(elementRef, role + '-' + this._style, assignCssClass); // button-clear
if (this._display) setElementClass(elementRef, role + '-' + this._display, assignCssClass); // button-full
if (this._size) setElementClass(elementRef, role + '-' + this._size, assignCssClass); // button-small
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
this._colors.forEach(color => {
setElementClass(elementRef, role + '-' + color, assignCssClass); // button-secondary
});
this._setClass(color, assignCssClass); // button-secondary
});
}
}
_setClass(type, assignCssClass) {
if (type) {
this.renderer.setElementClass(this.elementRef, this._role + '-' + type, assignCssClass);
}
}
@@ -149,7 +157,7 @@ export class Button {
}
const BUTTON_SIZE_ATTRS = ['large', 'small'];
const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab'];
const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
const IGNORE_ATTRS = /_ng/;