Dropdown 下拉選單

將動作選單摺疊到觸發器之下，停留或點選展開。選單為 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>
  )
}

Dropdown Props

屬性	說明	型別	可選值	預設值
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

DropdownItem Props

屬性	說明	型別	可選值	預設值
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 menu pattern）

開啟選單後焦點落在首個啟用項；ArrowUp / ArrowDown 循環移動並跳過停用項， Home / End 直達首尾，Enter / Space 激活當前項，Esc 關閉並把焦點歸還觸發器。 僅錨點項 tabIndex={0}，其餘為 -1（roving tabindex）。

插槽 → prop

plus 用 #dropdown 插槽承載選單，React 側改為同名 dropdown prop； contextmenu 觸發會阻止瀏覽器預設右鍵選單。

樣式

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