mirror of https://github.com/material-components/material-web.git synced 2024-09-20 18:17:15 +03:00

History

Elizabeth Mitchell 6c2aef6901 chore(all): add keep-sorted comments to Sass imports PiperOrigin-RevId: 509583504		2023-02-14 11:10:23 -08:00
..
_handle.scss	chore(all): add keep-sorted comments to Sass imports	2023-02-14 11:10:23 -08:00
_icon.scss	chore(all): add keep-sorted comments to Sass imports	2023-02-14 11:10:23 -08:00
_switch.scss	chore(all): add keep-sorted comments to Sass imports	2023-02-14 11:10:23 -08:00
_track.scss	chore(all): add keep-sorted comments to Sass imports	2023-02-14 11:10:23 -08:00
README.md	chore: update repository for Material 3	2022-06-17 16:42:04 +00:00
switch_test.ts	feat(switch): Switch now supports label activation by setting formAssociated.	2022-12-16 17:06:39 -08:00
switch-styles.scss	chore(all): add keep-sorted comments to Sass imports	2023-02-14 11:10:23 -08:00
switch.ts	fix(forms): fix form association for switch, checkbox, and radio, including label activation	2023-02-03 15:08:23 -08:00

README.md

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.