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:31
|
|
size
|
Specify the size of the button
Type :
Default value : |
|
Defined in src/button/button.directive.ts:35
|
|
skeleton
|
Default value : |
|
Defined in src/button/button.directive.ts:55
|
|
| class.bx--btn |
class.bx--btn:
|
|
Defined in src/button/button.directive.ts:37
|
| class.bx--btn--danger |
class.bx--btn--danger:
|
|
Defined in src/button/button.directive.ts:52
|
| class.bx--btn--field |
class.bx--btn--field:
|
|
Defined in src/button/button.directive.ts:59
|
| class.bx--btn--ghost |
class.bx--btn--ghost:
|
|
Defined in src/button/button.directive.ts:49
|
| class.bx--btn--primary |
class.bx--btn--primary:
|
|
Defined in src/button/button.directive.ts:40
|
| class.bx--btn--secondary |
class.bx--btn--secondary:
|
|
Defined in src/button/button.directive.ts:43
|
| class.bx--btn--sm |
class.bx--btn--sm:
|
|
Defined in src/button/button.directive.ts:56
|
| class.bx--btn--tertiary |
class.bx--btn--tertiary:
|
|
Defined in src/button/button.directive.ts:46
|
| class.bx--overflow-menu |
class.bx--overflow-menu:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:63
|
| class.bx--toolbar-action |
class.bx--toolbar-action:
|
Default value : false
|
|
Defined in src/button/button.directive.ts:62
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/button/button.directive.ts:65
|
|
Returns :
void
|
import {
Directive,
HostBinding,
Input,
OnInit
} from "@angular/core";
/**
* A convinence directive for applying styling to a button.
*
* [See demo](../../?path=/story/button--basic)
*
* Example:
*
* ```html
* <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.
*
* <example-url>../../iframe.html?id=button--basic</example-url>
*/
@Directive({
selector: "[ibmButton]"
})
export class Button implements OnInit {
/**
* sets the button type
*/
@Input() ibmButton: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" | "toolbar-action" = "primary";
/**
* Specify the size of the button
*/
@Input() size: "normal" | "sm" | "field" = "normal";
// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
@HostBinding("class.bx--btn") get baseClass() {
return !this.toolbarAction;
}
@HostBinding("class.bx--btn--primary") get primaryButton() {
return this.ibmButton === "primary";
}
@HostBinding("class.bx--btn--secondary") get secondaryButton() {
return this.ibmButton === "secondary";
}
@HostBinding("class.bx--btn--tertiary") get tertiaryButton() {
return this.ibmButton === "tertiary";
}
@HostBinding("class.bx--btn--ghost") get ghostButton() {
return this.ibmButton === "ghost";
}
@HostBinding("class.bx--btn--danger") get dangerButton() {
return this.ibmButton === "danger" || this.ibmButton === "danger--primary";
}
@HostBinding("class.bx--skeleton") @Input() skeleton = false;
@HostBinding("class.bx--btn--sm") get smallSize() {
return this.size === "sm";
}
@HostBinding("class.bx--btn--field") get fieldSize() {
return this.size === "field";
}
@HostBinding("class.bx--toolbar-action") toolbarAction = false;
@HostBinding("class.bx--overflow-menu") overflowMenu = false;
ngOnInit() {
if (!this.ibmButton) {
this.ibmButton = "primary";
}
}
}