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

Для успешной работы с html-кодом понадобятся хотя бы минимальные знания тегов и принципов записи. Если возникают сомнения или нужно попрактиковаться, вы можете смело экспериментировать с версткой на тестовой странице. Изменение html-кода может испортить верстку отдельной страницы, но не сломает весь сайт.

Представленные на демо-сайте UI элементы являются html-кодом, который вы можете скопировать и вставить в нужное место на странице сайта. В качестве примера добавим на сайт элемент и заголовки разного размера.

Перейдите на нужную страницу сайта, где вы хотите разместить элементы, активируйте режим правки и откройте страницу для редактирования. Переключитесь на совмещенный режим отображения, чтобы было видно одновременно и html-код, и внешний вид содержимого.

Откройте на вашем сайте раздел с библиотекой UI-элементов, перейдите на страницу с нужным содержимым, войдите в режим редактирования и также переключитесь в нем на совмещенный режим отображения.

Скопируйте код интересующих вас элементов и вставьте на странице своего сайта. 

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

После сохранения изменений на странице отображаются нужные элементы:

Подключение библиотеки на Аспро: Премьер

Для десктопной версии Аспро: Премьер вставьте следующий код: \Aspro\Premier\Functions\Extensions::init( БИБЛИОТЕКА); 

А для мобильной версии: \Aspro\Premier\Functions\ExtensionsMobile::init(БИБЛИОТЕКА);

Чтобы найти все доступные библиотеки, перейдите в административную часть сайта. Выберите Контент (1) → Структура сайта (2) → Файлы и папки (3). Вставьте следующий путь в поле:

— для десктопной версии: /bitrix/modules/aspro.premier/lib/functions/Extensions.php 

— для мобильной версии: /bitrix/modules/aspro.premier/lib/functions/ExtensionsMobile.php 

Доступные библиотеки находятся в массиве $arConfig.