Панель расширения

Компонент v-expand-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.

Всплывающее Окно & Вставка

Панель расширения также имеет два альтернативных варианта, которые вы можете активировать с помощью popout и inset.

Пользовательские иконки

Расширенные иконки действий можно настроить с помощью 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