@maggioli-design-system/mds-input-switch
v2.0.2
Published
mds-input-switch is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Downloads
556
Readme
mds-input-switch
This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Properties
| Property | Attribute | Description | Type | Default |
| --------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ----------- |
| autofocus
| autofocus
| Sets or returns whether a checkbox should automatically get focus when the page loads | boolean
| undefined
|
| checked
| checked
| Specifies that an element should be pre-selected when the page loads (for type="checkbox" or type="radio") | boolean \| undefined
| undefined
|
| disabled
| disabled
| Sets or returns whether a checkbox is disabled, or not | boolean \| undefined
| undefined
|
| explicit
| explicit
| Sets if the type switch mode shows explicit icons | boolean \| undefined
| undefined
|
| icon
| icon
| The checked icon displayed | string
| ''
|
| indeterminate
| indeterminate
| Sets or returns the indeterminate state of the checkbox | boolean
| false
|
| name
| name
| Specifies the name of an element | string
| ''
|
| size
| size
| Specifies the size for the switch toggle, it works only if attribute 'type' is set to 'switch' | "lg" \| "md" \| "sm"
| 'md'
|
| type
| type
| Specifies switch type: switch (default), checkbox and radio | "checkbox" \| "radio" \| "switch"
| 'switch'
|
| typography
| typography
| Specifies the font typography of the element | "caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip" \| undefined
| 'detail'
|
| value
| value
| Specifies the value of the input element | string \| undefined
| ''
|
| variant
| variant
| Specifies the variant for typography
| "code" \| "info" \| "read" \| "title" \| undefined
| undefined
|
Events
| Event | Description | Type |
| ---------------------- | ---------------------------- | ---------------------------------------- |
| mdsInputSwitchChange
| Emits when the value changes | CustomEvent<MdsInputSwitchEventDetail>
|
Methods
updateLang() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
| ----------- | -------------------------------- |
| "default"
| Put text string or elements here |
CSS Custom Properties
| Name | Description |
| ------------------------------------------------------ | ---------------------------------------------------------------------------- |
| --mds-input-switch-animation-timing-adjust
| Set the size multiplier when the switch toggle is resizing by animation |
| --mds-input-switch-animation-timing-function
| Set the timing function of the animation |
| --mds-input-switch-box-color-checked
| Set the color of the switch when the switch is checked |
| --mds-input-switch-box-color-disabled-checked
| Set the color of the switch when the switch is disabled and checked |
| --mds-input-switch-box-color-disabled-unchecked
| Set the color of the switch when the switch is disabled and unchecked |
| --mds-input-switch-box-color-unchecked
| Set the color of the switch when the switch is unchecked |
| --mds-input-switch-box-padding-lg
| Set the padding of the switch toggle's container |
| --mds-input-switch-box-padding-md
| Set the padding of the switch toggle's container |
| --mds-input-switch-box-padding-sm
| Set the padding of the switch toggle's container |
| --mds-input-switch-duration
| Set the duration of the animation |
| --mds-input-switch-icon-color-checked
| Set the color of the icon when the switch is checked |
| --mds-input-switch-icon-color-checked-disabled
| Set the color of the icon when the switch is disabled and checked |
| --mds-input-switch-icon-color-indeterminate
| Set the color of the icon when the switch is indeterminate |
| --mds-input-switch-icon-color-indeterminate-disabled
| Set the color of the icon when the switch is disabled and indeterminate |
| --mds-input-switch-icon-color-unchecked
| Set the color of the icon when the switch is unchecked |
| --mds-input-switch-icon-color-unchecked-disabled
| Set the color of the icon when the switch is disabled and unchecked |
| --mds-input-switch-toggle-color-checked
| Set the color of the switch toggle when the switch is checked |
| --mds-input-switch-toggle-color-disabled-checked
| Set the color of the switch toggle when the switch is disabled and checked |
| --mds-input-switch-toggle-color-disabled-unchecked
| Set the color of the switch toggle when the switch is disabled and unchecked |
| --mds-input-switch-toggle-color-unchecked
| Set the color of the switch toggle when the switch is unchecked |
| --mds-input-switch-toggle-size-lg
| Sets the size of the switch toggle |
| --mds-input-switch-toggle-size-md
| Sets the size of the switch toggle |
| --mds-input-switch-toggle-size-sm
| Sets the size of the switch toggle |
Dependencies
Used by
Depends on
Graph
graph TD;
mds-input-switch --> mds-icon
mds-input-switch --> mds-text
mds-table-header --> mds-input-switch
mds-table-row --> mds-input-switch
style mds-input-switch fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department