BootstrapVue中文文档

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键来控制按钮的焦点。

属性列表

属性名称
类型默认值说明
justifyBooleanfalse是否两端对齐
key-navBooleanfalse是否用方向键或tab键控制焦点

插槽Slots

插槽名称
说明
defaultvue插槽

按需加载组件

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

作为vue.js插件使用

import { ButtonToolbarPlugin } from 'bootstrap-vue'
Vue.use(ButtonToolbarPlugin)
Catalog
快速入门 Alerts 警告框 Aspect 设置宽高比 Avatar 头像 Avatar 属性事件 Avatar 显示内容 Avatar 头像样式 Avatar 头像类型按 Avatar Badge 徽章 Avatar Groups 分组 Badge 徽章 Breadcrumb 面包屑 Button 按钮 Button 按钮基础 Button 属性列表 Button Group 按钮组 Button Toolbar 工具栏 Calendar 日历 Calendar 选择事件 Calendar 日历组件 Calendar 组件样式 Calendar 设置语言