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

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-2024, «1С-Битрикс», 2024
Наверх