React 组件

UGAlert 提示

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGAlert, UGAlertTitle, UGAlertDescription } from '@ug666/ui-react'

变体预览

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

信息已更新

当前页面显示最新的业务状态。

提交成功

变更已保存并通知相关成员。

内容待确认

请核对表单内容与操作范围是否一致。

提交失败

请检查表单内容后重试。

状态展示

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

默认提示

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

尺寸展示

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

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

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

代码示例

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

tsx

import { UGAlert, UGAlertDescription, UGAlertTitle } from '@ug666/ui-react'

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

Props

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