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
Применяет тёмный вариант темы
Уменьшает максимальную высоту списков
Будет только скрываться при явном закрытии
Применяет светлый вариант темы
Удаляет верхний padding. Используется, когда предыдущий sibling является заголовком
Увеличивает высоту списка для трёх линий
Увеличивает высоту списка для двух линий
Примеры
Аватар с заголовком и действием
Списки также содержат слоты для более чёткого подхода. Если вы выберете этот подход, помните, что вы должны предоставить дополнительные пропсы для правильного интервала. В этом примере у нас есть плитка с аватаром, поэтому мы должны предоставить свойство avatar
.
Иконка с 2 строками и действием
Списки могут содержать подзаголовки, разделители и могут содержать 1 или более строк. Подзаголовок будет дополняться с помощью многоточия, если он не вмещается в одну строку.
Аватар с 3 строчками
Для трёх линейных списков, субтитры будут зажимать вертикально на 2 строки, а затем на многоточие. Если вам требуется более 3 строк, рекомендуется использовать card.
Аватар с заголовком и действием
Когда используется слот списков, вы должны вручную определить, содержит ли он заголовки, или если элементы содержат аватар. Это необходимо для поддержания правильного расстояния.
Подзаголовки и разделители
Списки могут содержать несколько подзаголовков и разделителей.
Изображение карты с панелью инструментов и списком
Список можно комбинировать с картой.
Заголовок с sub-title, actions и action-text
Список может содержать стек внутри действия. Ripple и router пропсы могут передаваться через главный v-list
, в v-list-tile
или как свойство в массиве items.
Действие с заголовком и подзаголовком
Список может содержать до 3 строк.
Расширение списков
Список может содержать группу элементов, которые будут отображаться при нажатии. Расширение списков также используются в компоненте navigation drawer
.