src/button/button.directive.ts
A convinence directive for applying styling to a button.
Example:
<button ibmButton>A button</button>
<button ibmButton="secondary">A secondary button</button>See the vanilla carbon docs for more detail.
| selector | [ibmButton] |
Methods |
Inputs |
HostBindings |
ibmButton
|
sets the button type
Type:
Default value: |
|
Defined in src/button/button.directive.ts:27
|
|
size
|
Specify the size of the button
Type:
Default value: |
|
Defined in src/button/button.directive.ts:31
|
|
| class.bx--btn |
class.bx--btn:
|
Default value : true
|
|
Defined in src/button/button.directive.ts:33
|
| class.bx--btn--danger |
class.bx--btn--danger:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:38
|
| class.bx--btn--danger--primary |
class.bx--btn--danger--primary:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:39
|
| class.bx--btn--ghost |
class.bx--btn--ghost:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:37
|
| class.bx--btn--primary |
class.bx--btn--primary:
|
Default value : true
|
|
Defined in src/button/button.directive.ts:34
|
| class.bx--btn--secondary |
class.bx--btn--secondary:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:35
|
| class.bx--btn--sm |
class.bx--btn--sm:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:40
|
| class.bx--btn--tertiary |
class.bx--btn--tertiary:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:36
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/button/button.directive.ts:42
|
|
Returns :
void
|
import {
Directive,
HostBinding,
Input,
OnInit
} from "@angular/core";
/**
* A convinence directive for applying styling to a button.
*
* Example:
*
* ```hmtl
* <button ibmButton>A button</button>
* <button ibmButton="secondary">A secondary button</button>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
*/
@Directive({
selector: "[ibmButton]"
})
export class Button implements OnInit {
/**
* sets the button type
*/
@Input() ibmButton: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary";
/**
* Specify the size of the button
*/
@Input() size: "normal" | "sm" = "normal";
// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
@HostBinding("class.bx--btn") baseClass = true;
@HostBinding("class.bx--btn--primary") primary = true;
@HostBinding("class.bx--btn--secondary") secondary = false;
@HostBinding("class.bx--btn--tertiary") tertiary = false;
@HostBinding("class.bx--btn--ghost") ghost = false;
@HostBinding("class.bx--btn--danger") danger = false;
@HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
@HostBinding("class.bx--btn--sm") smallSize = false;
ngOnInit() {
if (this.size === "sm") {
this.smallSize = true;
}
this.primary = false;
switch (this.ibmButton) {
case "primary": this.primary = true; break;
case "secondary": this.secondary = true; break;
case "tertiary": this.tertiary = true; break;
case "ghost": this.ghost = true; break;
case "danger": this.danger = true; break;
case "danger--primary": this.dangerPrimary = true; break;
default: this.primary = true; break;
}
}
}