1. aspro.ru
  2. Аспро: Максимум
  3. Для веб-разработчиков
  4. Графические материалы
  5. Использование библиотеки UI-элементов

Использование библиотеки UI-элементов


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

e3d634b8-7b5d-11f1-8fe4-fa163e2ff576

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

Представленные на демо-сайте UI элементы являются html-кодом, который вы можете скопировать и вставить в нужное место на странице сайта. В качестве примера добавим на сайт элемент «Шестеренки» и заголовки разного размера.
94b8dd78-7b60-11f1-8fe4-fa163e2ff576

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


95bcfa19-7b64-11f1-8fe4-fa163e2ff576

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

27c8d56e-7b63-11f1-8fe4-fa163e2ff576

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

47646db7-7b60-11f1-8fe4-fa163e2ff576


В нашем примере скопирован код заголовка и код элемента «Шестеренки». Вы можете вносить изменения в код – например, убрать тестовый текст под заголовком или поменять подпись под шестеренками.

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

ab83dc4a-7b64-11f1-8fe4-fa163e2ff576

Важно! Для Аспро: Максимум, начиная с версии 1.6.1, чтобы работали иконки, нужно дополнительно подключить библиотеку иконок font awesome. Подключение производится на той странице, где они будут отображаться. Для этого вставьте код CJSCore::Init('aspro_font_awesome') на странице.

Для Аспро: Корпоративный сайт 3.0 код отличается: CJSCore::Init('aspro_font-awesome').

61407956-7b63-11f1-8fe4-fa163e2ff576

Подключение библиотеки на Аспро: Лайтшоп

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

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

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

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

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

69317dd5-7b5e-11f1-8fe4-fa163e2ff576

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

182ac86f-7b5c-11f1-8fe4-fa163e2ff576

Предыдущая статья Графические материалы
Следующая статья Отключение ikSelect