Foundation - Tabs Sass 参考

变量

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

Sr.No.	名称和描述	类型	默认值
1	$tab-margin 设置标签栏的边距。	数字	0
2	$tab-background 显示标签栏的背景颜色。	颜色	$white
3	$tab-background-active 显示标签栏的活动背景颜色。	颜色	$light-gray
4	$tab-border 指定标签的边框颜色。	颜色	$light-gray
5	$tab-item-color 显示菜单的文本颜色项目。	颜色	前景($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 提供标签内容的文本颜色。	颜色	前景($tab-background, $primary-color)
12	$tab-content-padding 它定义选项卡内容的填充。	数字或列表	1rem

您可以使用混合来为您的显示模式组件构建 CSS 类结构。

您可以使用以下混合 − 为选项卡容器添加样式

@include tabs-container;

使用以下 mixin − 以垂直方式显示选项卡

@include tabs-container-vertical;

使用以下 mixin − 应用选项卡链接的样式

@include tabs-title;

使用以下 mixin − 应用选项卡内容窗格的样式

@include tabs-content;

使用以下 mixin − 指定选项卡内容必须以垂直方式显示

@include tabs-content-vertical;

您可以使用以下 mixin 为选项卡内容面板添加样式 −

@include tabs-panel;