扩展面板 (Expansion panels)

v-expansion-panel 组件可以用来减少大片信息所占用的垂直方向空间。组件默认仅显示一个扩展面板（即打开一个会关闭另一个）；但你可以添加 multiple 属性，扩展面板则可以保持打开，直到主动关闭。

使用

扩展面板可以以最简单的形式展现可扩展展现的信息。你可以使用子组件的形式，亦可以使用 title 和 text 属性。

组件	描述
v-expansion-panels	主要组件
v-expansion-panel	用于包裹 `v-expansion-panel-text` 和 `v-expansion-panel-title` 的子组件
v-expansion-panel-title	用来显示扩展面板组件的标题的子组件。也可以用 `#title` 插槽实现。
v-expansion-panel-text	用来显示扩展面板组件的文字的子组件。也可以用 `#text` 插槽实现。

扩展面板有四种不同的变化形式。手风琴式 (Accordion) 扩展面板的展开面板没有外边距。内嵌式 (Inset) 扩展面板会减小展开面板的大小。而弹出式 (poput) 则会增大展开面板的大小。

扩展面板及其内容都可以使用 disabled 属性禁用。

扩展面板可以从外部由 v-model 控制。你需要在每个面板上设置 value 值，以便在组件外部控制它们的打开。如果组件设置了 multiple 属性，那么 v-model 的值将是数组。

readonly 属性的效果和 disabled 是相同的，但后者会影响样式，前者不会。

扩展面板组件为构建真正高级的组件实现提供了广阔的平台。下面是利用了 v-expansion-panel-header 组件里的插槽功能展现的例子，其中的内容可以随着扩展面板的打开和关闭产生淡入淡出的效果。

展开和收回的操作图标可以使用 expand-icon 属性和 collapse-icon 属性或 actions 插槽自定义。