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.

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.


API

ComponentDescription
v-listPrimary Component
v-list-groupSub-component used to display or hide groups of items
v-list-subheaderSub-component used to separate groups of items
v-list-itemSub-component used to display a single item or modify the v-list state
v-list-item-titleSub-component used to display the title of a list item. Wraps the #title slot
v-list-item-subtitleSub-component used to display the subtitle of a list item. Wraps the #subtitle slot
v-list-item-actionSub-component used to display v-checkboxor v-switch
v-list-imgSub-component that is used to wrap a the v-imgcomponent
v-list-item-mediaSub-component that is used to wrap a the v-imgcomponent

Examples

Props

Items

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

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

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.

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.

Density

v-list supports the density property.

Disabled

You cannot interact with disabled v-list.

Variant

v-list supports the variant prop.

Rounded

You can make v-list items rounded.

Shaped

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

Sub group

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

Three line

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

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.

Misc

Action and item groups

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub