回報問題編輯此頁面

摺疊

輕鬆切換幾乎任何頁面內容在垂直摺疊容器中的可見性。其中包括手風琴支援。可見性可以用我們的 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 prop

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

v-model 支援

元件的摺疊 (可見) 狀態也可以利用 v-model 來設定，它會在內部繫結到 visible prop。

請注意，當使用 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 -->

觸發多個摺疊元素

你甚至可以使用一個 <b-collapse> 零件透過提供多個目標 ID，藉由單一 v-b-toggle 來摺疊多個 <b-collapse> 零件，應用修飾詞。

您還可以在 BootstrapVue 第 2.14.0 版中透過指示 value 傳遞多個目標 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 prop 提供手風琴群組識別碼，將一組 <b-collapse> 零件變成手風琴。請注意，手風琴群組中一次只有一個摺疊可以開啟。

<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 prop 與同一個變數綁定！
  • 請確保手風琴群組中最多只有一個 <b-collapse> 的 visible prop 和/或 v-model 設定為 true。手風琴群組中一次只能開啟一個摺疊。

根據摺疊狀態，隱藏和顯示切換按鈕中的內容

使用 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 的行為就像一個全域性事件發射器和偵聽器。可以在 官方 Vue 文件 中找到關於 $root 實例的詳細資訊。

透過 $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 屬性 aria-controls 和 aria-expanded 新增到該指令出現的那個元件（並在未展開時新增類別 collapsed）。 aria-expanded 會反映目標 <b-collapse> 元件的狀態，而 aria-controls 會設定成目標 <b-collapse> 元件的 ID。

如使用 v-model 設定顯示狀態，而非指令 v-b-toggle，您需要在切換元素手動新增 aria-controls 和其他適用的屬性和類別。

儘管指令 v-b-toggle 幾乎可置於任何 HTML 元素或 Vue 元件上，但建議使用按鈕或連結（或類似的元件）作為切換器。否則，您的觸發器元素可能會讓鍵盤或螢幕閱讀器使用者無法存取。如果您將它們置於按鈕或連結（或類似的元件）以外的地方，則應新增屬性 tabindex="0" 和 role="button" 以便輔助技術使用者存取您的觸發器元素。

使用手風琴模式時，請確定將觸發器元素和 <b-collapse> 元件置於具備 role="tablist" 的元素中，並針對每個觸發器元素的容器設定 role="tab"，以幫助螢幕閱讀器使用者瀏覽手風琴群組。遺憾的是，BootstrapVue 無法自動套用這些角色，因為這取決於文件最終的標記。

注意： 此元件的動畫效果取決於 prefers-reduced-motion 媒體查詢。有關其他詳細資料，請參閱我們的 無障礙文件中的減少動畫部分。

另請參閱

元件參考

<b-collapse>

檢視原始碼

屬性

所有屬性預設值皆可 進行全域設定。

屬性
類型
預設值
說明
accordion
字串此收合所屬的手風琴群組名稱
appear
v2.2.0+ 		布林值false設定後，且在安裝時 prop 'visible' 為 true，將會在首次安裝時動畫顯示
id
字串用於在已呈現的內容上設定 `id` 屬性，並用作根據需要產生任何其他元素 ID 的基礎
is-nav
布林值false設定後表示此收合屬於導覽列的一部分，能夠使用導覽列支援的多項特定功能
tag
字串'div'指定要呈現的 HTML 標籤，取代預設標籤
visible
v-model 		布林值false當為 'true' 時，展開收合

v-model

屬性
事件
visibleinput

插槽

名稱
作用域
說明
預設 v2.2.0+

事件

事件
參數
說明
bv::collapse::state
  1. id - 已變更的狀態摺疊 ID
  2. state - `true` 或 `false`，即開啟或關閉
當摺疊變更其狀態時在 $root 上發出
隱藏 當摺疊完成關閉時發出
隱藏 當摺疊開始關閉時發出
input
  1. 可見 - 如果摺疊可見，則為 true
用於更新 v-model
顯示 當摺疊開始開啟時發出
已顯示 當摺疊完成開啟時發出

$root 事件偵聽器

你可以透過在 $root 上發出下列事件來控制 <b-collapse>

事件
參數
說明
bv::toggle::collapse

id - 要切換的摺疊 ID

當此事件在 $root 上發出時，切換具有指定 ID 的摺疊的可見狀態

匯入個別元件

你可以透過下列命名匯出將個別元件匯入專案

元件
命名匯出
匯入路徑
<b-collapse>BCollapsebootstrap-vue

範例

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

以 Vue.js 外掛程式匯入

此外掛程式包含上述所列的所有個別元件. 外掛程式也包含任何元件別名。

命名匯出
匯入路徑
CollapsePluginbootstrap-vue

此外掛程式也會自動包含下列外掛程式

  • VBTogglePlugin

範例

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