Правильно
Отбор сверху, страницы снизу, действия в строке
Контролы отбора и применённые фильтры разделены, строка несёт частые действия, переход по страницам стоит под выдачей.
Список сущностей
Список показывает однородные сущности, даёт сузить выдачу и перейти к любой из них. Строка сама несёт частые действия, поэтому за мелкой правкой не нужно открывать сущность целиком.
Статус: experimental · в системе с 2026-08
Когда использовать
- Однородных сущностей больше, чем помещается на экран, и человек ищет среди них нужную.
- Частые действия — включение, смена цены, дубль — делаются прямо из строки.
Не использовать:
- Сущностей единицы и отбор не нужен.
- Записи разнородны и не сравниваются по общим колонкам.
- Нужна одна сущность целиком — это «Редактор сущности».
Состав
| Юнит или компонент | Роль |
|---|---|
entity-id | Идентификатор записи в строке. |
popover-preview | Миниатюра креатива с раскрытием в строке. |
segmented-control | Переключение представления выдачи: строки или таблица. |
title | Заголовок блока отбора, выдачи или сводки над списком. |
label | Подпись группы фильтров, счётчика или значения в строке. |
user-line | Владелец или автор сущности в строке выдачи и ячейке таблицы. |
card | Именованный блок отбора или группы строк с дочерними узлами. |
island | Поверхность региона без заголовка: блок фильтров, сводка над таблицей. |
chart | Схематичная динамика над списком: форма тренда за период отбора. |
textarea | Длинное значение в отборе или быстрой правке строки: список идентификаторов, комментарий. |
input-number | Числовая граница отбора: ставка, лимит, порог показателя. |
drag-and-drop | Порядок строк, который задаёт человек: приоритет в списке отбора. |
select-toggle | Отбор значений режимом «включить или исключить» над выдачей. |
user-card | Владелец строки: имя и идентификатор пользователя в выдаче. |
action-panel | Ряд отбора над списком: контролы в теле, выбранные фильтры чипами в слоте. |
select | Сортировка и размер страницы. |
input | Поиск по выдаче и переход к номеру страницы. |
combobox | Отбор по значению из длинного справочника. |
multi-select | Отбор сразу по нескольким значениям. |
input-date-range | Отбор по периоду: даты создания, активности, отчёта. |
toolbar | Команды над выдачей одной строкой: обновить, настроить колонки, сменить представление. |
toggle-button | Режим выдачи, который включают и выключают: закреплённый фильтр, настройка колонок. |
flipper | Направление сортировки и другие циклические режимы выдачи в тулбаре. |
tag | Применённые фильтры и метки строки. |
table | Табличное представление выдачи. |
status | Состояние сущности в строке. |
indicator | Счётчики выбранного в панели массовых действий и состояние строки одной точкой, когда подпись Status избыточна. |
icon | Значок состояния в строке и ячейке: скрыто у превью, ошибка у значения. |
thumbnail | Миниатюра превью креатива в строке и ячейке выдачи; скрытое превью — значок EyeSlash в рамке. |
extra-group | Сводные счётчики строки через слеш: показы, клики, лимиты. |
switch | Включение сущности прямо из строки. |
checkbox | Выбор строки для массового действия; в таблице — первая колонка. |
checkbox-group | Набор признаков в панели над выдачей: видимые колонки таблицы, режимы отбора. |
avatar | Владелец сущности в строке. |
divider | Граница между частями строки или группами выдачи. |
pagination | Переход между страницами выдачи. |
alert | Причина пустой или неполной выдачи. |
link | Переход к сущности и к связанным разделам. |
button | Создание сущности, отбор, обновление выдачи и действия строки. |
menu | Остальные действия строки за одной кнопкой: дубль, добавить креатив, архив — поверх выдачи. |
popover | Быстрая правка одного значения прямо из строки: цена, пополнение — поверх выдачи. |
tooltip | Пояснение к значению или значку строки по наведению — поверх выдачи. |
dialog | Подтверждение архивации или другого необратимого действия над строкой — поверх выдачи. |
drawer | Отбор, который не помещается в ряд: поля фильтров панелью поверх выдачи. |
column-settings | Состав и порядок колонок таблицы — поверх выдачи, по кнопке в ряду отбора. |
entities-list-dialog | Массив значений строками поверх поля отбора: список id, доменов, площадок. |
toast | Результат действия над строкой без ухода из выдачи — поверх выдачи. |
Ограничения
- Обязательно: Держать отбор над выдачей, а переход по страницам — под ней: человек сначала сужает, потом листает.
- Обязательно: Показывать панель массовых действий только при выбранных строках и называть в ней, сколько и чего выбрано: действие над невидимым набором — ошибка.
- Обязательно: Показывать применённые фильтры отдельно от контролов отбора, чтобы их можно было снять по одному.
- Обязательно: Сохранять размер страницы и порядок сортировки при переходе между страницами.
- Рекомендуется: Давать строке только те действия, которые не требуют открывать сущность целиком.
- Запрещено: Прятать пустую выдачу без объяснения: человек должен понять, отбор виноват или данных нет.
- Запрещено: Делать номера страниц индикатором прогресса или этапов — это Steps.
Логика отклика
- Обзор Человек открывает раздел. Выдача показывает первую страницу в сохранённом порядке.
- Отбор Человек ищет или сужает выдачу фильтрами. Применённые фильтры собираются отдельной строкой, выдача пересобирается с первой страницы.
- Действие Человек меняет что-то прямо в строке. Строка отражает изменение, не теряя позицию в выдаче.
- Переход Человек листает страницы или открывает сущность. Размер страницы и порядок сохраняются; открытая сущность знает, откуда пришли.
Контекстный пример
Скелет экрана
toolbarПредставление, поиск, сортировка и размер страницы.selectionДействия над выбранными строками: массовая смена состояния, счётчики выбранного, выбрать всё и снять выбор. Появляется, когда выбрана хотя бы одна строка.filtersПрименённые фильтры отдельной строкой, каждый снимается по отдельности.itemsСтроки выдачи в выбранном представлении.paginationПереход между страницами выдачи и её объём.actionsСоздание сущности и действия над всей выдачей; стоят в титульной строке страницы.