Lists

The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

<PageFeatures />

Usage

Lists come in three main variations. single-line (default), two-line and three-line. The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

<ExamplesUsage name="v-list" /> <PromotedEntry />

API

Component	Description
v-list	Primary Component
v-list-group	Sub-component used to display or hide groups of items
v-list-subheader	Sub-component used to separate groups of items
v-list-item	Sub-component used to display a single item or modify the v-list state
v-list-item-title	Sub-component used to display the title of a list item. Wraps the #title slot
v-list-item-subtitle	Sub-component used to display the subtitle of a list item. Wraps the #subtitle slot
v-list-item-action	Sub-component used to display v-checkbox or v-switch
v-list-img	Sub-component that is used to wrap a the v-img component
v-list-item-media	Sub-component that is used to wrap a the v-img component

<ApiInline hide-links />

Examples

Props

Items

Lists can either be created by markup using the many sub-components that are available, or by using the items prop.

<ExamplesExample file="v-list/prop-items" />

To customize which properties will be used for the title and value of each item, use the item-title and item-value props.

<ExamplesExample file="v-list/prop-items-custom" />

If you need to render subheaders or dividers, add an item with a type property. Which property to use can be customized using the item-type prop.

<ExamplesExample file="v-list/prop-items-type" />

To customize individual items, you can use the item-props prop. It defaults to looking for a props property on the items. The value should be an object, and if found it will be spread on the v-list-item component.

If item-props is set to true then the whole item will be spread.

<ExamplesExample file="v-list/prop-items-prop" />

Density

v-list supports the density property.

<ExamplesExample file="v-list/prop-density" /> <PromotedPromoted slug="vuetify-lux-admin-pro" />

Disabled

You cannot interact with disabled v-list.

<ExamplesExample file="v-list/prop-disabled" />

Variant

v-list supports the variant prop.

<ExamplesExample file="v-list/prop-variant" />

Nav

Lists can receive an alternative nav styling that reduces the width v-list-item takes up as well as adding a border radius.

<ExamplesExample file="v-list/prop-nav" />

Rounded

You can make v-list items rounded.

<ExamplesExample file="v-list/prop-rounded" />

Shaped

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

<ExamplesExample file="v-list/prop-shaped" />

Sub group

Using the v-list-group component you can create sub-groups of items.

<ExamplesExample file="v-list/prop-sub-group" />

Three 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.

<ExamplesExample file="v-list/prop-three-line" />

Two lines and subheader

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

<ExamplesExample file="v-list/prop-two-line-and-subheader" />

Misc

Action and item groups

A three-line list with actions. Utilizing select-strategy, easily connect actions to your tiles.

<ExamplesExample file="v-list/misc-actions" />

Action with text

A list can contain additional meta information within an action.

<ExamplesExample file="v-list/misc-action-stack" />

Card list

A list can be combined with a card.

<ExamplesExample file="v-list/misc-card-list" />