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
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.