Foundation-button-sass-reference

Foundation-Button SASSリファレンス

説明

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

変数

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

Sr.No.	Name & Description	Type	Default Value
1	$button-padding ボタン内のパディング。	List	0.85em 1em
2	$button-margin ボタンの周りのマージン。	List	0 0 $global-margin 0
3	$button-fill デフォルトでボタンを埋めます。 _solid_または_hollow_のいずれかです。	Keyword	solid
4	$button-background ボタンのデフォルトの背景色。	Color	$primary-color
5	$button-background-hover ボタンの背景色をホバリングする	Color	scale-color($button-background, $lightness: -15%)
6	$button-color ボタンのフォント色。	List	#fff
7	$button-color-alt 背景が明るい場合、ボタンのフォントの色。	List	#000
8	$button-radius ボタンの境界線の半径を表します。デフォルトはグローバル半径です。	Number	$global-radius
9	$button-sizes ボタンのサイズ。	Map	tiny: 0.6remsmall: 0.75remdefault: 0.9remlarge: 1.25rem
10	$button-opacity-disabled 無効になっているボタンの不透明度。	List	0.25

ミックスイン

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

ボタン展開

@include button-expand($expand);

ボタンを全幅に拡張するために使用されます。

Sr.No.	Parameter & Description	Type	Default Value
1	$expand _true_に設定して展開を有効にするか、_false_に設定します。	Boolean	true

ボタンスタイル

@include button-style($background, $background-hover, $color);

ボタンの視覚スタイルを設定します。

Sr.No.	Parameter & Description	Type	Default Value
1	$background ボタンの背景色。	Color	$button-background
2	$background-hover ホバー時のボタンの背景色。 _auto_に設定すると、ホバーの色が自動的に生成されます。	Color	$button-background-hover
3	$color ボタンのテキストの色。 _auto_に設定すると、背景色に応じて自動的に色が生成されます。	Color	$button-color

ボタンホロー

@include button-hollow;

ホバー背景の塗りつぶしと中空ボタンのフォーカスを削除します。

ボタン無効

@include button-disabled;

要素をフェードし、カーソルをリセットし、ポインターのイベントを無効にすることにより、無効なスタイルをボタンに追加します。

ボタンドロップダウン

@include button-dropdown($size, $color, $offset);

ボタンのドロップダウン矢印を追加します。

Sr.No.	Parameter & Description	Type	Default Value
1	$size 矢印のサイズを表します。 _em_値の使用をお勧めします。これにより、異なるボタンサイズ内で使用した場合に三角形が拡大縮小します。	Number	0.4em
2	$color 矢印の色。	Color	white
3	$offset ボタンのテキストと矢印の間の距離を表します。	Number	$button-padding

ボタン

@include button($expand, $background, $background-hover, $color, $style);

ボタンのすべてのスタイルを追加します。

Sr.No.	Parameter & Description	Type	Default Value
1	$expand ボタンを全幅にするには、_true_に設定します。	Boolean	false
2	$background ボタンの背景色。	Color	$button-background
3	$background-hover ホバーで、背景色を設定します。 _auto_に設定すると、ミックスインがホバーカラーを自動的に生成します。	Color	$button-background-hover
4	$color ボタンのテキストの色を表します。 背景色に応じた色を自動的に生成するには、_auto_に設定します。	Color	$button-color
5	$style 中空のボタンを作成するには、_hollow_に設定します。 _ $ background_色はボタンの原色として使用されます。	Keyword	solid