警告提示

以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。

导入

import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@resolid/react-ui";
  • Alert: 警告提示组件的包装器。
  • AlertIcon: 根据状态属性变化的警告提示的可视化图标。
  • AlertTitle: 警告的标题，可以供屏幕阅读器宣读。
  • AlertDescription: 警告的描述，可以供屏幕阅读器宣读。

用法

颜色

外观

警告有四种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、outline、soft、subtle 中的任意一种。

<Alert className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert variant={'outline'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert variant={'solid'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert variant={'subtle'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>

颜色

通过传递 color 属性来更改警告的颜色。警告提醒支持 primary、success、warning、danger 和 neutral 这些颜色。

<Alert className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert color={'neutral'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert color={'success'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert color={'warning'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>
<Alert color={'danger'} className={"flex flex-row gap-2"}>
  <AlertIcon className={"pt-1"}><SpriteIcon name={"info"} /></AlertIcon>
  <div>
    <AlertTitle>警告提示</AlertTitle>
    <AlertDescription>以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。</AlertDescription>
  </div>
</Alert>

属性

属性variant类型"solid" | "outline" | "soft" | "subtle"默认值'soft'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false