List

v-list компонент используется для отображения информации. Он может содержать аватар, контент, действия, подзаголовки и многое другое. Списки могут содержать детей и использоваться на боковой панели(sidebar).

Применение

Lists can take an array of list items. When given an array, the list component will figure out the classes that are needed depending on what it was given. You can also define headers or dividers within the items array.

API

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
dense
По умолчанию
false
Тип
boolean

Уменьшает максимальную высоту списков

Имя
expand
По умолчанию
false
Тип
boolean

Будет только скрываться при явном закрытии

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
subheader
По умолчанию
false
Тип
boolean

Удаляет верхний padding. Используется, когда предыдущий sibling является заголовком

Имя
three-line
По умолчанию
false
Тип
boolean

Увеличивает высоту списка для трёх линий

Имя
two-line
По умолчанию
false
Тип
boolean

Увеличивает высоту списка для двух линий

Примеры

Аватар с заголовком и действием

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

Иконка с 2 строками и действием

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

Аватар с 3 строчками

Для трёх линейных списков, субтитры будут зажимать вертикально на 2 строки, а затем на многоточие. Если вам требуется более 3 строк, рекомендуется использовать card.

Аватар с заголовком и действием

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

Подзаголовки и разделители

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

Изображение карты с панелью инструментов и списком

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

Заголовок с sub-title, actions и action-text

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

Действие с заголовком и подзаголовком

Список может содержать до 3 строк.

Расширение списков

Список может содержать группу элементов, которые будут отображаться при нажатии. Расширение списков также используются в компоненте navigation drawer.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore