Switch Module Name: SwitchModule
Module Name: SwitchModule
The Switch component allow's user to execute an action immediately.
Showcase
Basic
<tl-switch [label]="'Option 1'"></tl-switch>
<tl-switch [label]="'Option 2'"></tl-switch>
<tl-switch [label]="'Option 3'"></tl-switch>
Pre Selected Value
<tl-switch [label]="'Option 1'"></tl-switch>
<tl-switch [checked]="true" [label]="'Option 2'"></tl-switch>
<tl-switch [label]="'Option 3'"></tl-switch>
Custom Color Checkbox
<tl-switch [label]="'Option 1'" [color]="'primary'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 2'" [color]="'warning'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 3'" [color]="'danger'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 4'" [color]="'success'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 5'" [color]="'information'" [checked]="true"></tl-switch>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
checked | boolean | false | Define initialization of switch ( checked or not ). | true | false |
color | string | basic | Changes the default color of the button. | basic | primary | success | information | warning | danger | light | dark |
label | string | null | The text which will display front of switch. | any text |
labelSize | string | 100px | Width of label text. | px | % | em |
Events
All Angular Supported Events can be used on this component.
Name | Parameters | Description |
---|---|---|
focus | $event : Native event | Dispatched when the switch receive focus. |
toogle | boolean : Boolean value | Dispatched when the switch is checked. |