SASS参考(SASS Reference)
描述 (Description)
您可以使用SASS参考更改组件的样式。
变量 (Variables)
下表列出了项目设置文件中的SASS变量，该变量使该组件的默认样式得以自定义。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $switch-background 它代表开关的背景颜色。 | Color | $medium-gray |
| 2 | $switch-background-active 它代表开关的背景活动颜色。 | Color | $primary-color |
| 3 | $switch-height 它代表开关的高度，不应用任何类。 | Number | 2rem |
| 4 | $switch-height-tiny 它用.tiny类代表开关的高度。 | Number | 1.5rem |
| 5 | $switch-height-small 它用.small类表示开关的高度。 | Number | 1.75rem |
| 6 | $switch-height-large 它用.large类表示开关的高度。 | Number | 2.5rem |
| 7 | $switch-radius 它代表开关的边界半径。 | Number | $global-radius |
| 8 | $switch-margin 它代表一个模态的边界。 | Number | $global-margin |
| 9 | $switch-paddle-background 它代表开关容器和桨叶的背景颜色。 | Color | $white |
| 10 | $switch-paddle-offset 它表示车身边缘和开关桨之间的间距。 | Number | 0.25rem |
| 11 | $switch-paddle-radius 它代表开关拨片的边界半径。 | Number | $global-radius |
| 12 | $switch-paddle-transition 它代表开关转换。 | Number | all 0.25s ease-out |
Mixins
要构建此组件的最终CSS输出，可以使用以下mixins。 要使用Foundation组件构建自己的类结构，可以自己使用mixins。
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的活动状态文本添加样式。
switch-text-inactive
@include switch-text-inactive;
它为switch的非活动状态文本添加样式。
switch-size
@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);
通过改变主体和桨叶switch-size ， switch-size改变开关的尺寸。 您必须将此应用于交换机的容器。
下表列出了switch-size接受的参数。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $font-size 它表示交换机内部标签的字体大小。 | Number | 1rem |
| 2 | $width 它代表开关体的宽度。 | Number | 4rem |
| 3 | $height 它代表开关体的高度。 | Number | 2rem |
| 4 | $paddle-width 它表示开关板的宽度。 | Number | 1.5rem |
| 5 | $paddle-width 它表示开关主体边缘和开关板之间的间距。 | Number | 0.25rem |
