Docs
Alert

Alert

多主题信息提醒

Version: v1.0
信息
请不要在提交时修改您的输入。
警告
请确认您的设置。
报错了
任务已停止，尝试上报。
成功啦
任务已完成。

自动安装

npx tofu-ui-cli@latest add alert

手动安装 (可选)

注意
如果你使用手动安装，将无法获取更新

在项目目录中创建

components/ui/tofu/alert.tsx

复制此代码

import React, { FC } from 'react';
 
/**
 * TofuUI Alert 警报/通知
 * @author shuakami
 * @version 1.0.0
 * @copyright ByteFreeze&TofuUI
 */
 
interface AlertProps {
    title: string; // 标题
    description?: string; // 描述
    icon?: JSX.Element; // 图标，使用React元素
    type?: 'info' | 'warning' | 'error' | 'success'; // 类型
    onClose?: () => void; // 关闭函数
}
 
const Alert: FC<AlertProps> = ({
                                   title,
                                   description,
                                   icon,
                                   type = 'info',
                                   onClose
                               }) => {
    const backgroundColor = {
        info: 'bg-tofu-info',
        warning: 'bg-tofu-warning-lightest',
        error: 'bg-tofu-error',
        success: 'bg-tofu-success'
    }[type];
 
    const textColor = {
        info: 'text-tofu-info-lightest',
        warning: 'text-tofu-warning-light',
        error: 'text-tofu-error-lightest',
        success: 'text-tofu-success-lightest'
    }[type];
 
    return (
        <div className={`flex items-center gap-3 border rounded-2xl p-4 ${backgroundColor} ${textColor}`}>
            {icon && <div className="flex-shrink-0">{icon}</div>}
            <div className="flex-grow">
                <div className="font-medium">{title}</div>
                {description && <div>{description}</div>}
            </div>
            {onClose && (
                <button onClick={onClose} className="ml-auto">
                    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" className="stroke-current">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            )}
        </div>
    );
};
 
export default Alert;

参数说明

参数名类型默认值描述
titlestring-警告框标题
descriptionstring-警告框内容描述
type'info' | 'warning' | 'error' | 'success''info'警告框类型，定义背景和文字颜色
iconJSX.Element-可选，自定义图标
onClose() => void-可选，提供一个函数，用于当用户点击关闭按钮时调用

教程

简单的Alert

(～￣▽￣)～
这是一个普通的Alert
<Alert title="(～￣▽￣)～" description="这是一个普通的Alert" />

带主题

(╯‵□′)╯
这是一个成功的Alert
<Alert title="(╯‵□′)╯" description="这是一个成功的Alert" type="success" />

带图标

(～￣▽￣)～
这是一个带图标的Alert
import {AlertTriangle} from "lucide-react";
<Alert title="(～￣▽￣)～" description="这是一个带图标的Alert" icon={<AlertTriangle/>}
CLIavatar