SplitButton Module Name: SplitButtonModule
Module Name: SplitButtonModule
SplitButton is a button with a list of actions. See below.
Showcase
Basic
<tl-split-button [text]="'Button'" (click)="onButtonClick($event)">
<tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
</tl-split-button>
With Action Icons
<tl-split-button [text]="'Button'">
<tl-split-button-action [label]="'Action 1'" [icon]="'fas fa-sync-alt'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 3'" [icon]="'fas fa-chart-line'"></tl-split-button-action>
</tl-split-button>
Disabled
<tl-split-button [disabled]="true" [text]="'Button'">
<tl-split-button-action [disabled]="true" [label]="'Action 1'"></tl-split-button-action>
<tl-split-button-action [disabled]="true" [label]="'Action 2'"></tl-split-button-action>
<tl-split-button-action [disabled]="true" [label]="'Action 3'"></tl-split-button-action>
</tl-split-button>
With Click Event
<tl-split-button [text]="'Button'" (click)="callBackDemo($event)">
<tl-split-button-action [label]="'Action 1'" (click)="callBackDemo($event)"></tl-split-button-action>
<tl-split-button-action [label]="'Action 2'" (click)="callBackDemo($event)"></tl-split-button-action>
<tl-split-button-action [label]="'Action 3'" (click)="callBackDemo($event)"></tl-split-button-action>
</tl-split-button>
Color
<tl-split-button [text]="'Button'" [color]="'primary'">
<tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
<tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
</tl-split-button>
Properties
tl-split-button
Name | Type | Default | Description | Options |
---|---|---|---|---|
color | string | basic | Changes the default color of the button. | basic | primary | success | information | warning | danger | light | dark |
disabled | boolean | false | Disables the button if set to true. | true | false |
height | string | 39 | SplitButton height. | px | % | em |
text | string | null | Displays a text button. | any text |
width | string | 125 (min) | Button width. | px | % | em |
tl-split-button-action
Name | Type | Default | Description | Options |
---|---|---|---|---|
disabled | boolean | false | Disables the button if set to true. | true | false |
icon | string | null | Creates an icon before the action text. | ion-printer | fa fa-home | any |
label | string | null | Displays an action text. | any text |
Events