Выпадающее меню

Сворачивает меню действий под триггер и разворачивается при наведении или нажатии. Меню имеет семантику role="menu", поддерживает полную навигацию с клавиатуры (стрелки / Home / End / Enter / Esc) и roving tabindex.

Базовое использование

Наведение / нажатие и императивное использование

import { LhButton, LhDropdown, LhDropdownItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">Создать</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            Удалить
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>Развернуть</LhButton>
    </LhDropdown>
  )
}

Props компонента Dropdown

Проп	Описание	Тип	Допустимые значения	По умолчанию
children	Узел-триггер	ReactNode	—	—
dropdown	Содержимое меню (список LhDropdownItem; соответствует слоту plus #dropdown)	ReactNode	—	—
trigger	Способ срабатывания	'hover' | 'click' | 'contextmenu'	—	'hover'
placement	Положение	LhDropdownPlacement	top / bottom (включая -start / -end) и др.	'bottom-start'
disabled	Отключено	boolean	—	false
visible	Контролируемая видимость	boolean	—	—
defaultVisible	Неконтролируемая видимость по умолчанию	boolean	—	false
hideOnClick	Автоматически закрывать после нажатия на пункт меню	boolean	—	true
maxHeight	Максимальная высота меню (с прокруткой при превышении)	string | number	—	—
popperClass	Пользовательский класс меню	string	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращение для макета (применяется к триггеру)	SxProps	—	—

События Dropdown

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onCommand	Нажатие на пункт меню; передаёт его command	(command: string | number) => void	command
onVisibleChange	Изменение видимости	(visible: boolean) => void	update:visible
onClickOutside	Нажатие вне меню (при этом меню закрывается)	() => void	click-outside

Props компонента DropdownItem

Проп	Описание	Тип	Допустимые значения	По умолчанию
children	Содержимое пункта меню	ReactNode	—	—
command	Идентификатор команды, передаваемый через onCommand	string | number	—	—
disabled	Отключён (не реагирует на нажатия и не участвует в навигации с клавиатуры)	boolean	—	false
divided	Показывать разделительную линию	boolean	—	false

События DropdownItem

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onClick	Нажатие на пункт меню (может сосуществовать с onCommand)	() => void	—

ref

forwardRef<LhDropdownInstance>. LhDropdownInstance предоставляет show() / hide() / toggle() / isVisible.

Навигация с клавиатуры (шаблон меню APG)

После открытия меню фокус переходит на первый включённый пункт; ArrowUp / ArrowDown перемещаются по пунктам циклически, пропуская отключённые, Home / End перемещают к первому/последнему пункту, Enter / Space активируют текущий пункт, Esc закрывает меню и возвращает фокус на триггер. Только у пункта-якоря tabIndex={0}, у остальных -1 (roving tabindex).

Слот → prop

В plus меню передаётся через слот #dropdown, а в React для этого используется одноимённый prop dropdown; триггер contextmenu подавляет стандартное контекстное меню браузера.

Стили

import '@lh-ui/react/style/dropdown'