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.
If you are looking for stateful list items, please check out v-list-item-group.
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.
Ниже приведена коллекция простых и сложных примеров.
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.
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 title with an avatar, so we must provide an avatar property.
Списки могут содержать подзаголовки, разделители и могут содержать 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.
Готовы к большему? Продолжить чтение с: