Foundation-button-group-sass-reference

Foundation-ボタングループSASSリファレンス

説明

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

変数

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

Sr.No.	Name & Description	Type	Default Value
1	$buttongroup-margin ボタングループのマージンを表します。	Number	1rem
2	$buttongroup-spacing ボタングループ内のすべてのボタン間のマージンを表します。	Border	1px
3	$buttongroup-child-selector ボタングループ内のボタンのセレクターを表します。	String	'.button'
4	$buttongroup-expand-max 偶数幅のボタングループに含めることができる最大のボタンを表します。	Number	6

ミックスイン

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

ボタングループ

@include button-group($child-selector);

ボタングループのコンテナーのスタイルを追加します。 次の表に、この目的で使用されるパラメーターを示します。

Sr.No.	Parameter & Description	Type	Default Value
1	$child-selector ボタングループ内のボタンのセレクターを表します。	String	$buttongroup-child-selector

ボタングループ展開

@include button-group-expand($count, $selector);

全幅のボタングループが作成され、すべてのボタンの幅が等しくなります。 次の表にリストされているパラメーターを使用します。

Sr.No.	Parameter & Description	Type	Default Value
1	$count ボタングループ内のボタンの数を表します。 _auto_に設定すると、多数のボタンを考慮したCSSが生成されます。	Keyword or Number	auto
2	$selector ボタングループ内のボタンのセレクターを表します。	String	$buttongroup-child-selector

ボタングループスタック

@include button-group-stack($selector);

グループ内のボタンを積み重ねます。 次の表に、この目的で使用されるパラメーターを示します。

Sr.No.	Parameter & Description	Type	Default Value
1	$selector ボタングループ内のボタンのセレクターを表します。	String	$buttongroup-child-selector

ボタングループアンスタック

@include button-group-unstack($selector);

グループ内のボタンをアンスタックします。 次の表に、この目的で使用されるパラメーターを示します。

Sr.No.	Parameter & Description	Type	Default Value
1	$selector ボタングループ内のボタンのセレクターを表します。	String	$buttongroup-child-selector