Vuetify

Shop

Für Unternehmen

Listen

Die Komponente v-list kann strukturierte Informationen anzuzeigen. So kann sie neben dem Inhalt ein Avatar-Icon, Aktionsbereiche, Unterüberschriften und vieles mehr enthalten. Listen erleichtern das Erkennen einzelner Elemente in einer Sammlung. Sie bieten außerdem ein konsistentes Styling von Text- und Bild-Gruppen.

Nutzung

Die Listen werden in drei Varianten ausgeliefert: einzeilig (Standard), zweizeilig und dreizeilig. Die Zeilendeklaration legt die minimale Höhe des Elements fest und kann auch von v-list mit dem selben Prop gesteuert werden.

API

Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.

Beispiele

Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.

You cannot interact with disabled v-list.

Shaped lists have rounded borders on one side of the v-list-item.

v-list can be lowered with dense property.

Items don't change when selected in v-list with flat property.

You can make v-list items rounded.

Lists also contain slots for a more explicit approach. If you choose this approach, remember you must provide additional props for correct spacing. In this example, we have a title with an avatar, so we must provide an avatar property.

Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.

Here we combine v-list-item-avatar and v-list-item-icon in a single-line list.

Using the v-list-group component you can create up to 2 levels in depth using the sub-group prop.

Lists can contain multiple subheaders and dividers.

A list can be combined with a card.

A list can contain a stack within an action. This is useful when you need to display meta text next to your action item.

A three-line list with actions. Utilizing v-list-item-group, easily connect actions to your tiles.

A list can contain a group of items which will display on click. Expansion lists are also used within the v-navigation-drawer component.

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