Документация для разработчиков
Темная тема

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