UNPKG

@material/web

Version:
56 lines (38 loc) 1.27 kB
# 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.