@finastra/switch
v1.8.1
Published
Switch Web Component
Downloads
206
Readme
Switch
fds-switch
toggles the state of a single setting on or off.
It extends Material web's mwc-switch-base
Usage
Import
npm i @finastra/switch
import '@finastra/switch';
...
<fds-switch selected></fds-switch>
API
Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|------------------|------------|-----------|---------------------------|------------|--------------------------------------------------|
| ariaLabel
| | | string
| | |
| ariaLabelledBy
| | | string
| | |
| disabled
| disabled
| | boolean
| false | Indicates whether or not the switch is disabled. |
| name
| | | string
| | |
| processing
| | | boolean
| | Indicates whether or not the switch is processing and showing a loadingindicator. A disabled switch cannot be processing. |
| ripple
| | readonly | Promise<Ripple \| null>
| | Implement ripple getter for Ripple integration with mwc-formfield |
| selected
| selected
| | boolean
| false | If true, the switch is on. If false, the switch is off. |
| styles
| | | CSSResult[]
| ["styles"] | |
| value
| | | string
| | |
Methods
| Method | Type |
|---------|------------|
| click
| (): void
|
CSS Custom Properties
| Property | Type | Default | Description |
|-----------------------|-------|-----------|---------------------|
| --fds-primary
| color | "#694ED6" | Switch color |
| --fds-track-opacity
| color | 0.54 | Track color opacity |