UI
本页目录

组件 · 数据展示

Card 卡片

分组内容容器：标题、描述、额外区、正文与操作区；适合设置页与详情信息块。

入口 @selrux/ui/card · 源码 src/components/card/index.ts · 12 个组件 · 发布状态 preview

使用建议

  • 避免：为装饰堆叠多层卡片阴影
  • 限制：未标 stable

引入

tsx
import {
  Card,
  CardActions,
  CardBody,
  CardClose,
  CardCollapseTrigger,
  CardContent,
  // …共 12 个导出
} from '@selrux/ui/card';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

通知设置

选择接收提醒的方式

邮件与站内信将在任务状态变化时发送。
最近更新：今天

代码演示

基础用法

Header（标题、描述、附加区）+ Body（内容、页脚、操作）。

通知设置

选择接收提醒的方式

更多
邮件与站内信将在任务状态变化时发送。
最近更新：今天

外观

variant 为 outlined / borderless / embedded；dividers 控制分隔线。

outlined

内容区域

borderless

内容区域

embedded

内容区域

可折叠与加载

collapsible 在标题栏加入折叠按钮；loading 显示占位。

可折叠卡片

点击标题栏右侧按钮折叠。

加载中

加载中

尺寸与图标

size 控制内边距与字号；CardTitle 的 icon 放标题前的装饰图标。

size="sm"

本月新增客户 128 位。

size="md"

本月新增客户 128 位。

size="lg"

本月新增客户 128 位。

受控折叠与关闭

collapsed + onCollapsedChange 受控折叠，unmountOnCollapse 折叠时卸载正文；传 onClose 时显示关闭按钮，卡片不会自动移除，由调用方决定。

筛选条件

collapsed = false

状态：启用；负责人：运营；创建时间：近 30 天。

滚动与固定操作区

限高时 CardContent 的 scrollable 让正文滚动，fixedActions 固定底部操作；loadingFallback 为加载中占位。

操作日志

10:00 管理员修改了权限配置

10:01 管理员修改了权限配置

10:02 管理员修改了权限配置

10:03 管理员修改了权限配置

10:04 管理员修改了权限配置

10:05 管理员修改了权限配置

10:06 管理员修改了权限配置

10:07 管理员修改了权限配置

10:08 管理员修改了权限配置

10:09 管理员修改了权限配置

10:10 管理员修改了权限配置

10:11 管理员修改了权限配置

加载中

正在获取数据…

API

属性覆盖：示例用到 15 / 15 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

  • Card.collapseFocusRef：焦点目标 ref，效果不可见；行为见“无障碍”

Card

解析本域尺寸和外观；行为状态唯一保留在 headless。

属性说明类型默认值
collapsible是否启用折叠；默认 false。booleanfalse
unmountOnCollapse折叠后卸载 Body 子树；默认保留。boolean-
loading替换 Content 内容，保留 Header 和操作区。boolean-
fixedActions限高时固定底部 Actions（及 Footer），仅 Content 滚动；默认 false。 高度由调用方 maxBlockSize 或父级约束提供。booleanfalse
onCollapsedChange折叠请求；受控父级可以拒绝。((collapsed: boolean) => void)-
onClose关闭请求，不自动移除卡片。((event: MouseEvent<HTMLButtonElement>) => void)-
collapseFocusRef隐藏内容前的备用焦点目标，应位于本卡 Header。RefObject<HTMLElement | null>-
collapsed-boolean-
defaultCollapsed-boolean-
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
variant-"outlined" | "borderless" | "embedded"-
dividers-"none" | "all" | "content"-

另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。

CardActions

为 CardActions 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardBody

为 CardBody 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 276 项原生属性继承自 HTMLAttributes。

CardClose

为 CardClose 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 288 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

CardCollapseTrigger

为 CardCollapseTrigger 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 286 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

CardContent

为 CardContent 添加局部样式类，原生属性和 ref 保留在真实节点。

属性说明类型默认值
loadingFallback-ReactNode-
scrollable必须通过局部 CSS/style 提供高度约束。boolean-

另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。

CardCover

为 CardCover 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardDescription

为 CardDescription 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardExtra

为 CardExtra 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardFooter

为 CardFooter 添加局部样式类，原生属性和 ref 保留在真实节点。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardHeader

为 CardHeader 添加局部样式；主列放标题/描述，Extra 固定在逻辑末端。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

CardTitle

为 CardTitle 添加局部样式类；截断时指针悬停展示完整标题。

属性说明类型默认值
level默认 h2，由页面作者显式设置层级。1 | 2 | 3 | 4 | 5 | 6h2
icon标题前的装饰图标，可传 Icon/SVG；不应包含交互控件，名称由标题文字提供。ReactNode-

另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：CardActionsProps、CardBodyProps、CardCloseProps、CardCollapseTriggerProps、CardContentProps、CardCoverProps、CardDescriptionProps、CardDividers、CardExtraProps、CardFooterProps、CardHeaderProps、CardProps、CardSize、CardTitleProps、CardVariant

无障碍

摘自源码 JSDoc。

  • Card.collapseFocusRef：隐藏内容前的备用焦点目标，应位于本卡 Header。