按钮组(Button Group)

将一系列按钮组合在一条直线上 <b-button-group>.

示例1： 使用上下文变体的默认按钮组和按钮组

<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>

尺寸

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

示例2： 默认的、小的和大的按钮组

<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>

垂直变化

通过设置 vertical 属性，让一组按钮垂直堆叠，而不是水平放置。这里不支持拆分按钮下拉。

示例3： 垂直按钮组

<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-dropdown> 中添加 <b-button-group> 。 注意，拆分下拉菜单不支持时，设置 vertical 属性。

示例4： 带有下拉菜单的按钮组

<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-toolbar> 组件。

组件引用

<b-button-group>

功能组件
View source

组件别名

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

  • <b-btn-group>

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

属性

属性 类型 默认值 描述
vertical Boolean false 设置后，以垂直模式渲染按钮组
size String 设置组件外观的大小。“sm”、“md” (默认),或“lg”
tag String 'div' 指定要渲染的HTML标记，而不是默认标记
aria-role String 'group' 将ARIA属性“role”设置为一个特定的值

导入单个组件

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

组件 命名输出 导入路径
<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)