按钮工具栏 | 组件 | BootstrapVue 中文

将一系列按钮组和/或输入组组合在单行上，并提供可选的键盘导航

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

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

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

<!-- b-button-toolbar-input.vue -->

示例 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-toolbar-dropdown.vue -->

用法

可以在工具栏中随意混合输入组和下拉菜单与按钮组。与上面的示例类似，你可能需要一些实用程序类来正确地设置间距。

尺寸

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

对齐

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

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

按键	操作
`左` 或 `上`	移至工具栏中上一个未禁用的项目
`右` 或 `下`	移至工具栏中下一个未禁用的项目
`Shift`+`左` 或 `Shift`+`上`	移至工具栏中第一个未禁用的项目
`Shift`+`右` 或 `Shift`+`下`	移至工具栏中最后一个未禁用的项目
`Tab`	移至页面上的下一个控件
`Shift`+`Tab`	移至页面上的上一个控件

注意：如果工具栏中有文本或类似文本的输入，请关闭键盘导航，因为无法使用按键跳出文本（或类似文本的）输入。

另请参阅

组件参考

查看源代码

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

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

<b-btn-toolbar>

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

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

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

名称	说明
`default`	放置在按钮工具栏中的内容

导入单个组件

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

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

用法

尺寸

对齐

键盘导航

另请参阅

组件参考

组件别名

属性

插槽

导入单个组件

作为 Vue.js 插件导入