Foundation - Slider SASS 参考

描述

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

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

Sr.No.	名称 &描述	类型	默认值
1	$slider-height 表示滑块的默认高度。	数字	0.5rem
2	$slider-width-vertical 表示滑块的垂直默认宽度。	数字	$slider-height
3	$slider-background 表示滑块轨道默认背景颜色。	颜色	$light-gray
4	$slider-fill-background 表示滑块活动填充颜色的默认颜色。	颜色	$medium-gray
5	$slider-handle-height 它表示滑块手柄的默认高度。	Number	1.4rem
6	$slider-handle-width 它表示滑块手柄的默认宽度。	Number	1.4rem
7	$slider-handle-background 它表示滑块手柄的默认颜色。	颜色	$primary-color
8	$slider-opacity-disabled 它表示禁用滑块的默认淡入量。	数字	0.25
9	$slider-radius 它表示滑块的默认半径。	数字	$global-radius
10	$slider-transition 它表示要设置为滑块手柄和填充的过渡属性。	Transition	all 0.2s ease-in-out

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

@include slider-container;

它添加了一般滑块样式。

@include slider-fill;

它添加了滑块活动填充的一般样式。

@include slider-handle;

它添加了滑块手柄的一般样式。