5.2.0 • Published 6 months ago
@w0s/input-switch v5.2.0
Implement something like <input type=checkbox switch>
Demo
Examples
<script type="importmap">
{
"imports": {
"@w0s/input-switch": "...",
"@w0s/shadow-append-css": "..."
}
}
</script>
<script type="module">
import InputSwitch from '@w0s/input-switch';
customElements.define('x-input-switch', InputSwitch);
</script>
<label><x-input-switch
name="foo"
value="1"
checked=""
disabled=""
storage-key="foo"
></x-input-switch> switch</label>HTML attributes
Style customization
The following CSS custom properties can be used to customize the style.
| name | deault | Description |
|---|---|---|
--outline-offset | 1px | outline-offset property value of switch control |
--block-size | 1em | Block size of switch control |
--inline-size | 2em | Inline size of switch control |
--animation-duration | 0.5s | Time a transition animation (transition-duration property) |
--track-color-on | #2299ff | Track color when switch is on |
--track-color-off | #cccccc | Track color when switch is off |
--track-color-disabled-on | #666666 | Track color when switch is on disabled |
--track-color-disabled-off | #666666 | Track color when switch is off and disabled |
--thumb-radius | calc(0.5em - 1px) | Radius of slider ball |
--thumb-color | #ffffff | Color of slider ball |
The shadow DOM of the switch looks like this.
<x-input-switch class="my-switch">
#shadow-root (open)
<div part="track"></div>
<div part="thumb"></div>
</x-input-switch>Therefore, the ::part CSS pseudo-element may be used to customize the style as desired.
.my-switch {
--outline-offset: ...;
--block-size: ...;
...
&::part(track) {
...
}
&::part(thumb) {
...
}
}However, customizations other than CSS custom properties may be broken in future version updates.