Foundation-スイッチSASSリファレンス

説明

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

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

Sr.No.	Name & Description	Type	Default Value
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

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

@include switch-container;

スイッチコンテナのスタイルを追加します。コンテナクラスに適用します。

@include switch-input;

スイッチ入力スタイルを追加します。スイッチ内では、_ <input> _に適用する必要があります。

@include switch-paddle;

スイッチのパドルと背景のスタイルを追加します。スイッチ内では、_ <label> _に適用する必要があります。

@include switch-text;

スイッチ内で、アクティブまたは非アクティブテキストの基本スタイルを追加します。これを_ <label> _内のテキスト要素に適用する必要があります。

@include switch-text-active;

スイッチのアクティブ状態テキストのスタイルを追加します。

@include switch-text-inactive;

スイッチの非アクティブ状態テキストのスタイルを追加します。

@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);

ボディとパドルのサイズを変更することにより、_switch-size_はスイッチのサイズを変更します。これをスイッチのコンテナに適用する必要があります。

次の表に、_switch-size_が受け入れるパラメーターを示します。

Sr.No.	Parameter & Description	Type	Default Value
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