Sass参考(Sass Reference)
变量 (Variables)
您可以使用表中列出的以下SASS变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $tab-margin 它设置标签栏的边距。 | Number | 0 |
| 2 | $tab-background 它显示标签栏的背景颜色。 | Color | $white |
| 3 | $tab-background-active 它显示标签栏的活动背景颜色。 | Color | $light-gray |
| 4 | $tab-border 它指定选项卡的边框颜色。 | Color | $light-gray |
| 5 | $tab-item-color 它显示菜单项的文本颜色。 | Color | foreground($tab-background, $primary-color) |
| 6 | $tab-item-background-hover 它显示悬停项目的背景颜色。 | $white | |
| 7 | $tab-item-padding 它定义选项卡项的填充。 | Number | 1.25rem 1.5rem |
| 8 | $tab-expand-max 它包括CSS中最大数量的expand-n类。 | Number | 6 |
| 9 | $tab-content-background 它显示选项卡内容的背景颜色。 | Color | $white |
| 10 | $tab-content-border 它显示选项卡内容的边框颜色。 | Color | $light-gray |
| 11 | $tab-content-color 它提供选项卡内容的文本颜色。 | Color | foreground($tab-background, $primary-color) |
| 12 | $tab-content-padding 它定义选项卡内容的填充。 | Number or List | 1rem |
Mixins
您可以使用mixins为您的揭密模态组件构建CSS类结构。
tabs-container
您可以使用以下mixin包含选项卡容器的样式 -
@include tabs-container;
tabs-container-vertical
它使用以下mixin以垂直方式显示选项卡 -
@include tabs-container-vertical;
tabs-title
它通过使用以下mixin应用选项卡链接的样式 -
@include tabs-title;
tabs-content
它通过使用以下mixin应用选项卡内容窗格的样式 -
@include tabs-content;
tabs-content-vertical
它通过使用以下mixin以垂直方式指定选项卡，内容必须显示 -
@include tabs-content-vertical;
tabs-panel
您可以使用以下mixin包含选项卡内容面板的样式 -
@include tabs-panel;
