v-list 컴포넌트는 정보를 표시하는데 사용됩니다. 이는 아바타, 컨텐츠, 액션, 서브헤더 그리고 많은 것을 포함합니다. 리스트는 자식들을 가질 수 있고 사이드바에서 사용될 수도 있습니다.


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.



Disabled lists

You cannot interact with disabled v-list.

Shaped lists

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


v-list can be lowered with dense property.

플랫 (Flat)

Items don't change when selected in v-list with flat property.


You can make v-list items rounded.

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. This feature uses line-clamp and is not supported in all browsers.

Avatar with title and action

Here we combine v-list-item-avatar and v-list-item-icon in a single-line list.

Nested lists

Using the v-list-group component you can create up to 2 levels in depth using the sub-group prop.

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. This is useful when you need to display meta text next to your action item.

Action with title and sub-title

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

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
상점For Enterprise