组件别名
<b-button-group>
也可以通过以下别名使用:
<b-btn-group>
注意:组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。
将一系列按钮组合在一条直线上 <b-button-group>
.
示例1: 使用上下文变体的默认按钮组和按钮组
<div>
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-button>Button 3</b-button>
</b-button-group>
</div>
<div class="mt-3">
<b-button-group>
<b-button variant="success">Success</b-button>
<b-button variant="info">Info</b-button>
<b-button variant="warning">Warning</b-button>
</b-button-group>
</div>
</div>
将尺寸属性设置为 lg
或 sm
分别渲染更大或更小的按钮。不需要在各个按钮上指定大小。
示例2: 默认的、小的和大的按钮组
<div>
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-button>Button 3</b-button>
</b-button-group>
</div>
<div class="mt-3">
<b-button-group size="sm">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
<div class="mt-3">
<b-button-group size="lg">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
</div>
通过设置 vertical
属性,让一组按钮垂直堆叠,而不是水平放置。这里不支持拆分按钮下拉。
示例3: 垂直按钮组
<div>
<b-button-group vertical>
<b-button>Top</b-button>
<b-button>Middle</b-button>
<b-button>Bottom</b-button>
</b-button-group>
</div>
直接在您的 <b-dropdown>
中添加 <b-button-group>
。 注意,拆分下拉菜单不支持时,设置 vertical
属性。
示例4: 带有下拉菜单的按钮组
<div>
<b-button-group>
<b-button>Button</b-button>
<b-dropdown right text="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-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>
</div>
还可以查看用于生成包含按钮组和输入组的工具栏的 <b-button-toolbar>
组件。
<b-button-group>
<b-button-group>
也可以通过以下别名使用:
<b-btn-group>
注意:组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
vertical
|
Boolean | false |
设置后,以垂直模式渲染按钮组 |
size
|
String | 设置组件外观的大小。“sm”、“md” (默认),或“lg” | |
tag
|
String | 'div' |
指定要渲染的HTML标记,而不是默认标记 |
aria-role
|
String | 'group' |
将ARIA属性“role”设置为一个特定的值 |
您可以通过以下命名导出将各个组件导入到项目中:
组件 | 命名输出 | 导入路径 |
---|---|---|
<b-button-group> |
BButtonGroup |
bootstrap-vue |
示例:
import { BButtonGroup } from 'bootstrap-vue'
Vue.component('b-button-group', BButtonGroup)
这个插件包含了上面列出的所有组件。插件还包括任何组件别名。
命名输出 | 导入路径 |
---|---|
ButtonGroupPlugin |
bootstrap-vue |
示例:
import { ButtonGroupPlugin } from 'bootstrap-vue'
Vue.use(ButtonGroupPlugin)