List

The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists can contain children and are used in the sidebar.

Usage

Lists can take an array of list items. When given an array, the list component will figure out the classes that are needed depending on what it was given. You can also define headers or dividers within the items array.

API

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
dense
Default
false
Type
boolean

Components.Lists.

Name
expand
Default
false
Type
boolean

Components.Lists.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
subheader
Default
false
Type
boolean

Components.Lists.

Name
three-line
Default
false
Type
boolean

Components.Lists.

Name
two-line
Default
false
Type
boolean

Components.Lists.

Examples

Avatar with title and action

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 tile with an avatar, so we must provide an avatar property.

Icon with 2 lines and action

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

Avatar with 3 lines

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. If you need more than 3 lines, it is advised to use a card.

Avatar with title and action

When a lists slot is used, you must manually define whether it contains headers, or if the items contain an avatar. This is required to maintain proper spacing.

Subheadings and dividers

Lists can contain multiple subheaders and dividers.

Card image with toolbar and list

A list can be combined with a card.

Title with sub-title, actions and action-text

A list can contain a stack within an action. Ripple and router props can be passed through the main v-list, to the v-list-tile or as a property in the items array.

Action with title and sub-title

A list can contain up to 3 lines.

Expansion Lists

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

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