Перейти к основному содержимому

MenuBar

Отображает боковое меню приложения на базе Платформы

Компонент MenuBar отображает боковое меню приложения со списком пунктов, представляющих разделы приложения. Разделы могут быть реализованы в виде раскрывающегося списка и отображать подразделы. Поддерживается один уровень вложенности. При выборе в меню имени раздела или подраздела на странице приложения отображается соответствующее выбору содержимое. Пункты меню могут быть следующих типов:

  • Пользовательские. Описывают переходы к разделам приложения. Определяются с помощью свойства Items.
  • Системные. Отображаются ниже пользовательских пунктов. Определяются с помощью свойства SystemItems. Выполняемые при выборе системного пункта действия определяются с помощью обработчика события OnSystemItemClick. По умолчанию системными пунктами меню являются следующие: переключение языка интерфейса приложения, смена текущего пользователя, обращение в Службу технической поддержки. Компонент имеет следующие состояния:
  • Развернут. Используется по умолчанию. Отображается в полноразмерном виде с отображением имен пунктов меню.
  • Свернут. Отображается в виде узкой вертикальной полосы. Имена пунктов не отображаются. В мобильной версии приложения компонент MenuBar по умолчанию отображается сверху в свернутом состоянии в виде горизонтальной полосы. По нажатию кнопки мыши состояние компонента меняется на развернутое с отображением пунктов меню.
  <MenuBar
    Title="UIKit"
    CollapseButtonText-Localizable="UIKitDemo.CollapseButton"
    Logotype="logo_menubar_example"
    LogotypeHover="logo_menubar_example_colored"
    Items={[
      {
        path: '/admin/',
        title: 'AdminTools',
      },
      {
        path: '/devtools/',
        title: 'Devtools',
      },
    ]}
  />

Свойства​

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CollapseButtonText​

Имя системного пункта для сворачивания меню

Тип: string

Значение по умолчанию: Свернуть меню

Colors​

Объект, поля которого определяют цвета элементов пункта меню. В качестве значения цвета можно использовать HEX-код или цветовой код из файла Style.mdtheme проекта DevTools. Поля объекта, как и свойство Colors, не являются обязательными. Поля объекта описывают цвета следующих элементов: icon - значок слева от имени пункта меню; iconHover - значок слева от имени пункта меню, когда указатель мыши наведен на значок; text - имя пункта меню; textHover - имя пункта меню, когда указатель мыши наведен на имя пункта; textActive - имя пункта меню, когда этот пункт выбран; menu - фон пользовательского пункта меню; menuHover - фон пользовательского пункта меню, когда указатель мыши наведен на пункт меню; menuActive - фон пользовательского пункта меню, когда этот пункт выбран; subMenu - имя вложенного пункта меню; paper - область компонента MenuBar; paperBorder - горизонтальный разделитель между Title и пользовательскими пунктами меню, а также между пользовательскими и системными пунктами меню; appBar - область компонента MenuBar в мобильном приложении; appBarBorder - горизонтальный разделитель paperBorder в мобильном приложении.

Тип: object

Значение по умолчанию: <pre>{}</pre>

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

IsCollapsed​

Признак состояния компонента: свернут/развернут. По умолчанию компонент развернут.

Тип: boolean

Items​

Массив объектов для описания пользовательских пунктов меню. Объект имеет следующие поля: path: string - путь к экранной форме приложения, соответствующей выбранному пункту меню. Путь определяется при настройке маршрутизации экранной формы. title: sting - имя пункта меню. icon?: string - псевдоним значка из файла Static.asset системного проекта. Значок отображается слева от title. Если icon не указан, используется значок по умолчанию. titleLocalizable?: string - имя словаря локализации и имя ключа для локализации title, указанное после точки, например, UIKitDemo.DemoLocalizable

Тип: array

Logotype​

Псевдоним изображения из файла Static.asset проекта DevTools. Изображение отображается слева от Title.

Тип: string

LogotypeHover​

Псевдоним изображения из файла Static.asset проекта DevTools. Изображение отображается слева от Title при наведении указателя мыши.

Тип: string

OnClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnSystemItemClick​

Обработчик события нажатия кнопки мыши, когда указатель мыши наведен на системный пункт меню. Параметрами OnSystemItemClick является объект со следующими полями: itemName: string - значение type системного пункта меню: support, profile, languages; coords?: - объект для описания координат с числовыми полями x и y, например, {x: 100, y: 53}; ref?: - объект с полем current, которое содержит ссылку на DOM-элемент, используемый в реализации компонента. Пример: OnSystemItemClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

SystemHeap​

Тип: object

Значение по умолчанию: <pre>{}</pre>

SystemItems​

Массив объектов для описания системных пунктов меню. Объект имеет следующие поля: type: string - значение из следующего списка: support - обращение в Службу технической поддержки, profile - смена текущего пользователя, languages - переключение языка интерфейса приложения. path?: string - путь к экранной форме приложения, соответствующей выбранному пункту меню. Путь определяется при настройке маршрутизации экранной формы. title?: string - имя пункта меню. titleLocalizable?: string - имя словаря локализации и имя ключа для локализации title, указанное после точки, например, UIKitDemo.DemoLocalizable

Тип: array

Title​

Заголовок меню, отображаемый над пунктами меню. В качестве заголовка меню может использоваться имя приложения

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Примеры​

JSX:

<Group Height="560px" CSS={(isMob) => isMob ? [''] : ['pl-16']}>
  <MenuBar
    Title="UIKit"
    CollapseButtonText-Localizable="UIKitDemo.CollapseButton"
    Logotype="logo_menubar_example"
    LogotypeHover="logo_menubar_example_colored"
    OnSystemItemClick={(languageMenu, menuMinified, externalWatchin, isMob) => {
      const {itemName, coords, ref} = getEvent();
      
      /**
       * для расширенной работы с системными пунктами меню
       * рекомендуется ознакомиться с фрагментом экранной формы MasterPage,
       * который описывает часто используемые действия и функции
       */
      console.log({itemName, coords, ref});
    }}
    Items={[
      {
        path: '/ui-kit',
        title: 'Компоненты экранных форм',
      },
      {
        path: '/admin/',
        title: 'AdminTools',
      },
      {
        path: '/devtools/',
        title: 'Devtools',
      },
      {
        title: 'Примеры',
        titleLocalizable: 'UIKitDemo.MenuBarExamples',
        routes: [
          {
            path: '/examples/executeactionexample',
            title: 'executeAction executeActionexecuteActionexecuteAction executeAction',
          },
          {
            path: '/examples/errors',
            title: 'Работа с ошибками',
          },
          {
            path: '/examples/form',
            title: 'Валидация данных в компоненте Form',
          },
          {
            path: '/checktool',
            title: 'CheckTool',
          },
        ]
      },
      {
        title: 'BIM 4D',
        path: '/modules/bim/projects',
      },
      {
        path: '/modules/library/authors',
        title: 'Библиотека',
      }
    ]}
    SystemItems={[
      {
        type: 'languages',
        title: 'Язык',
        titleLocalizable: 'UIKitDemo.MenuBarLanguages'
      },
      {
        type: 'support',
        title: 'Поддержка',
      },
      {
        type: 'profile',
        path: '/user-settings',
      },
    ]}
  />
</Group>