@ug666/react 文档演示

Alert 提示

Alert 用于页面内重要提醒，适合持续可见的信息提示或风险告知。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Alert, AlertTitle, AlertDescription } from '@ug666/react'

变体预览

信息、成功、警告与危险提示。

文档迁移中

当前页面已切换到 Astro 渲染。

部署成功

所有静态页面已生成并上传。

内容待确认

请核对组件 Props 与示例代码是否一致。

构建失败

检测到类型错误，需要先修复再发布。

状态展示

适合强调持续状态，而非瞬时反馈。

默认提示

用于通用说明与注意事项。

尺寸展示

Alert 通常撑满容器宽度，通过容器控制信息密度。

紧凑提示适合卡片内说明。

宽版提示适合页首公告与重要迁移说明。

代码示例

Alert 最适合放在页面主体中持续可见的位置。

import { Alert, AlertDescription, AlertTitle } from '@ug666/react'

export function PublishAlert() {
  return (
    <Alert variant="warning">
      <AlertTitle>发布前确认</AlertTitle>
      <AlertDescription>当前页面仍包含未翻译的英文内容，请先检查完整性。</AlertDescription>
    </Alert>
  )
}

Props 说明

属性	类型	默认值	说明
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'destructive'	'default'	定义提示语义与配色。
children	ReactNode	—	通过 AlertTitle 与 AlertDescription 组合内容。