Foundation - 滑块 SASS 参考

描述

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

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

序号	名称及描述	类型	默认值
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 表示滑块手柄的默认高度。	数值	1.4rem
6	$slider-handle-width 表示滑块手柄的默认宽度。	数值	1.4rem
7	$slider-handle-background 表示滑块手柄的默认颜色。	颜色	$primary-color
8	$slider-opacity-disabled 表示禁用滑块的默认淡出量。	数值	0.25
9	$slider-radius 表示滑块的默认圆角。	数值	$global-radius
10	$slider-transition 表示要设置给滑块手柄和填充区域的过渡属性。	过渡	all 0.2s ease-in-out

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

@include slider-container;

添加常规滑块样式。

@include slider-fill;

添加滑块活动填充区域的常规样式。

@include slider-handle;

添加滑块手柄的常规样式。

foundation_basic_controls.htm

打印页面