三、核心组件详解
Radix UI提供了超过50个高质量的组件原语，以下是中后台开发中最常用的核心组件及其详细用法。
3.1 对话框组件 Dialog
Dialog（对话框）是Radix UI中最常用的组件之一，用于在页面上方显示重要信息或收集用户输入。
组件结构：
关键特性：
焦点管理：打开时自动将焦点移至对话框内，关闭时恢复到触发元素
键盘支持：Esc键关闭对话框
可访问性：内置正确的ARIA属性（role="dialog"、aria-modal="true"）
动画支持：提供data-state属性（"open"/"closed"），可配合CSS动画
3.2 下拉菜单组件 Dropdown Menu
下拉菜单是创建右键菜单、下拉选择、用户菜单等交互的核心组件。
组件结构：
关键特性：
键盘导航：上下键移动、Enter键选择、Esc键关闭
子菜单支持：可无限嵌套
复选框和单选框：内置选中状态管理
右键菜单：可作为上下文菜单使用
3.3 导航菜单组件 Navigation Menu
导航菜单是构建复杂响应式导航栏的核心组件，支持水平菜单、下拉菜单和巨型菜单。
组件结构：
关键特性：
支持延迟关闭（可配置延迟时间）
支持巨型菜单（Mega Menu）
移动端自动适配
键盘导航支持
3.4 弹窗组件 Popover
Popover用于显示临时内容，如提示信息、表单输入等，与Dialog不同，它通常用于非模态的上下文内容。
组件结构：
关键特性：
多种触发方式：click、hover、focus
智能定位：自动调整位置避免溢出视口
箭头组件：内置指向触发元素的箭头
3.5 工具提示组件 Tooltip
Tooltip用于在用户悬停或聚焦时显示提示信息。
组件结构：
关键特性：
延迟显示/隐藏（可配置）
智能定位
键盘支持（聚焦时显示）
3.6 折叠面板组件 Accordion
Accordion用于在有限空间内组织多个可折叠的内容面板。
组件结构：
关键特性：
支持单选/多选模式
键盘导航（上下键切换、Home/End键）
动画支持
3.7 标签页组件 Tabs
Tabs用于在同一区域切换不同内容的视图。
组件结构：
关键特性：
键盘导航：左右键切换标签
支持受控和非受控模式
循环导航支持
3.8 其他重要组件
Radix UI还提供了大量其他高质量的组件原语：
四、可访问性（Accessibility）
4.1 Radix UI的无障碍设计原则
Radix UI将可访问性（a11y）作为第一优先级。每个组件从设计之初就遵循以下原则：
1.语义化HTML
组件输出语义化的HTML元素，而不是充斥着div的“div soup”。例如：
Dialog使用
NavigationMenu使用元素
Tabs使用[role="tablist"]、[role="tab"]、[role="tabpanel"]
2.完整的ARIA属性
每个组件都自动设置正确的ARIA属性：
aria-label、aria-labelledby：为元素提供可访问名称
aria-expanded：标识展开/折叠状态
aria-selected：标识选中状态
aria-hidden：控制元素对辅助技术的可见性
aria-modal：标识模态对话框
3.键盘导航
所有交互组件都支持完整的键盘操作：
Dialog：Tab键在对话框内循环，Esc键关闭
DropdownMenu：上下键导航，Enter/Space选择，Esc关闭
Tabs：左右键切换标签，Home/End键跳转首尾
Accordion：上下键切换面板，Home/End键跳转首尾
4.焦点管理
Radix UI自动处理复杂的焦点管理逻辑：
打开Dialog时，焦点自动移至对话框内
关闭Dialog时，焦点自动恢复到触发元素
使用Portal时，焦点仍然正确管理
支持focus-trap（焦点陷阱），防止焦点逃逸
4.2 如何利用Radix UI构建无障碍应用
虽然Radix UI提供了底层支持，但构建完全无障碍的应用还需要你的配合：
- 始终提供aria-label
// 图标按钮必须有aria-label <IconButton aria-label="设置">⚙️</IconButton> - 使用语义化组件
// 使用Dialog.Title和Dialog.Description <Dialog.Title>删除确认</Dialog.Title> <Dialog.Description>此操作不可撤销。</Dialog.Description> - 正确处理焦点
// 在模态框内自动聚焦到第一个可交互元素 <Dialog.Content onOpenAutoFocus={(e) => { e.preventDefault(); inputRef.current?.focus(); }}>
