Foundation - 按钮 SASS 参考
描述
您可以使用 SASS 参考更改组件的样式。
变量
下表列出了项目设置文件中的 SASS 变量，这些变量可自定义此组件的默认样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$button-padding 按钮内的填充。 |
列表 | 0.85em 1em |
| 2 |
$button-margin 按钮周围的边距。 |
列表 | 0 0 $global-margin 0 |
| 3 |
$button-fill 默认填充按钮。它可以是实心或空心。 |
关键字 | 实心 |
| 4 |
$button-background 按钮的默认背景颜色。 |
Color | $primary-color |
| 5 |
$button-background-hover 按钮悬停时的背景颜色 |
Color | scale-color($button-background, $lightness: -15%) |
| 6 |
$button-color 按钮的字体颜色。 |
List | #fff |
| 7 |
$button-color-alt 按钮的字体颜色(如果背景为浅色)。 |
List | #000 |
| 8 |
$button-radius 表示按钮的边框半径，默认为 global-radius。 |
Number | $global-radius |
| 9 |
$button-sizes 按钮大小。 |
Map | tiny:0.6rem small:0.75rem default:0.9rem large:1.25rem |
| 10 |
$button-opacity-disabled 已禁用按钮的不透明度。 |
List | 0.25 |
混合
要构建此组件的最终 CSS 输出，可以使用以下混合。要使用 Foundation 组件构建自己的类结构，您可以自己使用混合。
button-expand
@include button-expand($expand);
用于将按钮扩展至其全宽。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$expand 设置为 true 以启用展开，否则设置为 false。 |
boolean | true |
button-style
@include button-style($background, $background-hover, $color);
设置按钮的视觉样式。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$background 按钮的背景颜色。 |
Color | $button-background |
| 2 |
$background-hover 悬停时按钮的背景颜色。设置为 auto 将自动生成悬停颜色。 |
Color | $button-background-hover |
| 3 |
$color 按钮上的文本颜色。设置为 auto 将自动生成取决于背景颜色的颜色。 |
Color | $button-color |
button-hollow
@include button-hollow;
它会移除悬停时的背景填充和空心按钮焦点。
button-disabled
@include button-disabled;
通过淡化元素、重置光标和禁用指针事件，它会为按钮添加禁用样式。
button-dropdown
@include button-dropdown($size, $color, $offset);
它为按钮添加了一个下拉箭头。
| Sr.No. | 参数和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$size 它表示箭头的大小。建议使用 em 值，这样三角形在不同按钮尺寸中使用时可以缩放。 |
数字 | 0.4em |
| 2 |
$color 箭头的颜色。 |
Color | 白色 |
| 3 |
$offset 表示按钮文本和箭头之间的距离。 |
数字 | $button-padding |
按钮
@include button($expand, $background, $background-hover, $color, $style);
它为按钮添加所有样式。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$expand 要使按钮全宽，请将其设置为 true。 |
boolean | false |
| 2 |
$background 按钮的背景颜色。 |
Color | $button-background |
| 3 |
$background-hover 悬停时，设置背景颜色。设置为 auto 可使 mixin 自动生成悬停颜色。 |
Color | $button-background-hover |
| 4 |
$color 表示按钮的文本颜色。设置为 auto 以自动生成取决于背景颜色的颜色。 |
Color | $button-color |
| 5 |
$style 要创建空心按钮，请将其设置为 hollow。$background 颜色用作按钮主色。 |
Keyword | solid |
foundation_basic_controls.html
