  <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-стилей компонента	array
CloseOnItemClick	Признак закрытия компонента по щелчку мыши по пункту меню	boolean	True
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
Coordinates	Координаты для отображения меню без использования триггера открытия меню: объект вида {x: , y: }	object
ForceCloseOnClick	Признак закрытия меню при нажатии мышью в области компонента	boolean	True
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
IconField	Переопределение ключа для связи данных со значением, соответствующим значкам в меню	string	icon
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
LabelField	Переопределение ключа для метки пункта меню	string	label
ManualShowControl	Признак ручного управления отрисовкой	boolean	False
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	False
NoPaddings	Признак отсутствия стандартного отступа у компонента	boolean	False
Offset	Отступ от триггера открытия меню: объект вида {x: , y: }	object	<pre>{ "x": 0, "y": 0 }</pre>
OnClick	Обработчик события нажатия кнопки мыши	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	False
OutputOptionalOpen	Признак привязки значения для отрисовки меню без использования триггера открытия меню	boolean	False
OutputState	Массив объектов допустимых выходных значений	array
OutputValue	Привязка отрисованного компонента к модели	any
RenderInPortal	Признак отрисовки меню в отдельном элементе	boolean	True
SelectedField	Переопределение ключа для выбранного пункта меню	string	selected
ShowControl	Признак открытия и скрытия меню при условии ManualShowControl=true	boolean	False
ShowGroupSeparator	Признак отображения границы между группами	boolean	True
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
State	Массив объектов допустимых входных значений	array
TextField	Переопределение ключа для связи данных с отображаемым значением выбранного пункта меню	string	text
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
UseSelection	Признак отображения выбранных пунктов меню	boolean	False
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}
    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>

Свойства​

Примеры​

Свойства

Примеры