UI библиотека

PopupWindow

BX.PopupWindowManager.create(id, node, {
  width: 400,
  content: '<p>Контент</p>',
  overlay: { backgroundColor: 'black', opacity: '80' },
  closeIcon: true,
  lightShadow: true,
  closeByEsc: true,
  draggable: { restrict: true },
  titleBar: 'Create Rprice',
  contentColor: 'white',
  events: {},
  buttons: [new BX.PopupWindowButton({ className: 'ui-btn', text: 'Надпись', events: {} })]
});

События PopupWindow

Список событий можно посмотреть тут: /bitrix/js/main/popup/src/popup/popup.js

const aliases = { /* ... */ };

PopupMenu

BX.PopupMenu.show(
  menuId,       // идентификатор менюшки
  bindElement,  // DOM узел, у которого показать менюшку
  menuItems,    // коллекция пунктов
  params        // параметры для PopupWindow, который показывает менюшку
);

PopupMenuItems

• { delimiter: true } — разделитель
• Поля обычного пункта
  • text — Основной текст
  • html — Можно передать строкой, а можно domElement
  • title — Всплывающий текст — title
  • href — Если передан — будет создан <a>, иначе <span>
  • target
  • dataset — объект непонятно для чего
  • disabled
  • className
  • onclick — callback при нажатии на пункт. this указывает на объект Menu. Параметры функции
  • event
  • menuItem

Пример

BX('button').on('click', function (event) {
  BX.PopupMenu.show(
    'popup-menu-id',
    event.target,
    [
      {
        text: 'Первый пункт',
      },
      { delimiter: true },
      {
        text: 'Закрыть',
        title: 'Закрытие менюшки',
        onclick: function () {
          this.close();
        }
      }
    ],
  );
})

Нотификации

Документация по бибилиотеке

Подключение:

\Bitrix\Main\UI\Extension::load('ui.notification');

Использование

BX.UI.Notification.Center.notify({
  position: 'bottom-right',
  autoHideDelay: 2500,
  closeButton: true,
  render () {
    return new BX.UI.Alert({
      text: 'Текст уведомления',
      color: BX.UI.Alert.Color.SUCCESS
    }).getContainer();
  }
});

Hint — подсказки

Для использования hint'ов достаточно вызывать методы show и hide с объекта BX.UI.Hint. Контент для всплывашки можно определить прямо в дом-узле, который выводит иконку знака вопроса, но надо спрятать текст.

<?php
Bitrix\Main\UI\Extension::load(['ui.vue3', 'ui.hint']);
?>
<style>
  .hidden-text {
    color: rgba(0,0,0,0);
    overflow: hidden;
  }
</style>
<div id="app">
  <div>
    <p>
      Параграф
      <span
        @mouseenter="showHint"
        @mouseleave="hideHint"
        class="ui-hint-icon hidden-text"
      >Всплывающий текст</span>
    </p>
  </div>
</div>

<script>
  const myApp = {
    name: 'My app',
    methods: {
      showHint (event) {
        const hintContent = event.target.textContent;
        BX.UI.Hint.show.call(BX.UI.Hint, event.target, hintContent, false);
      },
      hideHint (event) {
        BX.UI.Hint.hide.call(BX.UI.Hint, event.target);
      },
    }
  };

  const app = BX.Vue3.BitrixVue.createApp(myApp);
  app.mount('#app');
</script>