Для бизнеса

The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.

Expansion panels in their simplest form display a list of expandable items.

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

Both the expansion-panel and its content can be disabled using the disabled prop.

readonly prop does the same thing as disabled, but it doesn't touch styles.

The expansion-panel also has popout design. With it, expansion-panel is enlargened when activated.

inset expansion-panel becomes smaller when activated.

accordion expansion-panel hasn't got margins around active panel.

На заголовок панели можно сделать фокус с помощью свойства focusable.

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 multiple prop is used then it is an array containing the indices of the open items.

Расширенные иконки действий можно настроить с помощью expand-icon prop.

The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.

Готовы к большему? Продолжить чтение с:

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