@material/web
Version:
Material web components
56 lines (38 loc) • 1.27 kB
Markdown
# Switch
## DOM structure
```html
<button class="switch">
<div class="track">
::before
<div class="handle">
::before
<div class="icons">
</div>
</div>
</div>
<input type="checkbox" aria-hidden="true">
</button>
```
### .switch
This is the outermost button. It holds the track and the input checkbox.
NOTE: This is intentionally left without a border to make the focus-ring simpler
to apply.
### .track
This is the track. It contains the track selected styles.
### .track::before
This element contains the track unselected styles. Its opacity is set to 0
when the switch is selected.
### .handle
This is the handle. It contains the styles of selected styles.
### .handle::before
This element contains the handle unselected styles. Its opacity is set to 0
when the switch is selected.
## Animations
* opacity on .track::before
* Why? setting opacity will change between selected and unselected track
* opacity on .handle::before
* Why? setting opacity will change between selected and unselected handle
* transform (scale) on .handle
* Why? This animates the growing & shrinking of the handle.
* margin-inline-start & margin-inline-end on .handle
* Why? This animates the position of the handle.