BootstrapVue Button Group 按钮组

BootstrapVue Button Group 按钮组可以将多个按钮组合在一起,从而看起来排列在一起的工具栏。

<b-button-group>
    <b-button>Button</b-button>
    <b-button variant="danger">Button</b-button>
    <b-button variant="success">Button</b-button> 
    <b-button variant="primary">Success</b-button> 
    <b-button variant="info">Button</b-button>
</b-button-group>

例子

按钮组大小

可以设置size属性为lg 或者 sm,lg表示大号按钮组、sm表示小号按钮组

<b-button-group size="lg">
    <b-button>Button</b-button>
    <b-button variant="danger">Button</b-button>
    <b-button variant="success">Button</b-button> 
    <b-button variant="primary">Success</b-button> 
    <b-button variant="info">Button</b-button>
</b-button-group>

设置为垂直方向

例子

搭配和下拉菜单一起使用

<b-button-group>
    <b-button>Button</b-button>
    <b-dropdown right text="下拉菜单">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-dropdown right split text="Split Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown> 
  </b-button-group>

例子

属性

属性名称类型默认值描述
aria-roleStringDefault无障碍阅读属性
sizeString
lg、sm按钮组大小
tagString
div把按钮组渲染成那个标签
verticalBooleanfalse
是否垂直排列

Slots插槽

插槽名称default

新按需加载组件

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

作为Vue.js的组件使用

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