  <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
CSS	Массив строк-классов CSS-стилей компонента	array
CloseOnItemClick	Признак закрытия компонента по нажатию мышью пункта меню	boolean	True
Coordinates	Координаты для отображения меню без использования триггера открытия меню: объект вида {x: , y: }	object
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
IconField	Переопределение ключа для связи данных со значением, соответствующим значкам в меню	string	icon
Id	Идентификатор компонента для навигации к нему на HTML-странице	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'}]]
Multiple	Признак возможности выбора нескольких значений	boolean
Offset	Отступ от триггера открытия меню: объект вида {x: , y: }	object
OnClick	Обработчик события Click	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	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
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	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']}>
    <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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-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}
    OutputValue-var={'testtt'}
    Value-var={'testtt'}
    State-var="menuData6"
    >
      <Text Mode="Bold_12" Value="Menu Mode=Icons" Tooltip="Нажмите сюда"/>
    </Menu>
</Group>

Свойства​

Примеры​

Свойства

Примеры