Foundation - Table Sass 参考
变量
您可以使用表中列出的以下 SASS 变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$table-background 应用表格的背景颜色。 |
颜色 | $white |
| 2 |
$table-color-scale 指定使条纹表格行和边框变暗的比例。 |
数字 | 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 指定悬停时条纹表格行变暗的比例。 |
数字 | 2% |
| 6 |
$table-row-hover 悬停时应用标准行的颜色。 |
列表 | darken($table-background, $table-hover-scale) |
| 7 | $table-row-stripe-hover 悬停时应用条纹行的颜色。 |
列表 | darken($table-background, $table-color-scale + $table-hover-scale) |
| 8 |
$table-striped-background 它为条纹行提供背景颜色。 |
颜色 | 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 |
Mixins
您可以使用 mixins 为您的组件构建 CSS 类结构，如下所述 −
table
它为表格添加样式，可以使用以下 mixin 包含样式 −
@include table($stripe);
它使用下表中定义的参数 −
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $stripe 使用偶数、奇数或无值显示表格行上的条纹。偶数是默认值。 |
关键字 | $table-stripe |
table-scroll
使用以下混合 − 水平滚动表格
@include table-scroll;
table-hover
使用以下混合宏 − 悬停在表格行上
@include table-hover;
table-stack
为堆叠表格添加样式。
@include table-stack($header);
使用下表中定义的参数 −
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $header 表格堆叠时显示标题。 |
boolean | $show-header-for-stacked |
foundation_containers.html
