Vuetify

商店

企业版

v-expansion-panel 组件对于减少大量信息的垂直空间非常有用。该组件的默认功能是一次仅显示一个展开面板主题。但是使用 expandable 属性后,扩展面板会保持打开状态,直到被显式关闭。

最简单的扩展面板显示可扩展项目的列表。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

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

readonly 属性做了与 disabled 相同的事情,但不涉及样式。

扩展面板还具有 popout 设计。 有了它,激活后扩展面板就会扩大。

inset 激活时的扩展面板将会变得更小。

accordion 激活时,当前扩展面板将不会产生边距。

扩展面板头部可以通过 focusable 属性进行聚焦。

扩展面板可以通过修改 v-model 从外部进行控制。 它的值对应于当前打开的扩展面板内容的从零开始的索引。 如果使用 multiple 属性,那么它是一个包含未清项目索引的数组。

展开动作的图标可以通过 expand-icon 属性或 actions 插槽进行自定义。

扩展面板组件为构建真正高级的实现提供了丰富的平台。在这里,我们利用 v-expansion-panel-header 组件中的插槽,通过淡入淡出内容来响应打开或关闭的状态。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!