A switch allows users to toggle the state of a single setting.
import { DaffSwitchComponent } from '@daffodil/design/switch'
The switch component provides a way to toggle between two settings.
<daff-switch>Label</daff-switch>
@Component()
class DaffSwitchComponent extends DaffSizableDirective<DaffSwitchSize> {
@Input() size: T
@Input() @HostBinding() disabled: boolean = false
@Input() labelPosition: DaffSwitchLabelPosition = DaffSwitchLabelPositionEnum.LEFT
@Input() disabled: any
@Input() checked: boolean = false
@Input() id: string = 'daff-switch-' + switchIncrementalId++
@Output() toggled: EventEmitter<boolean> = new EventEmitter<boolean>()
}
T| Default | – |
|---|---|
| Description | The size of the component. Options are: |
boolean| Default | false |
|---|---|
| Description |
DaffSwitchLabelPosition| Default | DaffSwitchLabelPositionEnum.LEFT |
|---|---|
| Description | The position of the label relative to the switch. |
any| Default | – |
|---|---|
| Description | Whether the switch is disabled. |
boolean| Default | false |
|---|---|
| Description | Current state of switch (on/off). |
string| Default | 'daff-switch-' + switchIncrementalId++ |
|---|---|
| Description | The unique id of the switch. Defaults to an autogenerated value. When using this, it's your responsibility to ensure that the id for each switch is unique. It gets assigned to the |
EventEmitter| Default | – |
|---|---|
| Description | Output event triggered when the switch has been toggled. |