mirror of https://github.com/material-components/material-web.git synced 2024-09-21 02:27:12 +03:00

History

Maverick Fabroa 7bdf63e92d refactor(switch): reduce code by using `fill: currentColor`		2023-12-01 06:45:10 +08:00
..
_handle.scss	chore(switch): merge hcm styles	2023-10-03 17:30:01 -07:00
_icon.scss	refactor(switch): reduce code by using `fill: currentColor`	2023-12-01 06:45:10 +08:00
_switch.scss	fix(switch): cursor should be pointer except when disabled	2023-10-18 10:54:34 -07:00
_track.scss	chore(switch): merge hcm styles	2023-10-03 17:30:01 -07:00
README.md	fix!: rename "lib" directory to "internal"	2023-07-24 12:02:59 -07:00
switch_test.ts	chore: format files with prettier	2023-10-25 11:59:00 -07:00
switch-styles.scss	fix!: rename "lib" directory to "internal"	2023-07-24 12:02:59 -07:00
switch.ts	feat(switch): add slot icons	2023-12-01 01:06:58 +08:00

README.md

Switch

DOM structure

<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.