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

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

 

Видео кнопка

 

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

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 не гарантируется.

ТЕХНИЧЕСКАЯ ПОДДЕРЖКА

Не можете найти то, что ищете?

Напишите нам. на связи 24/7. Среднее время ожидания ответа: 10-15 минут. Также вы можете вступить в наш Телеграм-чат, где собралось много специалистов и пользователей.

Поддержка Creatium

Агенты ответят через 10 минут

Агенты ответят

Блог, курсы и полезные материалы 

Платформа сайтов любой сложности