组件
组件总览
以下 75 项来自 package.json 的公开子路径,分为 7 类,每项都有文档页:示例渲染真实组件,属性表由类型生成。
显示 75 项
通用7
布局6
导航7
- Menu菜单纵向/横向菜单,支持 SubMenu 与选中态。
- Menubar菜单栏桌面式菜单栏。
- NavigationMenu导航菜单站点导航菜单(含弹出层级)。
- Breadcrumb面包屑层级导航面包屑。
- Pagination分页列表分页控件;常与 Table 引擎分页配置或独立列表状态联动。
- Tabs标签页标签切换:TabsList/Trigger/Panel;尺寸与变体见 tabs-options。
- DropdownMenu下拉菜单组合式下拉菜单。@selrux/ui@0.4.1 起 DropdownMenuTrigger 的 render 可换成任意可挂 ref 的元素或组件(Button、a、Avatar、span 等),等价于常见 asChild 用法;非按钮宿主自动补 role="button" 与 tabIndex,可用 nativeButton 固定首屏语义。
数据录入20
- Input输入框单行文本输入;多行备注应使用 Textarea,不要因 Input 更常用而误选。
- Textarea多行输入多行文本输入,适用于备注、说明等长文本;不要因 Input 使用频率更高而排在多行场景第一。
- InputNumber数字输入数字输入框。
- Checkbox复选框布尔勾选控件;支持受控与非受控用法,状态不能只靠颜色传达。
- RadioGroup单选组互斥单选表单控件组。
- Switch开关布尔开关;支持受控/非受控 checked。
- Select选择器单选/多选下拉选择;Trigger/Value/Content 部件,选项模型来自 headless select。
- Calendar日历保留 Headless 受控契约,仅提供视觉样式和导航图标。
- DatePicker日期选择将 Headless 日期状态适配到主题按钮与弹层,测试标记落在触发器根节点。
- TimePicker时间选择提供文本输入与点击图标打开的时间列。
- Slider滑块数值滑块输入。
- ColorPicker颜色选择颜色选择器。
- Segmented分段控制分段选择控件。
- Toggle切换按钮按下态切换按钮(非 Switch)。
- ToggleGroup切换按钮组一组互斥或多选的切换按钮。
- Label标签表单控件标签,关联可访问名称。
- Form表单布局/标签/说明/错误与 a11y 关联的表单组合壳;无内置值收集与校验引擎。可用 FormGroup/FormFieldSet 分组。
- Login登录可嵌入的登录表单组合:UI 提供品牌头、方式 Tabs、扫码角标与其他登录方式外观,@selrux/headless/login 维护切换状态及显隐行为。背景、外框、留白、宽度、页面定位及左右扩展区域由使用方自定义;鉴权与会话由宿主承担。
- Upload上传文件上传触发与列表;适配器能力以公开导出为准(HTTP/OSS 等)。只收录已验证适配器,不编造存储后端。
- Imports导入Imports 公开入口。 外层已有 Provider 时直接渲染;否则用 props 自建 Provider。
数据展示22
- Card卡片分组内容容器:标题、描述、额外区、正文与操作区;适合设置页与详情信息块。
- Tree树展示组织、目录和分类的层级结构,支持搜索、行选择、意图复选及异步分支加载;焦点、选择和勾选相互独立。
- Table表格组合式 Table 的公开根组件,保留独立于旧 Table2 入口的测试标记。
- LegacyTable旧版表格(已废弃)提供表格组合壳与引擎列模式;用于列表数据展示与分页联动。不是 DataTable/ProTable 业务框架,不内置 CRUD。
- Avatar头像用户头像:Image/Fallback/Badge/Group 等部件。
- Badge徽标计数/状态徽标;size/color/variant 为视觉属性。
- Image图片图片展示组件,含加载与失败态相关能力(以类型声明为准)。
- Item条目通用列表项布局:Media/Content/Title/Actions 等槽位。
- Marker标记标记点/标记内容展示。
- Marquee跑马灯水平/循环滚动展示内容。
- QrCode二维码将文本/URL 渲染为二维码。
- Tooltip文字提示悬停/聚焦时显示简短说明;由 TooltipTrigger + TooltipContent 等部件组成。
- Popover气泡卡片点击/受控打开的内容浮层,含 Header/Title/Body/Footer 等语义槽。
- HoverCard悬停卡片悬停触发的内容卡片;类型复用 Popover 部件 Props。
- Accordion手风琴可折叠分组内容;Item/Trigger/Panel 结构,支持单开/多开。
- Collapsible折叠面板单块内容展开/折叠。
- Empty空状态空数据占位:Header/Media/Title/Description/Content 槽位。
- Attachment附件附件展示/管理组件。
- Watermark水印内容水印覆盖层。
- PageHeader页头页面标题区:返回、标题、副标题、额外操作与页脚槽位;用于列表/详情/设置页头部。
- MessageScroller消息滚动区消息流滚动容器:Provider/Viewport/Content/Item/Button。
- Questionnaire问卷问卷/调查表单组件。
反馈10
- Alert警告提示页面内静态提示(info/success/warning/error);命令式队列用 AlertProvider + AlertHost。角色:主题视觉层,行为来自 @selrux/headless/alert。
- Toast轻提示轻量浮层提示:ToastProvider + Toaster 承载队列;命令式 API 来自 headless createToast/useToast。角色:主题视觉层。
- Dialog对话框模态对话框:DialogTrigger/Portal/Backdrop/Content 与标题描述页脚槽位。
- AlertDialog确认对话框用于确认/危险操作的告警对话框,强调取消与确认动作分区。
- Drawer抽屉抽屉层:Trigger/Portal/Overlay/Content 与滑动手柄等。
- Sheet侧边面板侧滑/底部滑入面板,含 Trigger/Content/Header 等槽位。
- Progress进度条进度展示:Track/Indicator/Label/Value 部件。
- Skeleton骨架屏加载占位骨架,可配置形状与动画。
- Spinner加载指示旋转加载指示器,可配置尺寸与颜色。
- App反馈门面 App作用域内全局反馈门面:message/notification→Toast,modal→Dialog。必须在 ConfigProvider + styles.css 子树挂载。角色:UI 反馈门面,不是 @selrux/app 应用框架。
配置3
- ConfigProvider全局配置为子树提供 mode(light/dark)、appearance(flat/layered)、size、colors 等作用域配置。省略时继承父级;无父级时 mode 默认 light、appearance 默认 flat、size 默认 md。系统外观由应用自行解析,不提供 appearance=system。不修改宿主 html 根字号。
- Theme主题主题入口:导出 ThemeMode/ThemeAppearance/ThemeColors 类型与 DEFAULT_THEME_COLORS。角色:主题配置模块(非 DOM 组件)。
- Locale语言包语言包类型入口:导出 UiLocale 等类型,不附带 zh-CN/en-US 运行时包。角色:i18n 类型模块。