Стандарты проектирования
Баннер


Баннер

Баннер - это шапка страницы. Содержит заголовок страницы, навигацию в виде хлебных крошек, быстрые фильтры в виде статистики и некоторые другие элементы.

Хлебные крошки

Баннер содержит хлебные крошки - навигацию. Они собираются по ходу того, как пользователь проваливается во вложенности. Заголовок - это текущая страница. Как только пользователь проваливается дальше, заголовок предыдущей страницы переходит в ряд хлебных крошек.

🔴 Плохо

🟢 Хорошо

Статистика и фильтрация

Баннер также может содержать плашки со статистикой по таблице, которая расположена ниже.

Логика работы баннера

Плашки со статистикой так же могут использоваться как быстрые фильтры.

  1. Плашки в состоянии default (по умолчанию).

  2. При клике на плашку, она переходит в состояние active(активное), а таблица под баннером отфильтровывается соответствующим образом.

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

  1. При повторном клике на плашку, она переходит в состояние default, фильтр в таблице также сбрасывается. При этом статистика в других плашках пересчитывается в соответствии с данными в таблице.

А также в обратную сторону:

  1. Если в таблице пользователь фильтрует данные, и данный фильтр есть в соответствующей плашке, то плашка также переходит в состояние active.
  2. Статистика в плашках пересчитывается.

Если нет плашки, которая соответствует выбранному фильтру, то, соответственно, все плашки остаются в состоянии default, но статистика все равно пересчитывается в соответствии с отфильтрованной таблицей.

Кнопки и бейджи

Баннер может содержать кнопки - иконки и бейджи в правой части.

В том числе, там можно расположить кнопку с иконкой pi-ellipsis-h, при клике на которую открывается контекстное меню, содержащее дополнительные действия.

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