Foundation-tables-sass-reference

基礎-テーブルサスリファレンス

変数

表にリストされている次のSASS変数を使用して、コンポーネントのスタイルを変更できます。

Sr.No.	Name & Description	Type	Default Value
1	$table-background テーブルの背景色を適用します。	Color	$white
2	$table-color-scale ストライプ化されたテーブルの行と境界線を暗くするためのスケールを指定します。	Number	5%
3	$table-border テーブルの境界線のスタイルを定義します。	List	1px solid smart-scale($table-background, $table-color-scale)
4	$table-padding テーブルのパディングを提供します。	Number	rem-calc(8 10 10)
5	$table-hover-scale ホバー時にストライプテーブルの行を暗くするためのスケールを指定します。	Number	2%
6	$table-row-hover ホバーの標準行に色を適用します。	List	darken($table-background, $table-hover-scale)
7	$table-row-stripe-hover ホバーのストライプ行に色を適用します。	List	darken($table-background, $table-color-scale + $table-hover-scale)
8	$table-striped-background 縞模様の行の背景色を提供します。	Color	smart-scale($table-background, $table-color-scale)
9	$table-stripe テーブルの行にストライプが表示されます。 行が偶数の場合、偶数行は背景色を持ち、行が奇数の場合、奇数行は背景色を持ちます。 行が空またはその他の値の場合、テーブルの行にはストライプがありません。	Keyoword	even
10	$table-head-background ヘッダーの背景色を指定します。	Color	smart-scale($table-background, $table-color-scale/2)
11	$table-foot-background フッター背景の色を指定します。	Color	smart-scale($table-background, $table-color-scale)
12	$table-head-font-color ヘッダーのフォントの色を定義します。	Color	$body-font-color
13	$show-header-for-stacked スタックテーブルを使用する場合のヘッダーのデフォルト値が表示されます。	Boolean	false

ミックスイン

あなたはミックスインを使用して、以下に説明するようにコンポーネントのCSSクラス構造を構築することができます-

表

テーブルのスタイルを追加し、次のミックスインを使用してスタイルを含めることができます-

@include table($stripe);

Copy

次の表で定義されているパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$stripe 偶数、奇数、またはなしの値を使用してテーブル行のストライプを表示します。 Evenはデフォルト値です。	Keyword	$table-stripe

テーブルスクロール

次のミックスインを使用して、テーブルを水平にスクロールします-

@include table-scroll;

Copy

テーブルホバー

それは、次のミックスインを使用して、テーブルの行に浮かぶ-

@include table-hover;

Copy

テーブルスタック

スタックテーブルのスタイルを追加します。

@include table-stack($header);

Copy

次の表で定義されているパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$header テーブルがスタックされているときにヘッダーを表示します。	Boolean	$show-header-for-stacked