UI-библиотека
UI-библиотека (user interface) — это библиотека пользовательских интерфейсов. Основная задача модуля — стандартизировать и централизовать управление стилями и поведением типовых элементов, таких как: кнопки, формы, иконки, табы и так далее.
Модуль несет системный характер. Его нельзя ни отключить, ни удалить. Он подключается автоматически при его использовании. Остальное время модуль неактивен.
Расширения
Название | Описание |
---|---|
color_picker | Диалог выбора цвета |
spotlight | Элемент интерфейса в виде пульсирующего круга |
ui.advice | Блок с советом |
ui.alerts | Сообщения |
ui.banner-dispatcher | Диспетчер баннеров |
ui.buttons | Кнопки |
ui.confetti | Конфетти |
ui.countdown | Таймер обратного отсчета |
ui.counter | Счетчики |
ui.dialogs.checkbox-list | Попап с чекбоксами для настройки вывода вашего контента |
ui.dialogs.messagebox | Создание стандартных диалогов типа alert и confirm |
ui.ears | Кнопки прокрутки «уши» |
ui.entity-catalog | Каталог элементов |
ui.entity-selector | Диалог выбора сущностей |
ui.feedback.form | Формы обратной связи |
ui.forms | Формы |
ui.hint | Подсказки |
ui.icons | Иконки |
ui.icon-set | Сет иконок из библиотеки |
ui.inputmask | Маска ввода |
ui.label | Метки |
ui.layout-form | Формы с сеткой |
ui.menu-configurable | Настраиваемое меню |
ui.notification | Нотификации |
ui.progressbar | ПрогрессБар |
ui.progressround | Круглый ПрогрессБар |
ui.reactions-select | Компонент для выбора реакции |
ui.select | Компонент для выбора элемента из списка |
ui.sidepanel-content | Типовое использование контентного слайдера |
ui.sidepanel.layout | Верстка контентного слайдера |
ui.stageflow | Отрисовка последовательности стадий в верхней карточке элемента |
ui.stepbystep | Компонент-обёртка для пошаговых блоков |
ui.stepprocessing | Диалог для пошагового процесса |
ui.textanimate | Анимация смены текста |
ui.textcrop | Сокращение текста по высоте |
ui.timeline | Таймлайн |
ui.toolbar | Тулбар |
ui.tooltip | Тултип с карточкой пользователя |
ui.tour | Тур |
ui.viewer | Просмотрщик |
ui.userfield | Модель настроек пользовательского поля |
ui.userfieldfactory | Фабрика настроек пользовательских полей |
Компоненты
Название | Описание |
---|---|
bitrix:spotlight | Выводит подсказку на странице около указанного DOM-элемента |
bitrix:ui.sidepanel.wrapper | Является оберткой для вывода целевого компонента в слайдере |
bitrix:ui.button.panel | Выводит панель с кнопками отправки формы |
bitrix:ui.toolbar | Выводит тулбар с кнопками и фильтром |
bitrix:ui.tour | Выводит подсказку на странице около указанного DOM-элемента |
Примеры
Универсальный пример получения доступа к API поля. С помощью этого API устанавливаются значения, удаляются значения и так далее.
// Получаем ссылку на DOM-элемент поля var element = document.querySelector("[data-name=\"sEmployeeGroup\"]"); // Получаем запись из BX.Main.ui.Factory var field = BX.Main.ui.Factory.get(element); if (field) { // Получаем ссылку на экземпляр класса поля var fieldInstance = field.instance; // Далее можно использовать API: // Установка значения для поля типа main-ui-select fieldInstance.updateValue(fieldInstance.getItems()[0]); fieldInstance.updateDataValue(fieldInstance.getItems()[0]); // Установка значения для поля типа main-ui-multi-select fieldInstance.selectItem(fieldInstance.getItems()[0]); // Удаление значения для поля типа main-ui-multi-select fieldInstance.unselectItem(fieldInstance.getItems()[0]); }
Как через js библиотеку BX поменять настройки фильтра на странице.
var filter = BX.Main.filterManager.getById('my_filter_id'); if (filter) { var filterApi = filter.getApi(); filterApi.setFields({'NAME': 'main 17.0.7'}); filterApi.apply(); }
Смотрите также:
© «Битрикс», 2001-2025, «1С-Битрикс», 2025