按鈕群組

使用 <b-button-group> 將一系列按鈕群組在單一行上。

概觀

按鈕群組是一個輕鬆將一系列按鈕群組在一起的方法。

<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>

<!-- b-button-group.vue -->

調整大小

分別設定 size 屬性為 lg 或 sm 以呈現較大或較小的按鈕。無需在個別按鈕上指定大小。

<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>

<!-- b-button-group-sizes.vue -->

垂直變形

透過設定 vertical 屬性，使按鈕組垂直堆疊顯示，而不是水平方式。分頁按鈕下拉式選單在此不受支援。

<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-button-group-vertical.vue -->

在 <b-button-group> 中直接加入 <b-dropdown> 選單。注意當 prop vertical 被設定時，分割的選單按鈕不會被支援。

<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-group-menu.vue -->

另請參閱

同時查看 <b-button-toolbar> 組件，用於產生包含按鈕組和輸入組的工具列。

組件參考

`<b-button-group>`

功能型組件

檢視來源

<b-button-group> 組件別名
<b-button-group> 屬性
<b-button-group> 插槽

組件別名

<b-button-group> 也能使用以下的別名

<b-btn-group>

注意：組件別名只有在匯入所有的 BootstrapVue 或使用組件群組外掛時才可用。

屬性

所有屬性的預設值都是全域設定。

屬性	類型	預設值	描述
`aria-role`	`字串`	`'group'`	設定 ARIA 屬性 `role` 至特定值。
`size`	`字串`		設定組件顯示的大小。'sm', 'md' (預設)，或 'lg'
`tag`	`字串`	`'div'`	指定用來取代預設標籤的 HTML 標籤。
`vertical`	`布林值`	`false`	若設定為 true，則以垂直模式顯示按鈕組。

插槽

名稱	描述
`預設值`	放入按鈕組中的內容 (按鈕)。

匯入個別組件

您可以透過以下的命名匯出，將個別組件匯入您的專案。

組件	命名匯出	匯入路徑
`<b-button-group>`	`BButtonGroup`	`bootstrap-vue`

範例

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

作為 Vue.js 外掛匯入

此外掛包含所有以上列出的個別組件。. 外掛也包括所有組件別名。

命名匯出	匯入路徑
`ButtonGroupPlugin`	`bootstrap-vue`

範例

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

概觀