Foundation - 按钮 SASS 参考

描述

您可以使用 SASS 参考来更改组件的样式。

变量

下表列出了项目设置文件中用于自定义此组件默认样式的 SASS 变量。

序号	名称及描述	类型	默认值
1	$button-padding 按钮内填充。	列表	0.85em 1em
2	$button-margin 按钮周围的边距。	列表	0 0 $global-margin 0
3	$button-fill 默认按钮填充。可以是实心或空心。	关键字	solid
4	$button-background 按钮的默认背景颜色。	颜色	$primary-color
5	$button-background-hover 鼠标悬停时按钮的背景颜色	颜色	scale-color($button-background, $lightness: -15%)
6	$button-color 按钮的字体颜色。	列表	#fff
7	$button-color-alt 如果背景色较浅，则为按钮的字体颜色。	列表	#000
8	$button-radius 表示按钮的圆角半径，默认为 $global-radius。	数字	$global-radius
9	$button-sizes 按钮尺寸。	映射	tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem
10	$button-opacity-disabled 被禁用的按钮的不透明度。	列表	0.25

混合宏

要构建此组件的最终 CSS 输出，可以使用以下混合宏。要使用 Foundation 组件构建您自己的类结构，您可以自己使用这些混合宏。

button-expand

@include button-expand($expand);

用于将按钮扩展到全宽。

序号	参数及描述	类型	默认值
1	$expand 设置为true以启用扩展，否则设置为false。	布尔值	true

序号

参数及描述

类型

默认值

$expand

设置为true以启用扩展，否则设置为false。

布尔值

true

button-style

@include button-style($background, $background-hover, $color);

它设置按钮的视觉样式。

序号	参数及描述	类型	默认值
1	$background 按钮的背景颜色。	颜色	$button-background
2	$background-hover 鼠标悬停时按钮的背景颜色。设置为auto将自动生成悬停颜色。	颜色	$button-background-hover
3	$color 按钮上的文字颜色。设置为auto将根据背景颜色自动生成颜色。	颜色	$button-color

序号

参数及描述

类型

默认值

$background

按钮的背景颜色。

颜色

$button-background

$background-hover

鼠标悬停时按钮的背景颜色。设置为auto将自动生成悬停颜色。

颜色

$button-background-hover

$color

按钮上的文字颜色。设置为auto将根据背景颜色自动生成颜色。

颜色

$button-color

button-hollow

@include button-hollow;

它移除鼠标悬停时的背景填充和空心按钮焦点。

button-disabled

@include button-disabled;

通过淡化元素、重置光标和禁用指针事件，它向按钮添加禁用样式。

button-dropdown

@include button-dropdown($size, $color, $offset);

它为按钮添加一个下拉箭头。

序号	参数及描述	类型	默认值
1	$size 它表示箭头的尺寸。建议使用em值，以便在不同按钮尺寸中使用时三角形可以缩放。	数字	0.4em
2	$color 箭头的颜色。	颜色	white
3	$offset 表示按钮文本和箭头之间的距离。	数字	$button-padding

序号

参数及描述

类型

默认值

$size

它表示箭头的尺寸。建议使用em值，以便在不同按钮尺寸中使用时三角形可以缩放。

数字

0.4em

$color

箭头的颜色。

颜色

white

$offset

表示按钮文本和箭头之间的距离。

数字

$button-padding

button

@include button($expand, $background, $background-hover, $color, $style);

它添加按钮的每种样式。

序号	参数及描述	类型	默认值
1	$expand 要使按钮全宽，将其设置为true。	布尔值	false
2	$background 按钮的背景颜色。	颜色	$button-background
3	$background-hover 鼠标悬停时，设置背景颜色。设置为auto以使混合宏自动生成悬停颜色。	颜色	$button-background-hover
4	$color 表示按钮的文字颜色。设置为auto以根据背景颜色自动生成颜色。	颜色	$button-color
5	$style 要创建空心按钮，将其设置为hollow。$background颜色用作按钮主色。	关键字	solid

foundation_basic_controls.htm

打印页面