  <Menu Mode="Custom">
    <Text Value="trigger" />
    <Group >
      <Text Value="option1" />
      <Text Value="option2" />
      <Text Value="option3" />
    </Group>
  </Menu>
  
 <Menu 
  Mode="Icons" 
  State={[{
      text: 'Некоторый текст',
      label: 'необязательный заголовок опции',
      value: '2',
      icon: '/static/icons/copy.svg',
    },
    {
      text: 'Некоторый текст',
      value: '5',
      icon: 'static/icons/copy.svg',
    },
  ]} 
 />

Свойства

AutoHighlightOnHover

Признак автоматической подсветки пункта меню при наведении указателя мыши

Тип: boolean

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

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

CloseOnItemClick

Признак закрытия компонента по щелчку мыши по пункту меню

Тип: boolean

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

CombineConfig

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

Тип: object

Coordinates

Координаты для отображения меню без использования триггера открытия меню: объект вида {x: , y: }

Тип: object

ForceCloseOnClick

Признак закрытия меню при нажатии мышью в области компонента

Тип: boolean

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

Hidden

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

Тип: boolean

Hint

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

Тип: any

IconField

Переопределение ключа для связи данных со значением, соответствующим значкам в меню

Тип: string

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

Id

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

Тип: string

LabelField

Переопределение ключа для метки пункта меню

Тип: string

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

ManualShowControl

Признак ручного управления отрисовкой

Тип: boolean

Mode

Режим работы

Тип: enum

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

Возможные значения:

Custom - Произвольное содержимое Dropdown - Раскрывающийся список пунктов. Получает данные из свойства State:
массив значений вида [{text:'text', value:'value', icon:'/icons/some.svg'}].
Вложенные массивы — группы, отделяемые друг от друга горизонтальной чертой:
[['необязательный заголовок группы. Строка',{text:'text',
label:'необязательное имя варианта',value:'value',
disabled:'true', icon:'/icons/some.svg'}],
[{text:'text', value:'value', icon:'/icons/some.svg'}]] Icons - Панель быстрого доступа со значками. Получает данные из свойства State:
массив значений вида [{value:'value', icon:'/icons/some.svg'}].
Вложенные массивы — группы, отделяемые друг от друга вертикальной чертой:
[[{value:'value', icon:'/icons/some.svg'}],[{value:'value', icon:'/icons/some.svg'}]]

Model

Псевдоним свойств Value и OutputValue

Тип: any

Multiple

Признак возможности выбора нескольких значений

Тип: boolean

NoPaddings

Признак отсутствия стандартного отступа у компонента

Тип: boolean

Offset

Отступ от триггера открытия меню: объект вида {x: , y: }

Тип: object

Значение по умолчанию: <pre>{
"x": 0,
"y": 0
}</pre>

OnClick

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

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

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

Тип: undefined

OnClose

Тип: any

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

OnUnmount

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

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

Тип: undefined

OptionalOpen

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

Тип: boolean

OutputOptionalOpen

Признак привязки значения для отрисовки меню без использования триггера открытия меню

Тип: boolean

OutputState

Массив объектов допустимых выходных значений

Тип: array

OutputValue

Привязка отрисованного компонента к модели

Тип: any

RenderInPortal

Признак отрисовки меню в отдельном элементе

Тип: boolean

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

SelectedField

Переопределение ключа для выбранного пункта меню

Тип: string

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

ShowControl

Признак открытия и скрытия меню при условии ManualShowControl=true

Тип: boolean

ShowGroupSeparator

Признак отображения границы между группами

Тип: boolean

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

Slot

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

Тип: string

State

Массив объектов допустимых входных значений

Тип: array

TextField

Переопределение ключа для связи данных с отображаемым значением выбранного пункта меню

Тип: string

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

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

Тип: any

TraceId

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

Тип: string

UseSelection

Признак отображения выбранных пунктов меню

Тип: boolean

Value

Привязка модели к отрисованному компоненту

Тип: any

ValueField

Переопределение ключа для связи данных со значением, которое записывается в переменные состояния экранной формы

Тип: string

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

Visible

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

Тип: boolean

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

Примеры

Данные:

  "menuData1": [{
              "text": "Bool",
              "value": "2"
            },
            {
              "text": "String",
              "value": "3"
            },
            {
              "text": "Link",
              "value": "4",
              "disabled": true
            },
            {
              "text": "Test",
              "value": "5"
            }
        ], "menuData2": [{
              "text": "Bool",
              "value": "2"
            },
            {
              "text": "String",
              "value": "3"
            },
            {
              "text": "Link",
              "value": "4",
              "disabled": true
            },
            {
              "text": "Test",
              "value": "5"
            }
        ], "menuData3": [[{
          "text": "Create folder",
          "value": "1",
          "icon": "static/examples/9.svg"
        }, {
          "text": "Create file",
          "value": "1",
          "icon": "static/examples/10.svg"
        }], [{
          "text": "Upload files",
          "value": "1",
          "icon": "static/examples/11.svg"
        }, {
          "text": "Download files",
          "value": "1",
          "icon": "static/examples/12.svg"
        }], [{
          "text": "Copy",
          "value": "1",
          "icon": "static/examples/5.svg"
        }, {
          "text": "Cut",
          "value": "1",
          "icon": "static/examples/7.svg"
        },{
          "text": "Paste",
          "value": "1",
          "icon": "static/examples/6.svg"
        },{
          "text": "Rename",
          "value": "1",
          "icon": "static/examples/13.svg",
          "disabled": true
        }],{
          "text": "Delete",
          "value": "1",
          "icon": "static/examples/8.svg",
          "red": true
        }
        ],"menuData4": [["Title 1",{
          "text": "Bool",
          "value": "1"
        },{
          "text": "Number",
          "value": "1"
        },{
          "text": "Link",
          "value": "1"
        }],["Title 2",{
          "text": "Secure",
          "value": "1"
        },{
          "text": "Configuration",
          "value": "1",
          "disabled": true
        },{
          "text": "Link",
          "value": "1"
        }]
        ],"menuData5": [{
              "text": "г.Москва",
              "value": "2",
              "label": "Москва"
            },{
              "text": "Московская область",
              "value": "2",
              "label": "Можайск"
            },{
              "text": "Мурманская область",
              "value": "2",
              "label": "Мончегорск",
              "disabled": true
            },{
              "text": "г. Москва, Московское поселение",
              "value": "2",
              "label": "Московский"
            },{
              "text": "г. Москва, Рязановское поселение",
              "value": "2",
              "label": "Мостовское"
            },{
              "text": "г. Москва, Морозовское поселение",
              "value": "2",
              "label": "Морозовск"
            },{
              "text": "г. Москва, Филимоновское поселение",
              "value": "2",
              "label": "Марьино"
            }
        ],"menuData6": [[{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/1.svg"
        }],[{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/2.svg"
        }],[{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/3.svg"
        },{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/4.svg"
        }],[{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/5.svg"
        },{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/6.svg"
        },{
          "text": "Alam! Alarm!",
          "value": "1",
          "icon": "static/examples/7.svg",
          "disabled": true
        },],{
          "text": "Some text",
          "value": "1",
          "icon": "static/examples/8.svg",
          "red": true
        }
        ]
}

JSX:

<Group Mode={"Column"}>
<Text Value="1. Mode=Custom" Mode="Medium_16"/>
<Text Value="Произвольные контролы внутри."  CSS={['my-8', 'ml-16']}/>
  <Menu
    Model-var="test"
    CSS={['my-16', 'ml-16']}
    Badge={{
      counter: 8,
      position: "post",
      color: "default",
    }}
  >
    <Text Value="Click Me" Mode="Bold_12" Tooltip="Нажмите сюда" />
    <Group Mode={'Column'} Width="200px">
      <Group Mode={'Row'} Align="Start" Height="32px">
        <Group Mode={'Row'} Width="38px"><Switcher Value-var={'ddd1'} OutputValue-var={'ddd1'}/></Group>
        <Text Value="Option 1" WhiteSpace="nowrap" />
      </Group>
      <Group Mode={'Row'} Align="Start" Height="32px">
        <Group Mode={'Row'} Width="38px"><Switcher Value-var={'ddd2'} OutputValue-var={'ddd2'}/></Group>
        <Text Value="Option 2" WhiteSpace="nowrap" />
      </Group>
      <Separator/>
      <Group Mode={'Row'} Align="Start" Height="32px">
        <Group Mode={'Row'} Width="38px"><Switcher Value-var={'ddd'} OutputValue-var={'ddd'}/></Group>
        <Text Value="Option 3" WhiteSpace="nowrap" />
      </Group>
      <Group Mode={'Row'} Align="Start" Height="32px">
        <Group Mode={'Row'} Width="38px"><Switcher Value-var={'ddd3'} OutputValue-var={'ddd3'}/></Group>
        <Text Value="Option 4" WhiteSpace="nowrap" />
      </Group>
    </Group>
  </Menu>
<Text Value="2. Mode=Dropdown" Mode="Medium_16" CSS={['my-16']}/>
  <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={false}
    Model-var='testtt'
    State-var="menuData1"
    OutputState-var="menuData1"
    Multiple={false}
    UseSelection={true}
  >
    <Text Mode="Bold_12" Value="Text (UseSelection, OutputState)" Tooltip="Нажмите сюда"/>
  </Menu>
  <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={false}
    Model-var='testtt'
    State-var="menuData2"
    OutputState-var="menuData2"
    Multiple={true}
    UseSelection={true}
  >
    <Text Mode="Bold_12" Value="Text  (Multiple, UseSelection, OutputState)" Tooltip="Нажмите сюда"/>
  </Menu>
   <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={true}
    Model-var='testtt'
    State-var="menuData3"
  >
    <Text Mode="Bold_12" Value="Text + Icon (CloseOnItemClick, Grouped )" Tooltip="Нажмите сюда"/>
  </Menu>
   <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={false}
    Model-var='testtt'
    State-var="menuData4"
    OutputState-var="menuData4"
    UseSelection={true}
    ShowGroupSeparator={false}
  >
    <Text Mode="Bold_12" Value="Header + Text (UseSelection, OutputState, ShowGroupSeparator=false)" Tooltip="Нажмите сюда"/>
  </Menu>
   <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={false}
    Model-var='testtt'
    State-var="menuData5"
    OutputState-var="menuData5"
    UseSelection={true}
  >
    <Text Mode="Bold_12" Value="Label + Text (UseSelection)" Tooltip="Нажмите сюда"/>
  </Menu>
   <Menu 
    Mode={'Dropdown'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={false}
    Model-var='testtt'
    State-var="menuData5"
    OutputState-var="menuData5"
    UseSelection={true}
    Offset={{x:140,y:-40}}
  >
    <Button><Text Mode="Bold_12" Value="Offset={{x:140,y:-40}}" Tooltip="Нажмите сюда"/></Button>
  </Menu>
  <Text Value="3. Mode=Icons" Mode="Medium_16" CSS={['my-16']}/>
  <Menu 
    Mode={'Icons'}
    CSS={['mb-16', 'ml-16']}
    CloseOnItemClick={true}
    Model-var='testtt'
    State-var="menuData6"
    >
      <Text Mode="Bold_12" Value="Menu Mode=Icons" Tooltip="Нажмите сюда"/>
    &lt;/Menu>
&lt;/Group>

Свойства​

AutoHighlightOnHover​

Badge​

CSS​

CloseOnItemClick​

CombineConfig​

Coordinates​

ForceCloseOnClick​

Hidden​

Hint​

IconField​

Id​

LabelField​

ManualShowControl​

Mode​

Model​

Multiple​

NoPaddings​

Offset​

OnClick​

OnClose​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

OptionalOpen​

OutputOptionalOpen​

OutputState​

OutputValue​

RenderInPortal​

SelectedField​

ShowControl​

ShowGroupSeparator​

Slot​

State​

TextField​

Tooltip​

TraceId​

UseSelection​

Value​

ValueField​

Visible​

Примеры​

Свойства

AutoHighlightOnHover

Badge

CSS

CloseOnItemClick

CombineConfig

Coordinates

ForceCloseOnClick

Hidden

Hint

IconField

Id

LabelField

ManualShowControl

Mode

Model

Multiple

NoPaddings

Offset

OnClick

OnClose

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

OptionalOpen

OutputOptionalOpen

OutputState

OutputValue

RenderInPortal

SelectedField

ShowControl

ShowGroupSeparator

Slot

State

TextField

Tooltip

TraceId

UseSelection

Value

ValueField

Visible

Примеры