ボタングループ

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

<!-- 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-dropdown> メニューを <b-button-group> の内部に直接追加します。プロパティ 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-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`	設定すると、ボタングループを垂直モードでレンダリングします

スロット

名前	説明
`default`	ボタングループに配置するコンテンツ（ボタン）

個々のコンポーネントのインポート

次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます

コンポーネント	名前付きエクスポート	インポートパス
`<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)

概要