- 基础通用
- 基础 - 全局样式
- 基础 - Sass
- 基础 - JavaScript
- 基础 - JavaScript 工具函数
- 基础 - 媒体查询
- 基础 - 网格系统
- 基础 - Flex 网格
- 基础 - 表单
- 基础 - 可见性类
- 基础 - 基本排版
- 基础 - 排版辅助类
- 基础 - 基本控件
- 基础 - 导航
- 基础 - 容器
- 基础 - 媒体
- 基础 - 插件
- 基础 SASS
- 基础 - Sass 函数
- 基础 - Sass 混合宏
- 基础库
- 基础 - Motion UI
基础 - 按钮组 SASS 参考
描述
您可以使用 SASS 参考来更改组件的样式。
变量
下表列出了项目设置文件中的 SASS 变量，这些变量使组件的默认样式可以进行自定义。
| 序号 | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$buttongroup-margin 它表示按钮组的边距。 |
数字 | 1rem |
| 2 |
$buttongroup-spacing 它表示按钮组中每个按钮之间的边距。 |
边框 | 1px |
| 3 |
$buttongroup-child-selector 它表示按钮组内按钮的选择器。 |
字符串 | '.button' |
| 4 |
$buttongroup-expand-max 它表示按钮组中可以具有等宽的按钮的最大数量。 |
数字 | 6 |
混合宏
要构建此组件的最终 CSS 输出，可以使用以下混合宏。要使用 Foundation 组件构建您自己的类结构，您可以自己使用这些混合宏。
button-group
@include button-group($child-selector);
它为按钮组的容器添加样式。下表列出了为此目的使用的参数。
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$child-selector 它表示按钮组内按钮的选择器。 |
字符串 | $buttongroup-child-selector |
button-group-expand
@include button-group-expand($count, $selector);
创建一个全宽按钮组，使每个按钮都具有相等的宽度。它使用参数，这些参数在下面的表格中列出。
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$count 表示按钮组内的按钮数量。将其设置为auto，将生成考虑多个按钮的 CSS。 |
关键字或数字 | auto |
| 2 |
$selector 表示按钮组内按钮的选择器。 |
字符串 | $buttongroup-child-selector |
button-group-stack
@include button-group-stack($selector);
它将按钮组中的按钮堆叠起来。下表列出了为此目的使用的参数。
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$selector 表示按钮组内按钮的选择器。 |
字符串 | $buttongroup-child-selector |
button-group-unstack
@include button-group-unstack($selector);
它取消按钮组中的按钮堆叠。下表列出了为此目的使用的参数。
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$selector 表示按钮组内按钮的选择器。 |
字符串 | $buttongroup-child-selector |
foundation_basic_controls.htm
广告