mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 02:27:12 +03:00
c8341bbaee
PiperOrigin-RevId: 494890466 |
||
---|---|---|
.. | ||
_handle.scss | ||
_icon.scss | ||
_switch.scss | ||
_track.scss | ||
README.md | ||
switch_test.ts | ||
switch-styles.scss | ||
switch.ts |
Switch
DOM structure
<button class="md3-switch">
<div class="md3-switch__track">
::before
<div class="md3-switch__handle">
::before
<div class="md3-switch__icons">
</div>
</div>
</div>
<input type="checkbox" aria-hidden="true">
</button>
.md3-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.
.md3-switch__track
This is the track. It contains the track selected styles.
.md3-switch__track::before
This element contains the track unselected styles. Its opacity is set to 0 when the switch is selected.
.md3-switch__handle
This is the handle. It contains the styles of selected styles.
.md3-switch__handle::before
This element contains the handle unselected styles. Its opacity is set to 0 when the switch is selected.
Animations
- opacity on .md3-switch__track::before
- Why? setting opacity will change between selected and unselected track
- opacity on .md3-switch__handle::before
- Why? setting opacity will change between selected and unselected handle
- transform (scale) on .md3-switch__handle
- Why? This animates the growing & shrinking of the handle.
- margin-inline-start & margin-inline-end on .md3-switch__handle
- Why? This animates the position of the handle.