Баннер
Баннер - это шапка страницы. Содержит заголовок страницы, навигацию в виде хлебных крошек, быстрые фильтры в виде статистики и некоторые другие элементы.
Хлебные крошки
Баннер содержит хлебные крошки - навигацию. Они собираются по ходу того, как пользователь проваливается во вложенности. Заголовок - это текущая страница. Как только пользователь проваливается дальше, заголовок предыдущей страницы переходит в ряд хлебных крошек.
🔴 Плохо
🟢 Хорошо
Статистика и фильтрация
Баннер также может содержать плашки со статистикой по таблице, которая расположена ниже.
Логика работы баннера
Плашки со статистикой так же могут использоваться как быстрые фильтры.
-
Плашки в состоянии
default
(по умолчанию). -
При клике на плашку, она переходит в состояние
active
(активное), а таблица под баннером отфильтровывается соответствующим образом.
Важно
Статистика в других плашках обновляется в соответствии с данными из отфильтрованной таблицы.
- При повторном клике на плашку, она переходит в состояние
default
, фильтр в таблице также сбрасывается. При этом статистика в других плашках пересчитывается в соответствии с данными в таблице.
А также в обратную сторону:
- Если в таблице пользователь фильтрует данные, и данный фильтр есть в соответствующей плашке, то плашка также переходит в состояние
active
. - Статистика в плашках пересчитывается.
Если нет плашки, которая соответствует выбранному фильтру, то, соответственно, все плашки остаются в состоянии default
, но статистика все равно пересчитывается в соответствии с отфильтрованной таблицей.
Кнопки и бейджи
Баннер может содержать кнопки - иконки и бейджи в правой части.
В том числе, там можно расположить кнопку с иконкой pi-ellipsis-h
, при клике на которую открывается контекстное меню, содержащее дополнительные действия.
Важно
Данная функция является экспериментальной, более подробный стандарт будет описан позже.