@dev.mohe/mwc-switch v0.19.3
<mwc-switch> 
IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Material Design Guidelines: Switch
Installation
npm install @dev.mohe/mwc-switchNOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.
Example Usage
Standard
<mwc-switch></mwc-switch>Checked by default
<mwc-switch checked></mwc-switch>Disabled
<mwc-switch disabled></mwc-switch>
<mwc-switch checked disabled></mwc-switch>Styled
<style>
mwc-switch {
--mdc-theme-surface: blue;
--mdc-theme-on-surface: blue;
--mdc-theme-secondary: red;
}
</style>
<mwc-switch></mwc-switch>
<mwc-switch checked></mwc-switch>With Form Field
Most applications should use
<mwc-formfield>
to associate an interactive label with the switch.
<mwc-formfield label="Airplane mode">
<mwc-switch checked></mwc-switch>
</mwc-formfield>
<script type="module">
import '@dev.mohe/mwc-switch';
import '@dev.mohe/mwc-formfield';
</script>API
Slots
None
Properties/Attributes
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether or not the switch should be checked / activated. |
disabled | boolean | false | Disables the input and sets the disabled styles. |
Methods
None
Events
| Event Name | Target | Detail | Description |
|---|---|---|---|
change | mwc-switch | {} | Fired when the user modifies the switch checked state from an input device interaction. Note that, like native <input>, the change event is not fired when the checked property is set from JavaScript. |
CSS Custom Properties
Inherits styles from ripple
Global Custom Properties
This component exposes the following global theming custom properties.
| Name | Description |
|---|---|
--mdc-theme-surface | Fill color of the thumb head when unchecked. |
--mdc-theme-on-surface | 38% fill color of the track when unchecked. |
--mdc-theme-secondary | Fill color of the thumb head and 38% fill color of the track when checked. |
Additional references
4 years ago