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

列印頁面