List — компонент универсального списка, который представляет собой контейнер и строки данных, упорядоченные в один вертикальный столбец. Компонент отсортировывает внутри себя дочерние элементы list-item с поддержкой разных размеров, и позволяет фильтровать их, а также управлять выделением с клавиатуры.

§Структура List

➊ Область фильтра

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

➌ Полоса прокрутки (скроллбар)

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

§Структура list-item

➊ Иконка сортировки

➋ Иконка элемента

➌ Текстовый блок

➍ Кнопка дополнительного действия (отображается по ховеру)

§Размер

Элемент списка (List-item)

Все элементы списка поддерживают отрисовку в 4 размерах: S, M, L и XL. Размеры и отступы соответствуют элементам библиотеки, с которыми взаимодействует компонент, — например, select, input, button, которые поддерживают аналогичные переменные размерности.

Список (List)

По умолчанию ширина компонента List динамическая и рассчитывается по ширине самого длинного элемента в списке. Опционально ширина может быть задана с фиксированным значением или наследовать ширину объекта, который вызвал отображение списка (select, input).

§Состояния

§Виды контента

§Возможности List-item

Поддержка нескольких иконок

Все элементы list-item поддерживают отображение одной или нескольких иконок по левому и правому краю компонента.

Изменение порядка сортировки

Для элементов списка можно активировать сортировку. По умолчанию иконка сортировки всегда отображается в начале списка.

§Возможности List

Настраиваемая высота общего контейнера списка

Высота элементов списка или функция, возвращающая значение высоты, может быть задана динамически или указана точным значением в px. Если элементы списка не умещаются по высоте, появляется скрол-бар. Высота может быть задана вручную или изменена динамически.

Единичный и множественный выбор

Компонент поддерживает как одиночный, так и множественный выбор элементов.

Фильтрация и поиск

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

Триггеры вызова

По умолчанию компонент List вызывается по взаимодействию с другими элементами на странице, такими как Select, Label, Button, а также используется в качестве саджеста у компонента Input.

Виртуализация

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