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
NameTypeDefaultDescriptionOptions
colorstringbasicChanges the default color of the button. basic | primary | success | information | warning | danger | light | dark
disabledbooleanfalseDisables the button if set to true. true | false
heightstring39SplitButton height. px | % | em
textstringnullDisplays a text button. any text
widthstring125 (min)Button width. px | % | em
tl-split-button-action
NameTypeDefaultDescriptionOptions
disabledbooleanfalseDisables the button if set to true. true | false
iconstringnullCreates an icon before the action text. ion-printer | fa fa-home | any
labelstringnullDisplays an action text. any text
Events

All Angular Supported Events can be used on this component.