Foundation-Slider SASSリファレンス

説明

SASSリファレンスを使用して、コンポーネントのスタイルを変更できます。

次の表に、このコンポーネントのデフォルトスタイルをカスタマイズできるようにするプロジェクトの設定ファイル内のSASS変数を示します。

Sr.No.	Name & Description	Type	Default Value
1	$slider-height スライダーのデフォルトの高さを表します。	Number	0.5rem
2	$slider-width-vertical これは、スライダーのデフォルトの垂直スライダーの幅を表します。	Number	$slider-height
3	$slider-background スライダーのトラックのデフォルトの背景色を表します。	Color	$light-gray
4	$slider-fill-background これは、スライダーのアクティブな塗りつぶし色のデフォルト色を表します。	Color	$medium-gray
5	$slider-handle-height スライダーハンドルのデフォルトの高さを表します。	Number	1.4rem
6	$slider-handle-width スライダーハンドルのデフォルトの幅を表します。	Number	1.4rem
7	$slider-handle-background スライダーハンドルのデフォルトの色を表します。	Color	$primary-color
8	$slider-opacity-disabled 無効なスライダーのデフォルトのフェード量を表します。	Number	0.25
9	$slider-radius スライダーのデフォルトの半径を表します。	Number	$global-radius
10	$slider-transition スライダーのハンドルと塗りつぶしに設定する遷移プロパティを表します。	Transition	all 0.2s ease-in-out

このコンポーネントの最終的なCSS出力を構築するには、次のミックスインを使用できます。 Foundationコンポーネントを使用して独自のクラス構造を構築するには、mixinを自分で使用できます。

@include slider-container;

一般的なスライダースタイルを追加します。

@include slider-fill;

スライダーのアクティブな塗りの一般的なスタイルを追加します。

@include slider-handle;

スライダーのハンドルに一般的なスタイルを追加します。