Типовое использование
Подключение на PHP-странице
Если в слайдере необходимо вывести типовой контент, то обратите внимание на примеры, приведенные ниже.
Подключение на PHP-странице
\Bitrix\Main\UI\Extension::load('ui.sidepanel-content');
Важно. Внешней обёрткой является блок ui-slider-section
. Он разделяет контент на секции. Внутренней оберткой является блок ui-slider-content-box
. Он разделяет контент внутри секций.
Заголовки: ui-slider-heading-1
, ui-slider-heading-2
, ui-slider-heading-3
, ui-slider-heading-4
.
Подзаголовок: ui-slider-subtitle
.
Текстовые блоки: ui-slider-paragraph
, ui-slider-paragraph-2
.
Ссылка: ui-slider-link
.
Примеры верстки
<div class="ui-slider-section"> <div class="ui-slider-content-box"> <div class="ui-slider-heading-2">Заголовок первой секции слайдера. Heading 3</div> <p class="ui-slider-paragraph">Paragraph 1. Текст слайдера. Теперь при загрузке картинки автоматически попадают в графический редактор. Вы можете обрезать изображение до нужного размера, настроить параметры, добавить текст и стикеры</p> </div> <div class="ui-slider-content-box"> <div class="ui-slider-heading-4">Заголовок раздела слайдера. Heading 4</div> <p class="ui-slider-paragraph-2">Paragraph 2. Текст слайдера. Теперь при загрузке картинки автоматически попадают в графический редактор. Вы можете обрезать изображение до нужного размера, настроить параметры, добавить текст и стикеры</p> </div> </div>
<div class="ui-slider-section"> <div class="ui-slider-heading-4">Заголовок. Heading 4</div> <p class="ui-slider-paragraph-2">Paragraph 2. Текст блока. Теперь при загрузке картинки автоматически попадают в графический редактор. Текст слайдера. Теперь при загрузке картинки автоматически попадают в графический редактор. Вы можете обрезать изображение до нужного размера, настроить параметры, добавить текст и стикеры Теперь при загрузке картинки автоматически попадают в графический редактор.</p> <p class="ui-slider-paragraph-2">Текст слайдера. Теперь при загрузке картинки автоматически попадают в графический редактор. Вы можете обрезать изображение до нужного размера, настроить параметры, добавить текст и стикеры Теперь при загрузке картинки автоматически попадают в графический редактор. Текст слайдера. Теперь при загрузке картинки автоматически попадают в графический редактор. Вы можете обрезать изображение до нужного размера, настроить параметры, добавить текст и стикеры</p> </div>
Позиционирование иконки
Важно: модификатор ui-slider-section-icon-center
позиционирует иконку по центру, а с помощью ui-slider-section-icon
иконка остается сверху.
<div class="ui-slider-section ui-slider-section-icon-center"> <span class="ui-icon ui-slider-icon"> <i></i> </span> <div class="ui-slider-content-box"> <div class="ui-slider-heading-3">Подключите бота своей компании</div> <div class="ui-slider-inner-box"> <p class="ui-slider-paragraph-2">Для подключения необходимо создать публичный аккаунт в Viber или подключить уже существующий. Если у вас еще нет публичного аккаунта, мы поможем создать его в несколько шагов и подключить к вашему Битрикс24</p> <a href="#" class="ui-slider-link">Подробнее о подключении</a> </div> </div> </div>
Внутренняя вложенность
Важно:в примере ниже меняется внутренняя вложенность, нужно обратить внимание на блоки ui-slider-content-box
. Они разделяют верстку на верхнюю часть и нижнюю. Здесь появляется модификатор ui-slider-section-column
, который добавляет свойство flex-direction: column
, чтобы блоки ui-slider-content-box
располагались друг под другом
<div class="ui-slider-section ui-slider-section-icon ui-slider-section-column"> <div class="ui-slider-content-box"> <div class="ui-icon ui-slider-icon"> <i></i> </div> <div class="ui-slider-content-box"> <div class="ui-slider-heading-3">Настройте двусторонний обмен с 1С контактами, компаниями, платежными документами в реальном режиме времени по самой современной модели RestAPI-подключения.</div> <div class="crm-onec-header-futures-container"> <div class="crm-onec-header-futures-block"> <span class="crm-onec-header-futures"> <span class="crm-onec-header-futures-icon icon-1"></span> <span class="crm-onec-header-futures-text">Простое подключение</span> </span> </div> <div class="crm-onec-header-futures-block"> <span class="crm-onec-header-futures"> <span class="crm-onec-header-futures-icon icon-2"></span> <span class="crm-onec-header-futures-text">Легкая настройка</span> </span> </div> <div class="crm-onec-header-futures-block"> <span class="crm-onec-header-futures"> <span class="crm-onec-header-futures-icon icon-3"></span> <span class="crm-onec-header-futures-text">Обмен в реальном времени</span> </span> </div> </div> <hr class="crm-onec-separator"> <div class="crm-onec-install-description">Нажмите кнопку "скачать", и Установщик проверит, соответствует ли ваша конфигурация 1С модулю интеграции Битрикс24.</div> </div> </div> <div class="ui-slider-content-box"> <hr class="crm-onec-separator"> <div class="crm-onec-button"> <div class="ui-btn ui-btn-primary">Скачать</div> <div class="ui-btn ui-btn-default">Продолжить настройку</div> </div> </div> </div>
Заголовок
<div class="ui-slider-section"> <div class="ui-slider-heading-4">Заголовок. Heading 4</div> <ul class="ui-slider-list"> <li class="ui-slider-list-item"> <span class="ui-slider-list-text">Клиент звонит или пишет в чат</span> </li> <li class="ui-slider-list-item"> <span class="ui-slider-list-text">Вам приходит уведомление о том, что заказ оплачен</span> </li> </ul> </div>
Подзаголовок
<div class="ui-slider-section"> <div class="ui-slider-heading-1">Заголовок</div> <div class="ui-slider-subtitle">Подзаголовок</div> <div class="ui-slider-frame --no-hover"> <div>Фрейм без :hover</div> </div> <div class="ui-slider-frame"> <div>Фрейм c hover, стандартное поведение</div> </div> <div class="ui-slider-frame --active"> <div>Фрейм в состоянии active</div> </div> <div class="ui-slider-frame --last-element"> <div>Фрейм без нижнего отступа</div> </div> </div>
Пример
<div class="ui-slider-no-access"> <div class="ui-slider-no-access-inner"> <div class="ui-slider-no-access-title">Задача не найдена или доступ запрещен</div> <div class="ui-slider-no-access-subtitle">Обратитесь к участникам задачи или администратору портала</div> <div class="ui-slider-no-access-img"> <div class="ui-slider-no-access-img-inner"></div> </div> </div> </div>