- 基础 常规
- 基础 - 全局样式
- 基础 - Sass
- 基础 - JavaScript
- 基础 - JavaScript 实用工具
- 基础 - 媒体查询
- 基础 - 网格系统
- 基础 - Flex 网格
- 基础 - 表单
- 基础 - 可见性类
- 基础 - 基本排版
- 基础 - 排版辅助工具
- 基础 - 基本控件
- 基础 - 导航
- 基础 - 容器
- 基础 - 媒体
- 基础 - 插件
- 基础 SASS
- 基础 - Sass 函数
- 基础 - Sass 混合宏
- 基础 库
- 基础 - Motion UI
基础 - Sass 参考
变量
您可以使用下表中列出的以下 SASS 变量来更改组件的样式。
| 序号 | 名称及描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$accordion-background 定义手风琴组的默认背景颜色。 |
颜色 | $white |
| 2 |
$accordion-plusminus 通过将其设置为 true，可以在每个手风琴标题的旁边添加加号和减号图标。 |
布尔值 | true |
| 3 | $accordion-item-color 显示菜单中项目的默认文本颜色。 |
颜色 | foreground($accordion-background, $primary-color) |
| 4 |
$accordion-item-background-hover 菜单中项目悬停时的默认背景颜色。 |
颜色 | $light-gray |
| 5 |
$accordion-item-padding 手风琴项目的默认填充。 |
数字或列表 | 1.25rem 1rem |
| 6 |
$accordion-content-background 提供选项卡内容的背景颜色。 |
颜色 | $white |
| 7 |
$accordion-content-border 提供选项卡内容的边框颜色。 |
颜色 | 1px solid $light-gray |
| 8 |
$accordion-content-color 指定选项卡内容的文本颜色。 |
颜色 | foreground($accordion-background, $primary-color) |
| 9 |
$accordion-content-padding 显示选项卡内容的填充。 |
数字或列表 | 1rem |
混合宏
您可以使用混合宏构建组件的 CSS 类结构，如表中所列。
| 序号 | 名称及描述 | 格式 |
|---|---|---|
| 1 |
accordion-container 它包含手风琴容器的样式。 |
@include accordion-container |
| 2 |
accordion-title 它定义手风琴项目的标题。 |
@include accordion-title |
| 3 |
accordion-content 它提供手风琴内容的样式。 |
@include accordion-content |
foundation_containers.htm
广告