# 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
# Caveats
If you are looking for stateful list items, please check out v-list-item-group.
# Examples
# Props
# Dense
v-list
can be lowered with dense property.
# Disabled
You cannot interact with disabled v-list
.
# Flat
Items don’t change when selected in v-list
with flat property.
# 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 up to 2 levels in depth using the sub-group prop.
# 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.
# Slots
# Expansion Lists
A list can contain a group of items which will display on click utilizing v-list-group
's activator
slot. Expansion lists are also used within the v-navigation-drawer component.
# Misc
# Action and item groups
A three-line list with actions. Utilizing v-list-item-group, easily connect actions to your tiles.
# Action stack
A list can contain a stack within an action. This is useful when you need to display meta text next to your action item.
# Card list
A list can be combined with a card.
# Simple avatar list
A simple list utilizing v-list-item-icon
, v-list-item-title
and v-list-item-avatar
.
# Single line list
Here we combine v-list-item-avatar and v-list-item-icon in a single-line list.
# Subheadings and dividers
Lists can contain multiple subheaders and dividers.