BootstrapVue中文文档

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)
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 设置语言