组件 · 数据展示
Attachment 附件
附件展示/管理组件。
使用建议
- 避免：绕过上传组件直接伪造完成态
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentGroup,
// …共 9 个导出
} from '@selrux/ui/attachment';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
文件名、描述与操作。
状态
state 为 idle / uploading / processing / done / error。
尺寸、方向与操作
size；orientation="vertical" 纵向卡片；AttachmentAction 的 color / size / loading / loadingLabel；AttachmentTrigger 用 render 让整卡可点击。
API
属性覆盖：示例用到 10 / 10 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Attachment
主题化附件卡片。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 六档视觉尺寸。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
state | 上传生命周期；默认 done。 | "done" | "error" | "idle" | "uploading" | "processing" | done |
orientation | 主轴方向；默认 horizontal。 | "horizontal" | "vertical" | horizontal |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
AttachmentAction
主题化操作按钮。 复用 Button；默认 ghost / carbon / xs，适合图标移除/重试。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 语义色。省略为 primary。 | "info" | "success" | "warning" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | primary |
variant | 展示方式。省略为 solid。 | "link" | "outline" | "ghost" | "solid" | solid |
size | 尺寸。省略时使用 ConfigProvider，无配置时为 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
loading | 为真时阻止再次激活，并保留动作名称和焦点。 | boolean | false |
loadingLabel | 忙碌辅助说明。省略时使用当前语言包。 | string | - |
children | 按钮内容。图标作为子节点组合。 | ReactNode | - |
另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
AttachmentActions
主题化操作区。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AttachmentContent
主题化内容列。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AttachmentDescription
主题化说明。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AttachmentGroup
主题化横向附件组。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AttachmentMedia
主题化媒体槽。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
variant | 图标或图片呈现；默认 icon。 | "image" | "icon" | icon |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
AttachmentTitle
主题化标题；uploading/processing 时自动叠加 .shimmer。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AttachmentTrigger
主题化全卡触发层；支持 render 多态。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
render | 根元素替换；须为单个可接收 ref 的 React 元素。 对齐 Marker / shadcn useRender。 | ReactElement<unknown, string | JSXElementConstructor<any>> | - |
另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
导出类型：AttachmentActionProps、AttachmentActionsProps、AttachmentContentProps、AttachmentDescriptionProps、AttachmentGroupProps、AttachmentMediaProps、AttachmentMediaVariant、AttachmentOrientation、AttachmentProps、AttachmentSize、AttachmentState、AttachmentTitleProps、AttachmentTriggerProps
无障碍
摘自源码 JSDoc。
AttachmentAction.loading：为真时阻止再次激活，并保留动作名称和焦点。