Баннер

С чего начать

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

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, в которое необходимо передать ссылку на изображение:

С градиентом

Для того, чтобы установить в баннер градиент в качестве фона, используйте свойство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

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

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

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

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

Степпер Q.Web-Component