UI
本页目录

组件 · 反馈

Alert 警告提示

页面内静态提示（info/success/warning/error）；命令式队列用 AlertProvider + AlertHost。角色：主题视觉层，行为来自 @selrux/headless/alert。

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

使用建议

  • 避免：用 Alert 冒充 Toast 浮层
  • 避免：杜撰不存在的 type 枚举
  • 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx
import {
  Alert,
  AlertAction,
  AlertClose,
  AlertDescription,
  AlertHost,
  AlertItem,
  // …共 13 个导出
} from '@selrux/ui/alert';

演练场

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

提示
这是一条警告提示内容。

代码演示

类型

type 为 default / info / success / warning / error，default 无图标。

info
type="info" 的提示内容。
success
type="success" 的提示内容。
warning
type="warning" 的提示内容。
error
type="error" 的提示内容。
default
type="default" 的提示内容。

外观与关闭

appearance 为 soft / outline；closable 显示关闭按钮。

描边外观
可关闭
点击右侧按钮关闭。

尺寸与图标

size 六档；showIcon={false} 隐藏默认图标，icon 替换为自定义图标。

size="sm"：本周五 22:00 系统维护
size="md"：本周五 22:00 系统维护
size="lg"：本周五 22:00 系统维护
showIcon=false：不显示图标
自定义 icon：存储空间使用已超过 90%

受控显隐

closable 的 Alert 用 defaultOpen / onOpenChange 管理是否显示，可在外部恢复。

账号即将到期
请在 7 天内续费，到期后将无法登录。
open = true

命令式提示

createAlert 创建实例交给 AlertProvider，AlertHost 渲染队列；maxVisible / maxQueued 限制同时显示与排队数量。

API

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

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

  • Alert.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示

Alert

声明式 UI Alert：Token 外观 + 可选默认图标。

属性说明类型默认值
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
appearance-"soft" | "outline"-
classNames-Partial<Record<AlertSemanticSlot, string>> | ((info: { props: AlertProps; }) => ResolvedAlertClassNames | undefined)-
styles-Partial<Record<AlertSemanticSlot, CSSProperties>> | ((info: { props: AlertProps; }) => ResolvedAlertStyles | undefined)-
type-"default" | "info" | "success" | "warning" | "error"-
showIcon-boolean-
icon-ReactNode-
closable-boolean-
defaultOpen-boolean-
onOpenChange-((open: boolean) => void)-

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

AlertAction

声明式操作槽布局。

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

AlertClose

关闭按钮配默认图标与命中区域。

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

AlertDescription

辅助说明保留正文对比度与自然换行。

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

AlertHost

在 Provider 捕获的主题域下挂载文档流 Host。

属性说明类型默认值
children-((item: AlertSnapshot) => ReactNode)-

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

AlertItem

UI 项仅增加命名空间样式。

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

AlertItemAction

Host 项动作按钮视觉。

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

AlertProvider

无 DOM 主题适配，尺寸按 prop → ConfigProvider → md 解析。

属性说明类型默认值
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
alert-AlertApi-
maxVisible-number-
maxQueued-number-

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

AlertTitle

标题静态外观。

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

导出类型：AlertActionOptions、AlertActionProps、AlertApi、AlertAppearance、AlertCloseProps、AlertCloseReason、AlertCloseResult、AlertDescriptionProps、AlertHandle、AlertHostProps、AlertIconSlotProps、AlertItemActionProps、AlertItemProps、AlertLocale、AlertOptions、AlertPatch、AlertProps、AlertProviderProps、AlertQueueOptions、AlertSemanticSlot、AlertSnapshot、AlertTitleProps、AlertType、ResolvedAlertClassNames、ResolvedAlertStyles

函数与常量

名称说明签名 / 类型
createAlert创建可从业务模块直接调用的实例；绑定 Provider 前不缓存跨请求消息。() => AlertApi
useAlert获取上下文中的命令 API，与 createAlert 实例完全相同。() => AlertApi
useAlertItemHost 项部件必须属于 render 函数提供的唯一 item。() => { item: AlertSnapshot; }
useAlertRoot声明式部件读取根上下文。() => AlertRootContextValue