トグル

v-b-toggle は、コラプスやサイドバーの可視性を切り替えるための軽量なディレクティブで、自動化されたWAI-ARIAアクセシビリティ属性の処理が含まれています。

概要

v-b-toggle ディレクティブは、ボタンなどのインタラクティブな要素で使用して、<b-collapse> および <b-sidebar> コンポーネントの可視状態を切り替えることができます。

ターゲットコンポーネントの可視性を切り替えることに加えて、ディレクティブは、適用先の要素のARIAアクセシビリティ属性を自動的に更新して、ターゲットコンポーネントの可視状態を反映させます。詳細と注意点については、以下のアクセシビリティセクションを参照してください。

ディレクティブの構文と使い方

ディレクティブは、ターゲットの可視性をトリガーする要素またはコンポーネントに適用されます。ターゲットコンポーネントは、ディレクティブ修飾子、ディレクティブ引数、またはディレクティブ値として渡される文字列/配列のいずれかとして（IDを介して）指定できます。

v-b-toggle.my-collapse - ディレクティブ修飾子（複数のターゲットが許可され、各修飾子はターゲットIDです）
v-b-toggle:my-collapse - ディレクティブ引数（Vue動的引数がサポートされています） v2.14.0+
v-b-toggle="'my-collapse'" - 文字列IDとしてのディレクティブ値
v-b-toggle="'my-collapse1 my-collapse2'" - スペースで区切られたIDの文字列としてのディレクティブ値 v2.14.0+
v-b-toggle="['my-collapse1', 'my-collapse2']" - 文字列IDの配列としてのディレクティブ値 v2.14.0+

複数のコンポーネントをターゲットにする場合、修飾子、引数、および値を同時に使用できます。

使用例

<template>
  <div>
    <div class="mb-3">
      <b-button v-b-toggle.my-collapse>Toggle Collapse</b-button>
      <b-button v-b-toggle.my-sidebar>Toggle Sidebar</b-button>
    </div>

    <b-collapse id="my-collapse">
      <b-card title="Collapsible card">
        Hello world!
      </b-card>
    </b-collapse>

    <b-sidebar id="my-sidebar" title="Sidebar" shadow>
      <div class="px-3 py-2">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
    </b-sidebar>
  </div>
</template>

<!-- v-b-toggle-directive.vue -->

リンクでの使用

2.15.0+

リンク（またはリンクをレンダリングするコンポーネント）にディレクティブを配置する場合、ターゲットIDはhref属性を介して代わりに指定できます。

ブラウザのURLが変更され、ページがターゲットをビューにスクロールする可能性があることに注意してください。URLが変更されたり、ページがスクロールしたりするのを防ぐには、@click.prevent をリンクに追加します。

使用例

<template>
  <div>
    <div class="mb-3">
      <a v-b-toggle href="#example-collapse" @click.prevent>Toggle Collapse</a>
      <b-button v-b-toggle href="#example-sidebar" @click.prevent>Toggle Sidebar</b-button>
    </div>

    <b-collapse id="example-collapse">
      <b-card title="Collapsible card">
        Hello world!
      </b-card>
    </b-collapse>

    <b-sidebar id="example-sidebar" title="Sidebar" shadow>
      <div class="px-3 py-2">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
    </b-sidebar>
  </div>
</template>

<!-- v-b-toggle-links.vue -->

トグルトリガー要素でのコンテンツの表示と非表示

v-b-toggle ディレクティブを使用すると、ターゲットコンポーネントが閉じている場合は、トリガー要素にクラス collapsed が自動的に配置され、開いている場合は削除されます。BootstrapVue 2.14.0 の時点で、ターゲットが閉じられていない場合は、クラス not-collapsed が適用されます。

HTMLマークアップの例

<div>
  <b-button v-b-toggle:my-collapse>
    <span class="when-open">Close</span><span class="when-closed">Open</span> My Collapse
  </b-button>
  <b-collapse id="my-collapse">
    <!-- Content here -->
  </b-collapse>
</div>

カスタムCSSの例

.collapsed > .when-open,
.not-collapsed > .when-closed {
  display: none;
}

ターゲットが開閉するのを防ぐ

トリガー要素がターゲットをトグルしないようにするには、<button>、<b-button>、または<b-link>（または <b-link> をベースにしたコンポーネント）の disabled プロパティを設定すると、トグルイベントはターゲットにディスパッチされません。

アクセシビリティ

アクセシビリティ上の理由から、ディレクティブは、キーボードのみのユーザーやスクリーンリーダーのユーザーが簡単にアクセスできる <button> や <b-button> などのクリック可能なインタラクティブ要素に配置する必要があります。button（または link）のアクセシビリティロールがネイティブにない要素には、属性 role="button" および tabindex="0" が適用され、適切なクリックハンドラーがインスタンス化されます。したがって、ボタン以外のフォームコントロールにディレクティブを配置することは強く推奨されません。

ディレクティブは、トリガー要素に次のARIA属性を適用し、動的に更新します

aria-controls - トグルされるコラプスまたはサイドバーコンポーネントのID
aria-expanded - コラプスまたはサイドバーの可視状態（以下の注意点セクションを参照）

複数ターゲットに関する注意点

複数のターゲットが指定されている場合、個々のターゲットコンポーネントが（v-model、v-b-toggle ディレクティブを使用した他のコントロール、またはCSSの可視性によって）個別に折りたたまれた状態を制御できる場合、aria-expanded 属性の値が正しくない可能性があります。

ディレクティブリファレンス

個々のディレクティブのインポート

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

ディレクティブ	名前付きエクスポート	インポートパス
`v-b-toggle`	`VBToggle`	`bootstrap-vue`

例

import { VBToggle } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-toggle', VBToggle)

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

このプラグインには、上記のすべての個々のディレクティブが含まれています。

名前付きエクスポート	インポートパス
`VBTogglePlugin`	`bootstrap-vue`

例

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

概要