按钮组

使用 <b-button-group> 在单行上将一系列按钮组合在一起。

概述

按钮组是一种将一系列按钮组合在一起的简单方法。

<div>
  <div>
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
      <b-button>Button 3</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group>
      <b-button variant="success">Success</b-button>
      <b-button variant="info">Info</b-button>
      <b-button variant="warning">Warning</b-button>
    </b-button-group>
  </div>
</div>

<!-- b-button-group.vue -->

尺寸

将 size 属性设置为 lg 或 sm 分别渲染更大或更小的按钮。无需在各个按钮上指定尺寸。

<div>
  <div>
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
      <b-button>Button 3</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group size="sm">
      <b-button>Left</b-button>
      <b-button>Middle</b-button>
      <b-button>Right</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group size="lg">
      <b-button>Left</b-button>
      <b-button>Middle</b-button>
      <b-button>Right</b-button>
    </b-button-group>
  </div>
</div>

<!-- b-button-group-sizes.vue -->

垂直变体

通过设置 vertical 属性，使一组按钮垂直堆叠显示，而不是水平显示。此处不支持拆分按钮下拉菜单。

<div>
  <b-button-group vertical>
    <b-button>Top</b-button>
    <b-button>Middle</b-button>
    <b-button>Bottom</b-button>
  </b-button-group>
</div>

<!-- b-button-group-vertical.vue -->

在 <b-button-group> 内直接添加 <b-dropdown> 菜单。请注意，当属性 vertical 设置时，不支持拆分下拉菜单。

<div>
  <b-button-group>
    <b-button>Button</b-button>
    <b-dropdown right text="Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-dropdown right split text="Split Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
  </b-button-group>
</div>

<!-- b-button-group-menu.vue -->

另请参阅

还请查看 <b-button-toolbar> 组件，用于生成包含按钮组和输入组的工具栏。

组件参考

`<b-button-group>`

函数组件

查看源代码

<b-button-group> 组件别名
<b-button-group> 属性
<b-button-group> 插槽

组件别名

<b-button-group> 还可以通过以下别名使用

<b-btn-group>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`aria-role`	`字符串`	`'group'`	将 ARIA 属性 `role` 设置为特定值
`size`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`tag`	`字符串`	`'div'`	指定要渲染的 HTML 标签，而不是默认标签
`vertical`	`布尔值`	`false`	设置时，以垂直模式渲染按钮组

插槽

名称	说明
`default`	要放置在按钮组中的内容（按钮）

导入单个组件

可以通过以下命名导出将单个组件导入到项目中

组件	命名导出	导入路径
`<b-button-group>`	`BButtonGroup`	`bootstrap-vue`

示例

import { BButtonGroup } from 'bootstrap-vue'
Vue.component('b-button-group', BButtonGroup)

作为 Vue.js 插件导入

此插件包含上述所有列出的单个组件。插件还包括任何组件别名。

命名导出	导入路径
`ButtonGroupPlugin`	`bootstrap-vue`

示例

import { ButtonGroupPlugin } from 'bootstrap-vue'
Vue.use(ButtonGroupPlugin)

概述

尺寸