Foundation - Switch SASS 参考

描述

您可以使用 SASS 参考更改组件的样式。

变量

下表列出了项目设置文件中的 SASS 变量，这些变量可自定义此组件的默认样式。

Mixins

要构建此组件的最终 CSS 输出，可以使用以下 mixin。要使用 Foundation 组件构建自己的类结构，您可以自己使用 mixin。

switch-container

@include switch-container;

它添加了 switch 容器的样式。将其应用于容器类。

switch-input

@include switch-input;

它添加了 switch 输入样式。在开关内，您必须将其应用于 <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, $width, $height, $paddle-width, $paddle-offset);

通过更改主体和桨的大小，switch-size 会改变开关的大小。您必须将其应用于开关的容器。

下表列出了 switch-size 接受的参数。

foundation_basic_controls.html