折りたたみ

ページ上のほぼすべてのコンテンツの表示/非表示を、垂直に折りたたまれるコンテナ内で簡単に切り替えることができます。アコーディオンの作成にも対応しています。v-b-toggleディレクティブまたはv-modelを使用して、表示/非表示を簡単に切り替えることができます。

<div>
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

<!-- b-collapse.vue -->

使用方法

他の要素は、v-b-toggleディレクティブを使用して<b-collapse>コンポーネントの表示/非表示を簡単に切り替えることができます。

<div>
  <!-- Using modifiers -->
  <b-button v-b-toggle.collapse-2 class="m-1">Toggle Collapse</b-button>

  <!-- Using value -->
  <b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>

  <!-- Element to collapse -->
  <b-collapse id="collapse-2">
    <b-card>I am collapsible content!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-usage.vue -->

詳細な使用方法については、v-b-toggleディレクティブのドキュメントを参照してください。

初期表示（展開して開始）

<b-collapse>を最初に表示するには、visibleプロパティを設定します。

<div>
  <b-button v-b-toggle.collapse-3 class="m-1">Toggle Collapse</b-button>
  <b-collapse visible id="collapse-3">
    <b-card>I should start open!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-visible.vue -->

デフォルトでは、最初に表示される折りたたみは、マウント時にアニメーションしません。visibleまたはv-modelがtrueの場合に、マウント時の折りたたみ展開アニメーションを有効にするには、<b-collapse>にappearプロパティを設定します。

`v-model`サポート

コンポーネントの折りたたみ済み（表示）状態は、visibleプロパティに内部的にバインドするv-modelを使用して設定することもできます。

v-modelを使用して<b-collapse>を制御する場合、aria-*属性とクラスcollapsedは、トリガーボタンには自動的に配置されません（v-b-toggleディレクティブを使用する場合とは異なります）。この例では、適切なアクセシビリティサポートのために、属性を自分で制御する必要があります。

<template>
  <div>
    <b-button
      :class="visible ? null : 'collapsed'"
      :aria-expanded="visible ? 'true' : 'false'"
      aria-controls="collapse-4"
      @click="visible = !visible"
    >
      Toggle Collapse
    </b-button>
    <b-collapse id="collapse-4" v-model="visible" class="mt-2">
      <b-card>I should start open!</b-card>
    </b-collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true
      }
    }
  }
</script>

<!-- b-collapse-v-model.vue -->

複数の折りたたみ要素のトリガー

修飾子を使用して複数のターゲットIDを提供することで、単一のv-b-toggleを使用して、複数の<b-collapse>コンポーネントを折りたたむこともできます。

BootstrapVueリリースv2.14.0以降では、ディレクティブの値を介して複数のターゲットIDを渡すこともできます。

<div>
  <!-- Via multiple directive modifiers -->
  <b-button v-b-toggle.collapse-a.collapse-b>Toggle Collapse A and B</b-button>

  <!-- Via space separated string of IDs passed to directive value -->
  <b-button v-b-toggle="'collapse-a collapse-b'">Toggle Collapse A and B</b-button>

  <!-- Via array of string IDs passed to directive value -->
  <b-button v-b-toggle="['collapse-a', 'collapse-b']">Toggle Collapse A and B</b-button>

  <!-- Elements to collapse -->
  <b-collapse id="collapse-a" class="mt-2">
    <b-card>I am collapsible content A!</b-card>
  </b-collapse>
  <b-collapse id="collapse-b" class="mt-2">
    <b-card>I am collapsible content B!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-trigger-multiple.vue -->

アコーディオンサポート

accordionプロパティを介してアコーディオングループ識別子を指定することにより、複数の<b-collapse>コンポーネントをアコーディオンに変換できます。アコーディオングループでは、一度に開くことができる折りたたみは1つだけです。

<template>
  <div class="accordion" role="tablist">
    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
      </b-card-header>
      <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
      </b-card-header>
      <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
      </b-card-header>
      <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: `
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
          richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
          brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
          tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
          wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
          vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
          synth nesciunt you probably haven't heard of them accusamus labore VHS.
        `
      }
    }
  }
</script>

<!-- b-accordion.vue -->

注記

アコーディオンモードを使用する場合は、トリガー要素と<b-collapse>コンポーネントをrole="tablist"を持つ要素内に配置し、各トリガー要素のコンテナにrole="tab"を設定してください（各トリガー要素をラップする必要があります）。これにより、スクリーンリーダーユーザーがアコーディオングループを簡単に操作できるようになります。
アコーディオンモードで<b-collapse>のv-model機能を使用する場合は、アコーディオングループ内のすべての折りたたみのv-modelまたはvisibleプロパティを同じ変数にバインドしないでください。
アコーディオングループでは、visibleプロパティとv-modelがtrueに設定されている<b-collapse>は、最大1つにする必要があります。アコーディオングループでは、一度に開くことができる折りたたみは1つだけです。

折りたたみ状態に基づいてトグルボタンのコンテンツの表示/非表示を切り替える

v-b-toggleディレクティブを使用すると、折りたたみが閉じている場合、クラスcollapsedがトリガー要素に自動的に配置され、開いている場合は削除されます。このクラスを使用して、カスタムCSSを介してトグル内のコンテンツの表示/非表示を切り替えることができます。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;
}

'グローバル' $rootインスタンスイベント

$rootインスタンスを使用すると、<b-collapse>が使用されているコンポーネントの外でイベントを発行およびリッスンすることができます。簡単に言うと、$rootはグローバルイベントエミッターおよびリスナーのように動作します。$rootインスタンスの詳細については、公式Vueドキュメントを参照してください。

$rootイベントを介した折りたたみ状態の変化のリッスン

折りたたみ状態の変化をリッスンするには、以下を使用します。

export default {
  mounted() {
    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
      console.log('collapseId:', collapseId)
      console.log('isJustShown:', isJustShown)
    })
  }
}

ここで、collapseIdは状態が変更された折りたたみのIDです。isJustShownはtrue/false、つまり表示/非表示の折りたたみです。

$rootイベントを介した折りたたみの切り替え

特定の折りたたみを表示/非表示を切り替えるには、折りたたみのidを渡します。

this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')

オプションでスコープされたデフォルトスロット

v2.2.0の新機能

デフォルトスロットはオプションでスコープできます。次のスコーププロパティを使用できます。

プロパティ	型	説明
`visible`	ブール値	折りたたみの表示状態
`close`	関数	呼び出されると、折りたたみを閉じます

アクセシビリティ

v-b-toggleディレクティブは、ディレクティブが表示されるコンポーネントにaria-controlsとaria-expandedのARIA属性を自動的に追加します（展開されていない場合はクラスcollapsedも追加します）。aria-expandedはターゲット<b-collapse>コンポーネントの状態を反映し、aria-controlsはターゲット<b-collapse>コンポーネントのIDに設定されます。

ディレクティブv-b-toggleの代わりにv-modelを使用して表示状態を設定する場合は、トグル要素にaria-controlsおよびその他の適切な属性とクラスを自分で追加する必要があります。

v-b-toggleディレクティブはほぼすべてのHTML要素またはVueコンポーネントに配置できますが、トグルとしてボタンまたはリンク（または同様のコンポーネント）を使用することをお勧めします。そうでない場合、トリガー要素はキーボードやスクリーンリーダーユーザーにとってアクセスできない可能性があります。ボタンまたはリンク（または同様のコンポーネント）以外の要素に配置する場合は、属性tabindex="0"とrole="button"を追加して、支援技術のユーザーがトリガー要素にアクセスできるようにする必要があります。

アコーディオンモードを使用する場合は、トリガー要素と<b-collapse>コンポーネントをrole="tablist"を持つ要素内に配置し、スクリーンリーダーユーザーがアコーディオングループを簡単に操作できるように、各トリガー要素のコンテナにrole="tab"を設定してください。残念ながら、BootstrapVueは最終的なドキュメントのマークアップに依存するため、これらの役割を自動的に適用することはできません。

注記：このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。詳細については、アクセシビリティドキュメントの低モーションセクションを参照してください。

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

`<b-collapse>`

ソースコードを見る

<b-collapse> プロパティ
<b-collapse> v-model
<b-collapse> スロット
<b-collapse> イベント
<b-collapse> $root イベントリスナー

プロパティ

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

プロパティ	型	デフォルト	説明
`accordion`	`文字列`		この折りたたみするものが属するアコーディオングループの名前
`appear` v2.2.0+	`ブール値`	`false`	設定されている場合、マウント時にプロパティ 'visible' が true のときは、初期マウント時にアニメーションします。
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`is-nav`	`ブール値`	`false`	設定されている場合、折りたたみ部分がナビゲーションバーの一部であることを示し、ナビゲーションバーのサポートのために特定の機能を有効にします。
`tag`	`文字列`	`'div'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します。
`visible` v-model	`ブール値`	`false`	'true'の場合、折りたたみは展開されます。

`v-model`

プロパティ	イベント
`visible`	`input`

スロット

名前	スコープ付き	説明
`default` v2.2.0+

イベント

イベント	引数	説明
`bv::collapse::state`	`id` - 状態が変更された折りたたみのID `state` - `true`または`false`、つまり開いているか閉じているか	折りたたみが状態を変更したときに$rootで発生します。
`hidden`		折りたたみ完了時に発生します。
`hide`		折りたたみ開始時に発生します。
`input`	`visible` - 折りたたみが表示されている場合はtrueになります。	v-modelを更新するために使用されます。
`show`		折りたたみ開始時に発生します。
`shown`		折りたたみ完了時に発生します。

`$root` イベントリスナー

<b-collapse>は、$rootで次のイベントを発生させることで制御できます。

イベント	引数	説明
`bv::toggle::collapse`	`id` - トグルする折りたたみのID	$rootでこのイベントが発生すると、指定されたIDの折りたたみの表示状態が切り替わります。

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

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

コンポーネント	名前付きエクスポート	インポートパス
`<b-collapse>`	`BCollapse`	`bootstrap-vue`

例

import { BCollapse } from 'bootstrap-vue'
Vue.component('b-collapse', BCollapse)

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

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

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

このプラグインは、次のプラグインも自動的に含みます。

VBTogglePlugin

例

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