Элементы списка

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

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

значок выноски
Компонент «Сетки»
Сетки обеспечивают альтернативный режим отображения, выделяя изображения.

Анатомия

В представлении списка каждая строка содержит плитку, представляющую один элемент списка. Основные действия могут заполнять плитку, чтобы пользователи могли инициировать действие из любой точки плитки. Для дополнительных действий, представленных значками и текстом, доступна только область, содержащая значки и текст.

1. Основной значок
2. Кнопка включения
3. Кнопка выключателя выключена.
4. Первичный и вторичный текст
5. Плитка контента

Характеристики

значок выноски
Метки макета
Определения E, M, KL, P, Flex

Однострочный элемент списка

Элемент списка в две строки

Элемент двухстрочного списка перевернут

Элемент многострочного списка с заголовком

Элемент многострочного списка без заголовка

Элемент списка с переполнением текста

Элемент списка с разделенными действиями

Размещение значка индикатора в элементах списка


Масштабирование макетов

Эти эталонные макеты показывают, как адаптировать элементы списка для размещения на экранах различной ширины и высоты. (Категории ширины и высоты определяются в разделе «Макет» .) Обратите внимание, что все значения пикселей находятся в визуализированных пикселях до того, как произойдет какая-либо понижающая или повышающая дискретизация.

значок выноски
Макет
Поля, ключевые линии и отступы для экранов различных размеров.
значок выноски
Метки макета
Определения E, M, KL, P, Flex

Стандартные, широкие и сверхширокие экраны

Стандартный, широкий и сверхширокий экраны с плиткой контента

Сверхширокие экраны


Стили

значок выноски
Рекомендации по типографике
Ссылки на масштаб и сетку, типографские примеры и многое другое.
значок выноски
Рекомендации по цвету
Палитры, значения высоты и непрозрачности и многое другое.

Типография

Тип стиля Гарнитура Масса Размер (дп)
Тело 1 Робото Обычный 32
Тело 3 Робото Обычный 24

Цвет

Элемент Цвет (дневной режим) Цвет (ночной режим)
Основной тип/значки Белый Белый @ 88%
Вторичный тип/значки Белый @ 72% Белый @ 60%
Разделительная линия Белый @ 22% Белый @ 12%
Фон элемента списка Черный Черный

Размеры

Элемент Размер (дп)
Высота элемента списка 96 (короткие экраны) / 116 (стандартный экран) / 128 (высокий экран)
Основной значок 44
Третичный значок 24
Плитка контента Высота элемента списка минус 1 dp
Средний аватар 76
Толщина разделительной линии 1

Примеры

Список настроек – день
Список настроек – ночь
Список настроек – день
Список настроек – ночь
Список СМИ - день
Список СМИ - ночь