按钮组

Flexbox

按钮组是相关操作项的容器。当您需要在栏中显示一组操作时，它们非常有用。这些构建基于按钮样式，并且与网格完美配合。

基础知识

将 .button-group 类添加到容器，并在其中放置任意数量的按钮。按钮之间用小边框隔开。

<div class="button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

一二三

尺寸调整

按钮组可以使用与标准按钮相同的类来调整大小：.tiny、.small 和 .large。

在视频中观看此部分

<div class="small button-group">
  <a class="button">Small</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
</div>

小按钮组

着色

按钮组中的按钮可以使用 .secondary、.success、.warning 和 .alert 类分别着色。

在视频中观看此部分

<div class="button-group">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>

查看编辑分享删除

也可以使用相同的类为整个组着色。

<div class="primary button-group">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

更难更好更快更强

空心和透明

按钮组中的按钮可以通过分别添加类 .hollow 或 .clear 来赋予空心和透明样式。

<div class="button-group">
  <a class="secondary button hollow">View</a>
  <a class="success button hollow">Edit</a>
  <a class="warning button hollow">Share</a>
  <a class="alert button hollow">Delete</a>
</div>

<div class="button-group">
  <a class="secondary button clear">View</a>
  <a class="success button clear">Edit</a>
  <a class="warning button clear">Share</a>
  <a class="alert button clear">Delete</a>
</div>

查看编辑分享删除

也可以使用相同的类为整个组赋予空心或透明样式。

<div class="button-group hollow">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>

<div class="button-group clear">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>

查看编辑分享删除

无间隙

对按钮组使用单一颜色时，您可能希望删除按钮之间的 1px 间距。您可以使用 no-gaps 来实现相同的效果。

<div class="primary button-group no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

更难更好更快更强

您可以在 hollow 样式上使用 no-gaps。

<div class="primary button-group hollow no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

更难更好更快更强

您可以将 no-gaps 与所有分组/单独样式一起使用。

<div class="button-group no-gaps">
  <a class="secondary button">View</a>
  <a class="success button">Share</a>
  <a class="warning button hollow">Edit</a>
  <a class="alert button clear">Delete</a>
</div>

查看分享编辑删除

等宽组

将 .expanded 类添加到容器以创建全宽按钮组。每个项目将根据按钮的数量自动调整自身大小，最多六个。

在视频中观看此部分

<div class="expanded button-group">
  <a class="button">Expanded</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
</div>

展开按钮组

堆叠

可以使用 .stacked 类将按钮组设为垂直方向。您还可以使用 .stacked-for-small 仅在小屏幕上堆叠按钮组，或使用 .stacked-for-medium 仅在中小型屏幕上堆叠。

在视频中观看此部分

<div class="stacked-for-small button-group">
  <a class="button">How</a>
  <a class="button">Low</a>
  <a class="button">Can</a>
  <a class="button">You</a>
  <a class="button">Go</a>
</div>

你能低到多低

拆分按钮

要构建拆分按钮，只需创建一个包含两个按钮的按钮组。

要创建一个只有箭头的按钮，请添加 .arrow-only 类。请注意，按钮仍然需要一个供屏幕阅读器使用的标签，该标签可以使用 .show-for-sr 元素嵌入到按钮中。在下面的示例中，辅助设备会将箭头按钮读作“显示菜单”。

在视频中观看此部分

<div class="button-group">
  <a class="button">Primary Action</a>
  <a class="dropdown button arrow-only">
    <span class="show-for-sr">Show menu</span>
  </a>
</div>

主要行动

Flexbox 按钮组

按钮组中的按钮可以使用 Foundation 中的 Flexbox 实用程序类进行定位。您可以使用 .align-center、.align-right、.align-spaced 或 .align-justify。

<div class="button-group align-center">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-right">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-spaced">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-justify">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

一二三

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$buttongroup-margin`	数字	`1rem`	按钮组的外边距。
`$buttongroup-spacing`	数字	`1px`	按钮组中按钮之间的边距。
`$buttongroup-child-selector`	字符串	`'.button'`	按钮组内按钮的选择器。
`$buttongroup-expand-max`	数字	`6`	等宽按钮组中最多可以包含的按钮数量。（仅在 $global-flexbox: false; 时需要）
`$buttongroup-radius-on-each`	布尔值	`true`	确定 $button-radius 是应用于每个按钮还是整个按钮组。使用 _settings.scss 中的 $global-radius 更改半径。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

button-group

@include button-group($child-selector, $spacing);

添加按钮组容器的样式。

参数	类型	默认值	描述
`$child-selector`	字符串	`$buttongroup-child-selector`	按钮组内按钮的选择器。
`$spacing`	数字	`$buttongroup-spacing`	按钮组中按钮之间的间距。

button-group-no-gaps

@include button-group-no-gaps($selector);

使按钮之间没有间隙地粘合在一起。按钮之间的边框合并在一起

参数	类型	默认值	描述
`$selector`	字符串	`$buttongroup-child-selector`	按钮组内按钮的选择器。

button-group-expand

@include button-group-expand($selector, $spacing);

创建一个全宽按钮组，使每个按钮的宽度相等。

参数	类型	默认值	描述
`$selector`	字符串	`$buttongroup-child-selector`	按钮组内按钮的选择器。
`$spacing`	数字	`$buttongroup-spacing`	按钮组中按钮之间的间距。

button-group-stack

@include button-group-stack($selector);

堆叠按钮组中的按钮。

参数	类型	默认值	描述
`$selector`	字符串	`$buttongroup-child-selector`	按钮组内按钮的选择器。

button-group-unstack

@include button-group-unstack($selector);

取消堆叠按钮组中的按钮。

参数	类型	默认值	描述
`$selector`	字符串	`$buttongroup-child-selector`	按钮组内按钮的选择器。