問題を報告このページを編集

ボタントゥールバー

一連のボタングループやインプットグループを、オプションのキーボードナビゲーション付きで1行にまとめてグループ化します。

例1：ボタングループとキーボードナビゲーション

<div>
  <b-button-toolbar key-nav aria-label="Toolbar with button groups">
    <b-button-group class="mx-1">
      <b-button>&laquo;</b-button>
      <b-button>&lsaquo;</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
      <b-button>Redo</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>&rsaquo;</b-button>
      <b-button>&raquo;</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

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

例2：小さなボタングループと小さなインプットグループの混合

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and input groups">
    <b-button-group size="sm" class="mr-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
    <b-input-group size="sm" prepend="$" append=".00">
      <b-form-input value="100" class="text-right"></b-form-input>
    </b-input-group>
  </b-button-toolbar>
</div>

<!-- b-button-toolbar-input.vue -->

例3：ボタングループとドロップダウンメニュー

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
    <b-button-group class="mx-1">
      <b-button>New</b-button>
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
    </b-button-group>
    <b-dropdown class="mx-1" right text="menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-button-group class="mx-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

<!-- b-button-toolbar-dropdown.vue -->

使い方

ツールバー内でインプットグループとドロップダウンをボタングループと自由に組み合わせてください。上記の例と同様に、適切に間隔を調整するためにユーティリティクラスが必要になる場合があります。

サイズ調整

ボタンやコントロールを小さくしたり大きくしたりする場合は、sizeプロパティを<b-button-group>、<b-input-group>、および<b-dropdown>コンポーネントに直接設定してください。

均等割り付け

justifyプロパティを設定することで、ボタングループ、インプットグループ、ドロップダウンの間隔を広げ、ツールバーを最大幅に拡張します。

キーボードナビゲーション

key-navプロパティを設定して、オプションのキーボードナビゲーションを有効にします。

キープレス アクション
左または上 ツールバー内の前の非無効アイテムに移動します
右または下 ツールバー内の次の非無効アイテムに移動します
Shift+左またはShift+上 ツールバー内の最初の非無効アイテムに移動します
Shift+右またはShift+下 ツールバー内の最後の非無効アイテムに移動します
Tab ページ上の次のコントロールに移動します
Shift+Tab ページ上の前のコントロールに移動します

注意：ツールバーにテキストまたはテキストのような入力がある場合は、キーボードナビゲーションをオフにしてください。テキスト（またはテキストのような）入力からキープレスを使用してジャンプすることができないためです。

関連情報

コンポーネントリファレンス

<b-button-toolbar>

ソースを表示

コンポーネントエイリアス

<b-button-toolbar> は、以下のエイリアスを使って使用することもできます。

  • <b-btn-toolbar>

注: コンポーネントエイリアスは、BootstrapVue全体をインポートするか、コンポーネントグループプラグインを使用する場合のみ利用可能です。

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
justify
Booleanfalseボタングループ、インプットグループ、ドロップダウンの間隔を広げ、ツールバーを最大幅に拡張します
key-nav
Booleanfalse設定すると、ツールバーのキーボードナビゲーションモードが有効になります。ツールバーに入力がある場合は、このプロパティを設定しないでください

スロット

名前
説明
default ボタントゥールバーに配置するコンテンツ

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

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

コンポーネント
名前付きエクスポート
インポートパス
<b-button-toolbar>BButtonToolbarbootstrap-vue

例

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

Vue.jsプラグインとしてインポート

このプラグインには、上記リストの個々のコンポーネントがすべて含まれています。プラグインには、コンポーネントエイリアスも含まれます。

名前付きエクスポート
インポートパス
ButtonToolbarPluginbootstrap-vue

例

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