• 简体中文
  • Alert 警告提示

    在页面中提示操作结果或需要关注的信息。

    提示类型

    交互预览提示类型
    项目已保存
    有新的版本可用
    你可以在方便的时候更新。
    basic.tsx
    import { Alert } from '@sudden3/leaf-ui';
    export function AlertBasic() {
      return (
        <div className="leaf-demo-stack leaf-demo-stack--wide">
          <Alert title="项目已保存" type="success" />
          <Alert title="有新的版本可用" description="你可以在方便的时候更新。" closable />
          <Alert title="请检查当前设置" type="warning" />
          <Alert title="保存失败" description="请稍后重试,或联系团队管理员。" type="error" />
        </div>
      );
    }
    

    Alert API

    属性类型默认值说明
    titleReactNode必填提示内容
    descriptionReactNode—补充说明
    type'success' | 'info' | 'warning' | 'error''info'提示类型
    showIconbooleantrue展示语义图标
    closablebooleanfalse允许关闭当前提示
    onClose() => void—关闭后触发

    类型

    定义组件属性或组装变量时可导入相关类型。

    import type { AlertProps, FeedbackType } from '@sudden3/leaf-ui';

    使用说明

    成功、普通信息、警告和错误使用不同语义颜色。业务文字由应用提供;关闭按钮名称沿用 ConfigProvider 语言。