开关

使用动画过渡创建纯 CSS3 开/关开关。现在您可以告诉您的用户打开或关闭开关。

基础

将 .switch 类添加到元素以创建开关。在开关内部，添加一个带有 .switch-input 类的 <input type="checkbox">。在其旁边，创建一个带有 .switch-paddle 类的 <label>。

为 <input> 提供唯一的 ID，并使用 for 属性将 <label> 指向它。这使得开关可点击。

开关标签内部是仅限屏幕阅读器读取的文本，它使用 .show-for-sr 类在视觉上屏蔽文本。

检查底层输入的值应该通过评估所述输入的 checked 属性来完成。

确保开关的 HTML 按照您在上面看到的顺序排列 - <input>，然后是 <label>

在视频中观看此部分

<div class="switch">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>

禁用

有时您可能希望将开关固定在一个位置。这可以通过在开关输入上设置 disabled 选项来实现。

<div class="switch">
  <input class="switch-input" disabled checked="checked" id="exampleCheckedDisabledSwitch" type="checkbox" name="exampleCheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleCheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Checked</span>
  </label>
</div>

<div class="switch">
  <input class="switch-input" disabled id="exampleUncheckedDisabledSwitch" type="checkbox" name="exampleUncheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleUncheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Unchecked</span>
  </label>
</div>

单选开关

您还可以使用 <input type="radio"> 而不是 checkbox 来创建一系列选项。

在视频中观看此部分

<div class="switch">
  <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label class="switch-paddle" for="exampleRadioSwitch1">
    <span class="show-for-sr">Bulbasaur</span>
  </label>
</div>

尺寸类

使用 .tiny、.small 或 .large 类来更改开关大小。

在视频中观看此部分

<div class="switch tiny">
  <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="tinySwitch">
    <span class="show-for-sr">Tiny Sandwiches Enabled</span>
  </label>
</div>

<div class="switch small">
  <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="smallSwitch">
    <span class="show-for-sr">Small Portions Only</span>
  </label>
</div>

<div class="switch large">
  <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="largeSwitch">
    <span class="show-for-sr">Show Large Elephants</span>
  </label>
</div>

内部标签

您可以在开关内部放置活动和非活动文本。活动文本 (.switch-active) 仅在开关打开时显示，非活动文本 (.switch-inactive) 仅在开关关闭时显示。

活动/非活动文本位于开关的 <label> 内部。

根据您放置在开关内的单词长度，您可能需要微调文本的 left 或 right CSS 属性以使其正确定位。

在视频中观看此部分

将 aria-hidden="true" 添加到这些标签以防止 AT 读取它们。

<p>Do you like me?</p>
<div class="switch large">
  <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="yes-no">
    <span class="show-for-sr">Do you like me?</span>
    <span class="switch-active" aria-hidden="true">Yes</span>
    <span class="switch-inactive" aria-hidden="true">No</span>
  </label>
</div>

你喜欢我吗？

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$switch-background`	颜色	`$medium-gray`	开关的背景颜色。
`$switch-background-active`	颜色	`$primary-color`	开关的活动背景颜色。
`$switch-height`	数字	`2rem`	开关的高度，未应用任何类。
`$switch-height-tiny`	数字	`1.5rem`	带有 .tiny 类的开关的高度。
`$switch-height-small`	数字	`1.75rem`	带有 .small 类的开关的高度。
`$switch-height-large`	数字	`2.5rem`	带有 .large 类的开关的高度。
`$switch-radius`	数字	`$global-radius`	开关的边框半径
`$switch-margin`	数字	`$global-margin`	模态框周围的边框。
`$switch-paddle-background`	颜色	`$white`	开关容器和滑块的背景颜色。
`$switch-paddle-offset`	数字	`0.25rem`	开关滑块与主体边缘之间的间距。
`$switch-paddle-radius`	数字	`$global-radius`	开关滑块的边框半径
`$switch-paddle-transition`	数字	`all 0.25s ease-out`	开关过渡。
`$switch-opacity-disabled`	数字	`0.5`	禁用开关的不透明度。
`$switch-cursor-disabled`	光标	`not-allowed`	禁用开关的光标。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

switch-container

@include switch-container;

添加开关容器的样式。将其应用于容器类。

switch-input

@include switch-input;

添加开关输入的样式。将其应用于开关内的 <input>。

switch-paddle

@include switch-paddle;

添加开关的背景和滑块的样式。将其应用于开关内的 <label>。

switch-text

@include switch-text;

添加开关内活动/非活动文本的基本样式。将其应用于开关 <label> 内的文本元素。

switch-text-active

@include switch-text-active;

添加开关内活动状态文本的样式。

switch-text-inactive

@include switch-text-inactive;

添加开关内非活动状态文本的样式。

switch-size

@include switch-size($font-size, $switch-height, $paddle-offset);

通过修改主体和滑块的大小来更改开关的大小。将其应用于开关容器。

参数	类型	默认值	描述
`$font-size`	数字	`1rem`	开关内标签文本的字体大小。
`$switch-height`	数字	`2rem`	开关主体的高度。
`$paddle-offset`	数字	`0.25rem`	开关滑块与开关主体边缘之间的间距。