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.video-player | Видеоплеер |
| 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