BootstrapVue Button Toolbar 按钮工具栏

BootstrapVue Button Toolbar 按钮工具栏,是将多个按钮组Button Group组合到一起的组件，可以设置通过键盘方向键控制焦点。

例子

<div id="app">
    <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>编辑</b-button>
        <b-button>撤销</b-button>
        <b-button>重置</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

示例二

将来按钮组和输入组合在一起使用

例子

 <div id="app"> 
  <b-button-toolbar aria-label="Toolbar with button groups and input groups">
    <b-input-group size="sm" prepend="￥" append=".00" class="mr-1">
      <b-form-input value="100" class="text-right"></b-form-input>
    </b-input-group>
    <b-button-group size="sm">
      <b-button>保存</b-button>
      <b-button>取消</b-button>
    </b-button-group>
  </b-button-toolbar> 
</div>

示例三

将来按钮组和下拉菜单搭配使用

例子

<div id="app"> 
  <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>

组件大小

Button toolbar本身没有size属性，可以通过设置<b-button-group>,<b-input-group>和<b-dropdown>组件的size属性来设置大小，size属性值（lg 或 sm）。

对齐方式

如果要填充父容器可以使用button-toolbar的justify属性，默认为false

键盘控制

设置button-toolbar的key-nav属性为true可以通过键盘的方向键或tab键来控制按钮的焦点。

属性列表

插槽Slots

按需加载组件

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

作为vue.js插件使用

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