Стандартные компоненты

В данном разделе представлен перечень компонентов которые можно изменять внутри редактора.

Видео кнопка Спойлер Слайдер и вкладки Перелистывание Список слайдов Секция Слайдер Меню-гамбургер Счетчик

Видео кнопка

В компоненте есть всего один элемент микро-разметки.

cr-video-button — Элемент, по клику которого будет открываться окно с видео.

Спойлер

Функционал компонента «Спойлер» заключается в двух атрибутах.

cr-spoiler-container — элемент с этим атрибутом будет скрываться или показываться.

cr-spoiler-toggle — элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом cr-spoiler-container.

И cr-spoiler-container и cr-spoiler-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.

Верстка компонента при этом может быть произвольной. Элемент с атрибутами, указанными выше, могут располагаться в любом месте.

Вы можете сделать даже несколько элементов с атрибутом cr-spoiler-container и несколько с атрибутом cr-spoiler-toggle, и все будет работать.

Слайдер и вкладки

Слайдер и вкладки внутри устроены одинаково.

Элемент, в котором размещены слайды, помечается атрибутом cr-slider-container. Слайды (или вкладки) помещаются туда автоматически.

Перелистывание

Кнопка перелистывания вперед помечается атрибутом cr-slider-next.

Кнопка перелистывания назад помечается атрибутом cr-slider-previous.

Список слайдов

Чтобы сделать точки для каждого слайда необходимо использовать атрибут cr-slider-pagination. При том внутри элемента с этим атрибутом должен находиться всегда только 1 элемент с атрибутом cr-slider-page.

Пример:

<div cr-slider-pagination>
    <div cr-slider-page></div>
</div>

Для каждого слайда элемент cr-slider-page будет продублирован. Элемент, указывающий на активный слайд, будет иметь класс is-active.

Внутри cr-slider-page можно использовать произвольную верстку. Доступны так же следующие специальные элементы:

cr-slider-page_number - номер слайда cr-slider-page_label - название слайда cr-slider-page_icon - иконка слайда. Для указания цвета иконки используйте атрибут color.

Пример:

<div cr-slider-pagination>
  <div cr-slider-page>
    <div cr-slider-page_icon color="white"></div>
  </div>
</div>

Секция Слайдер

Идентично компоненту «Слайдер», только не используется элемент cr-slider-container.

При этом весь редактируемый HTML код помещен внутрь position:absolute элемента, растянутого по ширине и высоте всей секции.

Если нужно обратиться к CSS-свойствам слайда, можно использовать селектор .section-slider-container.

Меню-гамбургер

Как и в спойлере, и cr-hamburger-menu и cr-hamburger-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.

cr-hamburger-toggle — Элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом cr-hamburger-menu.

cr-hamburger-menu — Элемент с меню. Не должен находиться внутри cr-hamburger-root. На мобильных устройствах будет скрываться или показываться по клику по cr-hamburger-toggle. На остальных устройствах будет всегда показан.

cr-hamburger-root — Корневой элемент мобильного меню. Будет показан только на мобильных устройствах.

В компоненте «меню-гамбургер» есть 3 ключевых элемента.

Счетчик

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

Для этого используется атрибут cr-countdown-root.

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

Дни

{{_dn}} — количество дней. Может быть 0, 4, 12, 143 и т.д.

{{_dnn}} — количество дней с двумя цифрами и больше. Может быть 00, 04, 143 и т.д.

{{_d1}} — цифра от 0 од 9, единицы дней. Это может быть "4" от "4" дней или "2" от "12" дней или "3" от "143" дней.

{{_d10}} — цифра от 0 од 9, десятки дней. Это может быть "0" от "4" дней или "1" от "12" дней или "4" от "143" дней.

{{_dl}} — текст "День", "Дней" или "Дня" в зависимости от количества дней.

Часы

Те же переменные, что и в днях, но с "h" вместо "d".

{{_hn}}, {{_hnn}}, {{_h1}}, {{_h10}}, {{_hl}}

Минуты

Те же переменные, что и в днях, но с "m" вместо "d".

{{_mn}}, {{_mnn}}, {{_m1}}, {{_m10}}, {{_ml}}

Секунды

Те же переменные, что и в днях, но с "s" вместо "d".

{{_sn}}, {{_snn}}, {{_s1}}, {{_s10}}, {{_sl}}

Корректная работа динамических компонентов, таких как слайдер, видео и т.д., внутри элемента с атрибутом cr-countdown-root не гарантируется.