按钮Toolbar(Button toolbar)

使用可选的键盘导航，将一系列 button-groups 和/或 input-groups together 组合在一行上

示例1： 使用按钮组 & 键盘导航

<div>
  <b-button-toolbar key-nav aria-label="Toolbar with button groups">
    <b-button-group class="mx-1">
      <b-button>&laquo;</b-button>
      <b-button>&lsaquo;</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
      <b-button>Redo</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>&rsaquo;</b-button>
      <b-button>&raquo;</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

示例2： 混合使用小按钮组和小输入组

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and input groups">
    <b-button-group size="sm" class="mr-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
    <b-input-group size="sm" prepend="$" append=".00">
      <b-form-input value="100" class="text-right"></b-form-input>
    </b-input-group>
  </b-button-toolbar>
</div>

示例3： 按钮组和下拉菜单

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
    <b-button-group class="mx-1">
      <b-button>New</b-button>
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
    </b-button-group>
    <b-dropdown class="mx-1" right text="menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-button-group class="mx-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

使用

您可以自由地将输入组和下拉列表与工具栏中的按钮组混合在一起。与上面的示例类似，您可能需要一些实用程序类来正确地分隔内容。

尺寸

注意，如果您想要更小或更大的按钮或控件，请直接在 <b-button-group>， <b-input-group>， 和 <b-dropdown> 组件上设置 size 属性。

对齐

增加按钮组、输入组和下拉菜单之间的间距，通过设置 justify 属性调整，使工具栏的宽度达到最大可用宽度。

键盘导航

通过设置 key-nav 属性启用可选的键盘导航。

按键 活动
LEFT 或 UP 移动到工具栏中先前未禁用的项
RIGHT 或 DOWN 移动到工具栏中下一个不可禁用的项
SHIFT+LEFT 或 SHIFT+UP 移动到工具栏中第一个未禁用的项
SHIFT+RIGHT 或 SHIFT+DOWN 移动到工具栏中最后一个未禁用的项
TAB 移动到页面上的下一个控件
SHIFT+TAB 移动到页面上的前一个控件

警告： 如果工具栏中有文本或类似文本的输入，请关闭键盘导航，因为不可能使用按键跳出文本(或 test-like )输入。

另请参阅

组件引用

<b-button-toolbar>

View source

组件别名

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

  • <b-btn-toolbar>

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

属性

属性 类型 默认值 描述
justify Boolean false 通过增加按钮组、输入组和下拉菜单之间的间距，使工具栏的宽度达到最大可用宽度
key-nav Boolean false 设置时，为工具栏启用键盘导航模式。当工具栏有输入时不要设置此道具

导入单个组件

您可以通过以下指定的导出将各个组件导入到您的项目中：

组件 命名输出 导入路径
<b-button-toolbar> BButtonToolbar bootstrap-vue

示例：

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

作为Vue.js插件导入

这个插件包含了上面列出的所有组件。插件还包括任何组件别名。

命名输出 导入路径
ButtonToolbarPlugin bootstrap-vue

示例：

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