扩展面板

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

用例

Accordion expansion-panels can only have 1 panel open at a time.

API

v-expansion-panel
名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

Components.ExpansionPanels.

名称
expand
默认值
false
类型
boolean

选择另一个时,将扩展面板打开

名称
focusable
默认值
false
类型
boolean

使扩展面板标题可以调焦

名称
inset
默认值
false
类型
boolean

使扩展面板以嵌入的样式打开

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
popout
默认值
false
类型
boolean

使扩展面板以弹出的样式打开

名称
readonly
默认值
false
类型
boolean

Components.ExpansionPanels.

名称
value
默认值
null
类型
number | array

控制可见性

示例

扩展

扩展面板将保持打开知道被关闭。

External control

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If expand prop is used then it is an array of booleans where the index corresponds to the index of the content.

Disabled and readonly

Both the expansion-panel and its content supports the disabled and readonly props.

弹出与嵌入

扩展面板还有两种可以用属性popoutinset激活的替代设计

Custom icon

Expand action icon can be customized with expand-icon prop.

Icon slot

Expand action icon can be customized using actions slot.

调焦

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore