Button Group Module Name: ButtonGroupModule

Module Name: ButtonGroupModule

The ButtonGroup is a group of buttons that can be toggled.

Showcase
Basic
<tl-button-group>
  <tl-button-group-item [text]="'Button 1'" [iconBeforeText]="'fa fa-home'"></tl-button-group-item>
  <tl-button-group-item [text]="'Button 2'"></tl-button-group-item>
  <tl-button-group-item [text]="'Button 3'"></tl-button-group-item>
</tl-button-group>
Multiselect
<tl-button-group>
  <tl-button-group-item [text]="'Button 1'"></tl-button-group-item>
  <tl-button-group-item [text]="'Button 2'"></tl-button-group-item>
  <tl-button-group-item [text]="'Button 3'"></tl-button-group-item>
</tl-button-group>
Basic With Preselection
<tl-button-group>
  <tl-button-group-item [text]="'Button 1'" [iconAfterText]="'ion-home'"></tl-button-group-item>
  <tl-button-group-item [selected]="true" [text]="'Button 2'"></tl-button-group-item>
  <tl-button-group-item [text]="'Button 3'"></tl-button-group-item>
</tl-button-group>
Multiselect With Preselection
<tl-button-group [multiSelect]="true">
  <tl-button-group-item [text]="'Button 1'"></tl-button-group-item>
  <tl-button-group-item [selected]="true" [text]="'Button 2'"></tl-button-group-item>
  <tl-button-group-item [selected]="true" [text]="'Button 3'"></tl-button-group-item>
</tl-button-group>
Color
<tl-button-group [useSelected]="false" (itemSelect)="showItemSelected($event)">
  <tl-button-group-item [text]="'Basic'" [color]="'basic'"></tl-button-group-item>
  <tl-button-group-item [text]="'Primary'" [color]="'primary'"></tl-button-group-item>
  <tl-button-group-item [text]="'Success'" [color]="'success'"></tl-button-group-item>
  <tl-button-group-item [text]="'Danger'" [color]="'danger'"></tl-button-group-item>
  <tl-button-group-item [text]="'Warning'" [color]="'warning'"></tl-button-group-item>
  <tl-button-group-item [text]="'Information'" [color]="'information'"></tl-button-group-item>
</tl-button-group>
Properties
tl-button-group
NameTypeDefaultDescriptionOptions
fontSizestring0.8emFont size. px | % | em
heightstringnullButton group height. px | % | em
multiSelectbooleanfalseEnables selection of multiple buttons if set to true. true | false
useSelectedbooleantrueUse the control for the button state. true | false
tl-button-group-item
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
iconAfterTextstringnullCreates an icon after the text button. ion ion-printer | fas fa-home | any
iconBeforeTextstringnullCreates an icon before the text button. ion ion-printer | fas fa-home | any
selectedbooleanfalseThe state of button. true | false
textstringnullDisplays a text button. any text
widthstring100 (min)Button width. px | % | em
Events
NameParametersDescription
itemSelect
Array<Object>: ButtonGroupItem : List of ButtonGroupItems Selected
Callback to invoke when a button is clicked