UI
本页目录

组件 · 数据展示

Item 条目

通用列表项布局：Media/Content/Title/Actions 等槽位。

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

使用建议

  • 避免：与 Menu Item 类型混淆
  • 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  // …共 10 个导出
} from '@selrux/ui/item';

演练场

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

📄
季度报告.pdf

2.4 MB · 昨天更新

代码演示

基础用法

Media + Content（标题、描述）+ Actions。

📄
季度报告.pdf

2.4 MB · 昨天更新

列表

ItemGroup 组合多行，ItemSeparator 分隔；variant 为 default / outline / muted。

邮件通知

任务分配时发送

短信通知

仅紧急事项

尺寸与分隔

size；ItemSeparator 的 orientation、decorative，或以 aria-label / aria-labelledby 命名。

size="sm"
size="lg"

大号条目

已归档项目

API

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

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

Item

主题化内容行。

属性说明类型默认值
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
variant视觉变体。"outline" | "default" | "muted"-

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

ItemActions

主题化操作区。

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

ItemContent

主题化内容列。

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

ItemDescription

主题化说明。

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

ItemFooter

主题化行尾。

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

ItemGroup

主题化列表组。

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

ItemHeader

主题化行首。

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

ItemMedia

主题化媒体槽。

属性说明类型默认值
variant媒体呈现。"image" | "icon" | "default"-

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

ItemSeparator

主题化分隔；复用 Separator 视觉（对齐 shadcn ItemSeparator）。

属性说明类型默认值
aria-label多个语义分隔需要区分时提供名称。 装饰分隔不能拥有可访问名称。string-
aria-labelledby使用外部节点命名语义分隔。 装饰分隔不能引用可访问名称。string-
decorative默认保留 separator 语义。 为真时使用 presentation 并从辅助技术树隐藏。boolean-
orientation-"horizontal" | "vertical"-

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

ItemTitle

主题化标题。

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

导出类型：ItemActionsProps、ItemContentProps、ItemDescriptionProps、ItemFooterProps、ItemGroupProps、ItemHeaderProps、ItemMediaProps、ItemProps、ItemSeparatorProps、ItemSize、ItemTitleProps

无障碍

摘自源码 JSDoc。

  • ItemSeparator.aria-label：多个语义分隔需要区分时提供名称。
  • 装饰分隔不能拥有可访问名称。
  • ItemSeparator.aria-labelledby：使用外部节点命名语义分隔。
  • 装饰分隔不能引用可访问名称。