第 3 课：Radix UI

Composition 模式 — 无头组件的底层逻辑

Dialog — Composition 模式

每个子组件都是独立的原语，可以自由组合：

<Dialog.Root>
  <Dialog.Trigger />      {/* 触发器 */}
  <Dialog.Portal>         {/* 传送门 */}
    <Dialog.Overlay />    {/* 遮罩层 */}
    <Dialog.Content>      {/* 内容区 */}
      <Dialog.Title />    {/* 标题（ARIA） */}
      <Dialog.Description /> {/* 描述 */}
      <Dialog.Close />    {/* 关闭按钮 */}
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Tabs — 键盘导航

用方向键切换 Tab，自动管理焦点和 ARIA 属性。

Switch — 可访问性

开启通知

自动注入 role="switch"、aria-checked 等属性