Foundation - Switch SASS 参考

描述

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

变量

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

混合宏

为了构建此组件的最终 CSS 输出，可以使用以下混合宏。要使用 Foundation 组件构建您自己的类结构，您可以自己使用这些混合宏。

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, $width, $height, $paddle-width, $paddle-offset);

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

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