Collection 内容集合
卡片与列表共享信息语义，展示方式由使用场景决定。
ContentRow 便于快速扫描，ContentCard 更适合预览图和较多说明；ViewSwitcher 切换本地展示值，LoadMore 管理分页操作的呈现。它们不获取数据或依赖 Subtic 的 Entry 模型。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/collection.json首次使用请先完成 Registry 与主题接入。
组合与状态
主链接和辅助 actions 是兄弟节点，避免嵌套交互元素。selected 仅表示视觉选中，不自动实现多选。分页状态由应用明确给出，加载失败保留已有内容并显示重试。
Props
| API / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
Row / Card title | ReactNode | 必填 | 主要内容 |
description / eyebrow / actions | ReactNode | — | 说明、分类和辅助操作 |
href / onOpen | 链接 / 回调 | — | 有 href 优先渲染链接 |
selected / disabled | boolean | false | 视觉选中 / 禁用主操作与辅助操作 |
renderLink | (props: ComponentProps<"a"> & { href: string }) => ReactNode | 原生 a | 接入框架链接并合并传入属性 |
Row leading / meta | ReactNode | — | 图标或头像、辅助信息 |
Card media / footer | ReactNode | — | 图片区域和底部信息 |
ViewSwitcher.value / onValueChange | 字符串 / 回调 | 必填 | 受控展示值 |
ViewSwitcher.options / label | 选项数组 / 名称 | 必填 | { value, label, icon? } |
LoadMore.state | idle / loading / error / end | 必填 | 分页状态 |
LoadMore.onLoad | () => void | 必填 | 加载或重试 |
LoadMore.labels / error | 文案 map / ReactNode | 中文文案 / — | 可覆盖每个状态 |
LoadMore 默认文案为“加载更多”“正在加载…”“已经全部看完了”，错误动作使用 Provider 的“重试”。ViewSwitcher 支持 disabled=false；Row/Card 支持 className。完整示例见内容集合模式。
键盘与约束
有 href 时提供原生链接行为，有 onOpen 时使用按钮，无操作时保持静态内容。ViewSwitcher 使用原生 radio，支持方向键。调用方需要处理分页并发、响应顺序和去重。
避免这样使用
不要在 title、description 或 media 中再放链接或按钮，交互应进入 actions / footer；不要只切换视觉但丢失搜索与选择状态；不要把读取失败伪装成“已加载全部”。
来源与版本
0.1.0，来自 Subtic apps/web/components/collection-layout.tsx、collection-list-row.tsx、collection-card-frame.tsx、collection-pagination.tsx。保留呈现，数据请求和领域动作留在应用。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
ContentRow
| 属性 | 类型 | 默认值 |
|---|---|---|
title | ReactNode | — |
description? | ReactNode | — |
href? | string | — |
onOpen? | () => void | — |
selected? | boolean | false |
disabled? | boolean | false |
renderLink? | (props: ComponentProps<"a"> & { href: string }) => ReactNode | — |
actions? | ReactNode | — |
className? | string | — |
leading? | ReactNode | — |
meta? | ReactNode | — |
eyebrow? | ReactNode | — |
ContentCard
| 属性 | 类型 | 默认值 |
|---|---|---|
title | ReactNode | — |
description? | ReactNode | — |
href? | string | — |
onOpen? | () => void | — |
selected? | boolean | false |
disabled? | boolean | false |
renderLink? | (props: ComponentProps<"a"> & { href: string }) => ReactNode | — |
actions? | ReactNode | — |
className? | string | — |
media? | ReactNode | — |
eyebrow? | ReactNode | — |
footer? | ReactNode | — |
ViewSwitcher
| 属性 | 类型 | 默认值 |
|---|---|---|
value | string | — |
onValueChange | (value: string) => void | — |
options | readonly ViewOption[] | — |
label | string | — |
disabled? | boolean | false |
className? | string | — |
LoadMore
| 属性 | 类型 | 默认值 |
|---|---|---|
state | LoadMoreState | — |
onLoad | () => void | — |
labels? | Partial<{ idle: string; loading: string; error: string; end: string }> | — |
error? | ReactNode | — |