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
Name | Type | Default | Description | Options |
---|---|---|---|---|
fontSize | string | 0.8em | Font size. | px | % | em |
height | string | null | Button group height. | px | % | em |
multiSelect | boolean | false | Enables selection of multiple buttons if set to true. | true | false |
useSelected | boolean | true | Use the control for the button state. | true | false |
tl-button-group-item
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 |
iconAfterText | string | null | Creates an icon after the text button. | ion ion-printer | fas fa-home | any |
iconBeforeText | string | null | Creates an icon before the text button. | ion ion-printer | fas fa-home | any |
selected | boolean | false | The state of button. | true | false |
text | string | null | Displays a text button. | any text |
width | string | 100 (min) | Button width. | px | % | em |
Events
Name | Parameters | Description |
---|---|---|
itemSelect | Array<Object>: ButtonGroupItem : List of ButtonGroupItems Selected | Callback to invoke when a button is clicked |