Alert.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/alert.tsx

功能描述

警告/提示框组件，用于向用户显示重要信息或通知。支持默认和破坏性两种变体样式，可包含标题和描述。

导出内容

• Alert - 主警告框容器组件
• AlertTitle - 警告标题组件
• AlertDescription - 警告描述组件

Props 接口

Alert

属性	类型	必填	默认值	说明
variant	`'default' \	'destructive'`	否	'default'	警告框变体样式
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	其他div原生属性

AlertTitle

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	其他div原生属性

AlertDescription

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	其他div原生属性

依赖

• class-variance-authority - 用于变体样式管理
• @/lib/utils - 工具函数 (cn)

使用示例

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";

// 默认样式
<Alert>
  <AlertCircle className="size-4" />
  <AlertTitle>注意</AlertTitle>
  <AlertDescription>
    这是一条重要的提示信息。
  </AlertDescription>
</Alert>

// 破坏性样式
<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertTitle>错误</AlertTitle>
  <AlertDescription>
    操作失败，请重试。
  </AlertDescription>
</Alert>