Expansion Panel
El componente v-expansion-panel es útil para reducir el espacio vertical cuando hay grandes cantidades de información. La funcionalidad default es que el componente sólo despliega un contenido de expansion-panel a la vez. Sin embargo, con la prop expandable, el expansion-panel puede permanecer abierto hasta que sea explicitamente cerrado por el usuario.
API
Aplica la variante del tema dark
Components.ExpansionPanels.
Mantiene el expansion-panel abierto cuando se selecciona algún otro
Hace que los headers del expansion panel sean enfocables
Hace que el expansion panel abra con un estilo inset
Aplica la variante del tema light
Hace que el expansion panel abra con un estilo popup
Components.ExpansionPanels.
Controla la visibilidad
Ejemplos
Expand
Expand expansion-panels will stay open until closed. When providing a model, any value not specified will be interpreted as false.
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
The expansion-panel also has two alternative designs you can activate with the props popout and inset.
Custom icon
Expand action icon can be customized with expand-icon prop.
Icon slot
Expand action icon can be customized using actions slot.
Focusable
The expansion-panel headers can be made focusable with the prop focusable.