@finastra/switch
v1.8.1
Published
Switch Web Component
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/switchimport '@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 |