部件与组合 | UI SDK

所有 ui-sdk 组件共享同一种形状：一个根负责状态与行为，若干部件负责结构与可访问性。部件按组件页「Composition」给出的树嵌套，根把上下文传给部件，部件之间不需要手动连线。

一棵组合树

以选择器为例：

Select
├── SelectLabel
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectItem
    └── SelectItem

import {
  Select,
  SelectContent,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/react/select";

<Select defaultValue="push" items={channels}>
  <SelectLabel>通知渠道</SelectLabel>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    {channels.map((c) => (
      <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
    ))}
  </SelectContent>
</Select>

SelectValue 自动显示选中项的标签；SelectLabel 给触发器一个可访问名字。你只声明结构，行为由根注入。

用 render 换元素

部件默认渲染一个语义合适的元素（按钮、列表、标题等）。想换成别的元素，用 render，不要找 as 属性——ui-sdk 没有 as：

<SelectTrigger render={<a href="/settings" />}>
  <SelectValue />
</SelectTrigger>

render 保留部件的全部行为与 ARIA，只替换底层元素。传一个元素或一个函数都可以。

按入口导入

每个组件一个入口：@ui-sdk/react/select、@ui-sdk/react/dialog……框架包没有根入口。这样打包器只带上你真正用到的行为。

自己造一个部件

需要的组件不在库里时，用 @ui-sdk/core 的同一批行为自己组合，得到一致的键盘、焦点、服务端渲染与 RTL 支持。参见行为与自定义组件。