  <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

Признак автоматической подсветки пункта меню при наведении указателя мыши: true — пункт меню подсвечивается; false — пункт меню не подсвечивается.

Тип: boolean

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

Badge

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

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

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

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

Тип: array

CloseOnItemClick

Признак закрытия компонента по нажатию кнопки мыши, когда указатель мыши наведен на пункт меню: true — по нажатию кнопки мыши меню закрывается; false — по нажатию кнопки мыши меню не закрывается.

Тип: boolean

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

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

Coordinates

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

Тип: object

ForceCloseOnClick

Признак закрытия меню при нажатии мышью в области компонента: true — по нажатию мышью меню закрывается; false — по нажатию мышью меню не закрывается.

Тип: boolean

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

Hidden

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

Тип: boolean

Hint

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

Тип: any

IconField

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

Тип: string

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

Id

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

Тип: string

LabelField

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

Тип: string

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

ManualShowControl

Признак ручного управления отрисовкой компонента: true — компонент отрисовывается вручную; false — компонент отрисовывается автоматически.

Тип: 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

Признак возможности выбора нескольких значений: true — в меню можно выбрать несколько значений; false — в меню можно выбрать только одно значение.

Тип: boolean

NoPaddings

Признак отсутствия стандартного внутреннего отступа у компонента: true — у компонента есть внутренний отступ; false — у компонента нет внутреннего отступа.

Тип: boolean

Offset

Отступ от триггера открытия меню.

Тип: object

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

OnClick

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

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

Пример:

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

Тип: undefined

OnClose

Обработчик события закрытия меню по нажатию кнопки мыши за пределами области компонента. Не имеет параметров.

Пример:

OnClose={() => {
  // Вывод информации о событии в консоль браузера
    console.log("Меню закрыто!");
  }
}

Тип: 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

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

Тип: boolean

OutputOptionalOpen

Признак привязки значения для отрисовки меню без использования триггера открытия меню: true — для отрисовки меню используется привязка значения; false — для отрисовки меню не используется привязка значения

Тип: boolean

OutputState

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

Тип: array

OutputValue

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

Тип: any

RenderInPortal

Признак отрисовки дочерних элементов за границами компонента. Использует понятие Portal в React.

Тип: boolean

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

SelectedField

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

Тип: string

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

ShowControl

Признак отображения и скрытия меню, если ManualShowControl=true.

Тип: boolean

ShowGroupSeparator

Признак отображения границы между группами: true — границы между группами отображаются; false — границы между группами не отображаются.

Тип: boolean

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

Slot

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

State

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

Тип: array

TextField

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

Тип: string

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

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

Тип: any

TraceId

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

Тип: string

UseSelection

Признак отображения выбранных пунктов меню: true — выбранные пункты меню отображаются; false — выбранные пункты меню не отображаются.

Тип: boolean

Value

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

Тип: any

ValueField

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

Тип: string

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

Visible

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

Тип: 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="Нажмите сюда"/>
    </Menu>
</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

Примеры