警告提示

查看源代码

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

导入

import { Alert, AlertIndicator, AlertTitle, AlertDescription } from "@resolid/react-ui";
  • Alert: 警告提示组件的包装器。
  • AlertIndicator: 根据状态属性变化的警告提示的视觉指示器。(可选)
  • AlertContent: 警告的内容主体。(可选)
  • AlertTitle: 警告的标题，可以供屏幕阅读器宣读。(可选)
  • AlertDescription: 警告的描述，可以供屏幕阅读器宣读。(可选)

用法

颜色

举例

外观

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

警告有六种不同的颜色可供使用。通过传递 color 属性，可以选择使用 primary、secondary、success、warning、danger 和 neutral 这些颜色。

import {
  Alert,
  AlertIndicator,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  const alertIcons = {
    primary: "github-NOTE",
    secondary: "github-IMPORTANT",
    success: "github-TIP",
    warning: "github-WARNING",
    danger: "github-CAUTION",
    neutral: undefined,
  };

  return (
    <div className={"flex flex-col gap-3"}>
      {["primary", "secondary", "success", "warning", "danger", "neutral"].map((color) => (
        <div key={color} className={"flex flex-row items-center justify-between gap-3"}>
          {["solid", "outline", "subtle", "soft"].map((variant) => (
            <Alert
              key={`${color}-${variant}`}
              color={color}
              variant={variant}
              className={"flex flex-row gap-2"}
            >
              {alertIcons[color] ? (
                <AlertIndicator className={"pt-1.75"}>
                  <SpriteIcon name={alertIcons[color]} />
                </AlertIndicator>
              ) : null}
              <AlertContent>
                <AlertTitle>警告</AlertTitle>
                <AlertDescription>显示简短重要信息</AlertDescription>
              </AlertContent>
            </Alert>
          ))}
        </div>
      ))}
    </div>
  );
}

关闭按钮

import {
  Alert,
  AlertIndicator,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertCloseButton,
} from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <Alert className={"flex flex-row gap-2"}>
      <AlertIndicator className={"pt-1.75"}>
        <SpriteIcon name={"github-NOTE"} />
      </AlertIndicator>
      <AlertContent>
        <AlertTitle>警告提示</AlertTitle>
        <AlertDescription>
          以吸引用户注意力的方式显示简短重要信息，而不会打断用户正在进行的任务。
        </AlertDescription>
      </AlertContent>
      <AlertCloseButton className={"absolute end-3 top-3"} />
    </Alert>
  );
}

属性

属性variant简介

外观

类型"solid" | "outline" | "subtle" | "soft"默认值"soft"必须false
属性color简介

颜色

类型"primary" | "secondary" | "neutral" | "success" | "warning" | "danger"默认值"primary"必须false

建议更改此页面