Магазин

Для бизнеса

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.

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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

You cannot interact with disabled v-list.

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

v-list can be lowered with dense property.

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

You can make v-list items rounded.

Списки также содержат слоты для более чёткого подхода. Если вы выберете этот подход, помните, что вы должны предоставить дополнительные пропсы для правильного интервала. В этом примере у нас есть плитка с аватаром, поэтому мы должны предоставить свойство avatar.

Списки могут содержать подзаголовки, разделители и могут содержать 1 или более строк. Подзаголовок будет дополняться с помощью многоточия, если он не вмещается в одну строку.

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.

Когда используется слот списков, вы должны вручную определить, содержит ли он заголовки, или если элементы содержат аватар. Это необходимо для поддержания правильного расстояния.

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

Списки могут содержать несколько подзаголовков и разделителей.

Список можно комбинировать с картой.

Список может содержать стек внутри действия. Ripple и router пропсы могут передаваться через главный v-list, в v-list-item или как свойство в массиве items.

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

A list can contain a group of items which will display on click. Expansion lists are also used within the v-navigation-drawer component.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!