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.
<v-list lines="one">
<v-list-item
v-for="n in 3"
:key="n"
:title="'Item ' + n"
subtitle="Lorem ipsum dolor sit amet consectetur adipisicing elit"
></v-list-item>
</v-list>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 |
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-clamp and 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 select-strategy, easily connect actions to your tiles.
Action with text
A list can contain additional meta information within an action.
Card list
A list can be combined with a card.