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

UI-библиотека

Описание и расширения

UI-библиотека (user interface) — это библиотека пользовательских интерфейсов.

Основная задача модуля — стандартизировать и централизовать управление стилями и поведением типовых элементов, таких как: кнопки, формы, иконки, табы и т.п.

Модуль несёт системный характер. Его нельзя ни отключить, ни удалить. Он подключается автоматически при его использовании. Всё остальное время модуль неактивен.

РасширениеОписание
ui.alertsСообщения.
ui.button.panelПанель кнопок.
ui.buttonsКнопки.
ui.confettiКонфетти.
ui.earsКнопки прокрутки ("уши").
ui.entity-selectorДиалог выбора сущностей.
ui.feedback.formФормы.Обратная связь.
ui.formsФормы.
ui.hintПодсказки.
ui.iconsИконки.
ui.labelМетки.
ui.layout-formФормы.Сетка.
ui.menu-configurableНастраиваемое меню.
ui.notificationНотификации.
ui.progressbarПрогрессБар.
ui.reactions-selectКомпонент для выбора реакции.
ui.selectКомпонент для выбора элемента из списка.
ui.sidepanel-contentТиповое использование контентного слайдера.
ui.sidepanel.layoutВерстка контентного слайдера.
ui.stepbystepКомпонент-обёртка для пошаговых блоков.
ui.stepprocessingДиалог для пошагового процесса.
ui.textanimateАнимация смены текста.
ui.toolbarТулбар.
ui.tourТур.
ui.viewerПросмотрщик.

Примеры

Универсальный пример получения доступа к 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
Наверх