切換

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 屬性另行指定。

請注意，瀏覽器網址會變更，且頁面可能會將目標捲動至可見狀態。若要避免網址變更，且避免頁面捲動，請將 @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 屬性的值可能不正確。

請另見

<b-collapse> 支援手風琴的展開式內容
<b-sidebar> 離畫布側邊欄
<b-navbar-toggle> 導覽列漢堡切換按鈕（根據 v-b-toggle 指令）

指令參考

匯入個別指令

你可以透過以下的命名匯出，匯入個別的指令到你的專案中

指令	命名匯出	匯入路徑
`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)