折叠面板(Collapse)

轻松切换页面上几乎所有内容的可见性。 包括对制作手风琴的支持。

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

初始可见性（开始扩展）

要使 <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 时），请将 appear 道具设置为 <b-collapse> 。

v-model 支持

组件的折叠（可见）状态也可以使用 v-model 设置，该 v-model 在内部绑定到 visible 属性。

请注意，使用 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> 组件：

<div>
  <!-- Single button triggers two "<b-collapse>" components -->
  <b-button v-b-toggle.collapse-a.collapse-b>Toggle Both 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> 组件转变为手风琴。请注意，一次手风琴组中只有一个折叠可以打开。

<template>
  <div role="tablist">
    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block href="#" 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 href="#" 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 href="#" 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" （每个触发元素都应包装） 帮助屏幕阅读器用户浏览手风琴组。
  • 如果在手风琴模式下使用 v-model 的功能，请勿将手风琴组中所有折叠的 v-model 或 visible 属性绑定到同一变量！
  • 确保在手风琴组中最多只有一个 <b-collapse> 将 visible 属性和/或 v-model 设置为 true。一次只能打开手风琴组中的一个折叠。

根据折叠状态在切换按钮中隐藏和显示内容

当使用 v-b-toggle 指令时，collapsed 类将在折叠关闭时自动放置在触发元素上，并在打开时自动删除。 您可以使用此类通过自定义CSS在切换中显示或隐藏内容：

HTML标记示例：

<div>
  <b-button v-b-toggle.my-collapse>
    <span class="when-opened">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-opened,
:not(.collapsed) > .when-closed {
  display: none;
}

'Global' $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')

可选范围的默认插槽

New in v2.2.0

默认插槽可以选择范围。 以下作用域属性可用：

属性 类型 描述
visible Boolean 可见的折叠状态
close Function 当被调用时，将关闭折叠

辅助功能

v-b-toggle 指令将自动将ARIA属性 aria-controls 和 aria-expanded 添加到该指令出现的组件上（以及添加未扩展时 collapsed 类）。aria-expanded 将反映目标 <b-collapse> 组件的状态，而 aria-controls 将设置为目标 <b-collapse> 组件的ID。

如果使用 v-model 而不是指令 v-b-toggle 来设置可见状态，则需要在 toggle 元素上自己添加 aria-controls 和其他适当的属性和类。

尽管 v-b-toggle 指令几乎可以放置在任何HTML元素或Vue组件上，但建议使用按钮或链接（或类似组件）作为切换器。 否则，键盘或屏幕阅读器用户可能无法访问触发器元素。 如果确实将它们放置在按钮或链接（或类似组件）以外的其他物体上，则应添加属性 tabindex="0" 和 role="button" 以允许辅助技术的用户使用触发元素。

使用手风琴模式时，请确保将触发元素和 <b-collapse> 组件放置在具有 role="tablist" 的元素内，并在每个触发元素的容器上设置 role="tab" ，以帮助屏幕阅读器用户浏览手风琴组。不幸的是，BootstrapVue无法自动为您应用这些角色，因为这取决于您的最终文档标记。

组件参考

<b-collapse>

查看源代码

属性

属性 类型 默认值 描述
id String 用于在呈现的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
is-nav Boolean false 设置时，表示折叠是导航栏的顶部，启用某些功能以支持导航栏
accordion String 该折叠所属的手风琴组的名称
visible v-model Boolean false 当为“ true”时，扩展折叠
tag String 'div' 指定要呈现的HTML标签，而不是默认标签
appear v2.2.0+ Boolean false 设置后，'visible' 属性在挂载时为 true ，将在初始挂载时设置动画

v-model

属性 事件
visible input

插槽

插槽名称 描述 范围
default v2.2.0+

Events

事件 参数 描述
input
  1. visible - 如果折叠可见，则为 true
 用于更新 v-model
show 折叠开始打开时发出
shown 折叠完成打开时发出
hide 折叠开始关闭时发出
hidden 折叠完成关闭时发出
bv::collapse::state
  1. id - 更改状态折叠ID
  2. state - true 或 false，即打开或关闭
 折叠更改其状态时在 $root 上发出

$root 事件监听器

您可以通过在 $root 上发出以下事件来控制 <b-collapse> ：

事件 参数 描述
bv::toggle::collapse

id - 折叠ID进行切换

 在$root上发出此事件时，以指定的ID切换可见的折叠状态

导入单个组件

您可以通过以下指定的导出将各个组件导入到您的项目中：

组件 命名输出 导入路径
<b-collapse> BCollapse bootstrap-vue

示例：

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

导入单个指令

您可以通过以下命名的导出将单个指令导入到您的项目中：

指令 命名输出 导入路径
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插件导入

该插件包括上面列出的所有单个组件和指令。插件还包括任何组件别名。

命名输出 导入路径
CollapsePlugin bootstrap-vue

示例：

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