Баннер

С чего начать

Подключите модуль:

import { QBannerModule } from '@diasoft/qpalette-visual';

Встройте компонент в верстку c помощью тегаq-banner. Карточки баннера задаются внутри тегаq-bannerс помощью теговq-banner-block, для наименования заполенения полей, предусмотренных в карточке по умолчанию используются:subtitle,captionиbadgeText:

 
<q-banner caption="Баннер в состоянии по умолчанию">
  <q-banner-block subtitle="Всего записей" caption="5 млн." badgeText="+5 млн за месяц"></q-banner-block>
  <q-banner-block subtitle="Резидентов" caption="4.2 млн"></q-banner-block>
  <q-banner-block subtitle="В работе" caption="24 933" badgeText="+500 за день"></q-banner-block>
</q-banner>

По умолчанию

Кликните на стрелку для того, чтобы баннер развернулся/свернулся:

Развернутый

Для того, чтобы баннер изначально отображался в развёрнутом виде, используйте свойствоexpandedсо значениемtrue:

С картинкой

Для того, чтобы установить в баннер фоновое изображение, используйте свойствоpicture, в которое необходимо передать ссылку на изображение.

Стандартные картинки лежат в /assets/banner-pics/ рутового приложения — путь assets/banner-pics/…, как в примерах ниже. Свою картинку кладите в ассеты своего приложения только если она должна отличаться от стандартных, и указывайте путь без ведущего assets/ — picture="banner-pics/my-banner.jpg": он разворачивается в адрес файла из ассетов собственной сборки — /api/<сервис>/<компонент>/assets/banner-pics/my-banner.jpg. Путь assets/…, путь от корня сайта и полный URL используются как есть — правило описано в разделе Адреса собственных ассетов.

💡

Путь без assets/ работает с версии 8.2.0. Стандартные картинки в одном из следующих выпусков переедут из рутового приложения в палитру и останутся доступны; путь к ним в продукте менять не потребуется.

С градиентом

Для того, чтобы установить в баннер градиент в качестве фона, используйте свойствоgradient, в которое необходимо передать соответствующее css-свойство:

Тажке, можно использовать статичный цвет:

С произвольным контентом

Произвольный контент прописывается внутри тегаq-banner-block:

Percent

Новые заказы+12.29%Оплаченные заказы+23.29%Оплата и доставка-1.34%

Здесь может быть любой Ваш контент.

Здесь тоже может быть любой Ваш контент.

Какой захотите.

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

Breadcrumbs

<q-banner [breadCrumbs]="myCrumbsList" style="margin-bottom: 16px">
  <q-banner-block subtitle="Всего записей" caption="5 млн." badgeText="+5 млн за месяц"></q-banner-block>
  <q-banner-block subtitle="Резидентов" caption="4.2 млн"></q-banner-block>
  <q-banner-block subtitle="В работе" caption="24 933" badgeText="+500 за день"></q-banner-block>
</q-banner>
 
<q-banner caption="Заголовок" [breadCrumbs]="myCrumbsList">
  <q-banner-block subtitle="Всего записей" caption="5 млн." badgeText="+5 млн за месяц"></q-banner-block>
  <q-banner-block subtitle="Резидентов" caption="4.2 млн"></q-banner-block>
  <q-banner-block subtitle="В работе" caption="24 933" badgeText="+500 за день"></q-banner-block>
</q-banner>

Блокировка состояния

Баннер можно заблокировать в свернутом или в развернутом виде, запретив ему сворачиваться/разворачиваться при клике по шапке. Для этого используетс свойствоlocked

Вариации заполнения

Ниже представлены различные варианты заполнения карточек баннера:

...и произвольный контент

Только произвольный контент

Степпер Редактор текста