Foundation - 按钮组 SASS 参考
描述
您可以使用 SASS 参考更改组件的样式。
变量
下表列出了项目设置文件中的 SASS 变量，这些变量可自定义组件的默认样式。
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$buttongroup-margin 表示按钮组的边距。 |
数字 | 1rem |
| 2 |
$buttongroup-spacing 表示按钮组中每个按钮之间的边距。 |
边框 | 1px |
| 3 |
$buttongroup-child-selector 它表示按钮组中按钮的选择器。 |
string | '.button' |
| 4 |
$buttongroup-expand-max 它表示按钮组中可以包含的最大按钮数，且宽度相等。 |
数字 | 6 |
混合
要构建此组件的最终 CSS 输出，可以使用以下混合。要使用 Foundation 组件构建自己的类结构，您可以自己使用 mixin。
button-group
@include button-group($child-selector);
它为按钮组的容器添加样式。下表列出了用于此目的的参数。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$child-selector 它表示按钮组内的按钮选择器。 |
string | $buttongroup-child-selector |
button-group-expand
@include button-group-expand($count, $selector);
创建一个全宽按钮组，使每个按钮具有相同的宽度。它使用下表所列的参数。
| Sr.No. | 参数和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$count 表示按钮组中的按钮数量。将其设置为 auto，将生成考虑多个按钮的 CSS。 |
关键字或数字 | auto |
| 2 |
$selector 表示按钮组内的按钮选择器。 |
string | $buttongroup-child-selector |
button-group-stack
@include button-group-stack($selector);
它将按钮堆叠在一个组中。下表列出了用于此目的的参数。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$selector 表示按钮组内的按钮选择器。 |
string | $buttongroup-child-selector |
button-group-unstack
@include button-group-unstack($selector);
它将组中的按钮取消堆叠。下表列出了用于此目的的参数。
| Sr.No. | 参数和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$selector 表示按钮组内的按钮选择器。 |
string | $buttongroup-child-selector |
foundation_basic_controls.html
