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>«</b-button>
<b-button>‹</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>›</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 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键来控制按钮的焦点。
属性名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
justify | Boolean | false | 是否两端对齐 |
key-nav | Boolean | false | 是否用方向键或tab键控制焦点 |
插槽名称 | 说明 |
---|---|
default | vue插槽 |
import { BButtonToolbar } from 'bootstrap-vue'
Vue.component('b-button-toolbar', BButtonToolbar)
import { ButtonToolbarPlugin } from 'bootstrap-vue'
Vue.use(ButtonToolbarPlugin)