Foundation - Sass 样式参考

变量

您可以使用下表中列出的 Sass 变量来更改组件的样式。

序号	名称和描述	类型	默认值
1	$tab-margin 设置选项卡栏的边距。	数值	0
2	$tab-background 显示选项卡栏的背景颜色。	颜色	$white
3	$tab-background-active 显示选项卡栏的活动背景颜色。	颜色	$light-gray
4	$tab-border 指定选项卡的边框颜色。	颜色	$light-gray
5	$tab-item-color 显示菜单项的文本颜色。	颜色	foreground($tab-background, $primary-color)
6	$tab-item-background-hover 显示鼠标悬停时项目的背景颜色。		$white
7	$tab-item-padding 定义选项卡项的内边距。	数值	1.25rem 1.5rem
8	$tab-expand-max 包含CSS中expand-n类的最大数量。	数值	6
9	$tab-content-background 显示选项卡内容的背景颜色。	颜色	$white
10	$tab-content-border 显示选项卡内容的边框颜色。	颜色	$light-gray
11	$tab-content-color 提供选项卡内容的文本颜色。	颜色	foreground($tab-background, $primary-color)
12	$tab-content-padding 定义选项卡内容的内边距。	数值或列表	1rem

您可以使用混合宏来构建 reveal 模态组件的 CSS 类结构。

您可以使用以下混合宏包含选项卡容器的样式：

@include tabs-container;

使用以下混合宏以垂直方式显示选项卡：

@include tabs-container-vertical;

使用以下混合宏应用选项卡链接的样式：

@include tabs-title;

使用以下混合宏应用选项卡内容窗格的样式：

@include tabs-content;

使用以下混合宏指定选项卡和内容必须以垂直方式显示：

@include tabs-content-vertical;

您可以使用以下混合宏包含选项卡内容面板的样式：

@include tabs-panel;

foundation_containers.htm

打印页面