通知提醒

全局展示通知提醒，将信息及时有效的传达给用户。

导入

import { useToast, Toast, ToastTitle, ToastDescription, ToastCloseButton } from "@resolid/react-ui";

useToast: 警告提示组件的包装器。
Toast: 通知提醒组件的包装器。
ToastTitle: 通知提醒的标题，可以供屏幕阅读器宣读。
ToastDescription: 通知提醒的描述，可以供屏幕阅读器宣读。
ToastCloseButton: 关闭通知提醒的按钮。

基础

const { create } = useToast();

return (
  <Button
    onClick={() => {
      create(
        <Toast className={"flex gap-2"}>
          <span className={"shrink-0 pt-1"}>
            <SpriteIcon name={"info"} />
          </span>
          <div className={"flex flex-col gap-1"}>
            <ToastTitle>通知提醒</ToastTitle>
            <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
          </div>
          <ToastCloseButton />
        </Toast>,
      );
    }}
  >
    显示通知提醒
  </Button>
);

更新

const { create, update } = useToast();
const toastId = useRef();

return (
  <>
    <Button
      onClick={() => {
        toastId.current = create(
          <Toast className={"flex gap-2"}>
            <span className={"shrink-0 pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
        );
      }}
    >
      显示通知提醒
    </Button>
    <Button
      color={"neutral"}
      onClick={() => {
        update(
          toastId.current,
          <Toast color={"success"} className={"flex gap-2"}>
            <span className={"shrink pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>更新通知提醒内容。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
        );
      }}
    >
      更新通知提醒
    </Button>
  </>
);

持续时间

const { create } = useToast();

return (
  <>
    <Button
      onClick={() => {
        create(
          <Toast className={"flex gap-2"}>
            <span className={"shrink-0 pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
          { duration: 10000 },
        );
      }}
    >
      通知提醒持续 10 秒
    </Button>
    <Button
      onClick={() => {
        create(
          <Toast className={"flex gap-2"}>
            <span className={"shrink-0 pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
          { duration: null },
        );
      }}
    >
      通知提醒不会自动关闭
    </Button>
  </>
);

关闭回调

const { create } = useToast();

return (
  <Button
    onClick={() => {
      create(
        <Toast onDismiss={() => alert("通知提醒关闭回调")} className={"flex gap-2"}>
          <span className={"shrink-0 pt-1"}>
            <SpriteIcon name={"info"} />
          </span>
          <div className={"flex flex-col gap-1"}>
            <ToastTitle>通知提醒</ToastTitle>
            <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
          </div>
          <ToastCloseButton />
        </Toast>,
      );
    }}
  >
    显示通知提醒
  </Button>
);

处理承诺

const { promise } = useToast();

const promiseFn = (state) => {
  return state == "success"
    ? new Promise((resolve) => setTimeout(() => resolve({ message: "处理承诺成功" }), 3000))
    : new Promise((resolve, reject) => setTimeout(reject, 3000));
};

const handleClick = (state) => {
  promise(promiseFn(state), ({ state, data, error }) => {
    return (
      <Toast
        className={"flex gap-2"}
        color={state == "success" ? "success" : state == "failure" ? "danger" : undefined}
      >
        <span className={"w-5 shrink-0 pt-1"}>
          {state == "success" && <SpriteIcon name={"check"} />}
          {state == "failure" && <SpriteIcon name={"info"} />}
          {state == "pending" && <Spinner />}
        </span>
        <div className={"flex flex-col gap-1"}>
          <ToastTitle>通知提醒</ToastTitle>
          <ToastDescription className={"text-sm"}>
            {state == "success" && data?.message}
            {state == "failure" && "处理承诺失败"}
            {state == "pending" && "开始处理承诺..."}
          </ToastDescription>
        </div>
        {state != "pending" && <ToastCloseButton />}
      </Toast>
    );
  });
};

return (
  <>
    <Button color={"success"} onClick={() => handleClick("success")}>
      处理承诺成功
    </Button>
    <Button color={"danger"} onClick={() => handleClick("failure")}>
      处理承诺失败
    </Button>
  </>
);

颜色

const { create } = useToast();

return ["primary", "neutral", "success", "warning", "danger"].map((color) => {
  return (
    <Button
      key={color}
      color={color}
      onClick={() => {
        create(
          <Toast color={color} className={"flex gap-2"}>
            <span className={"shrink-0 pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
        );
      }}
    >
      <span className={"first-letter:uppercase"}>{color}</span>
    </Button>
  );
});

外观

const { create } = useToast();

return ["solid", "outline", "soft", "subtle"].map((variant) => {
  return (
    <Button
      key={variant}
      variant={variant}
      onClick={() => {
        create(
          <Toast variant={variant} className={"flex gap-2"}>
            <span className={"shrink-0 pt-1"}>
              <SpriteIcon name={"info"} />
            </span>
            <div className={"flex flex-col gap-1"}>
              <ToastTitle>通知提醒</ToastTitle>
              <ToastDescription className={"text-sm"}>全局展示通知提醒，将信息及时有效的传达给用户。</ToastDescription>
            </div>
            <ToastCloseButton />
          </Toast>,
        );
      }}
    >
      <span className={"first-letter:uppercase"}>{variant}</span>
    </Button>
  );
});

位置

const { create, clear } = useToast();

return (
  <div
    className={"mx-auto grid w-fit gap-2"}
    style={{
      gridTemplateAreas:
        '"top-start     top         top-end"' +
        '".            center       ."' +
        '"bottom-start  bottom      bottom-end"',
    }}
  >
    {[
      ["top-start", "上左"],
      ["top", "上"],
      ["top-end", "上右"],
      ["center", "关闭全部"],
      ["bottom-start", "下左"],
      ["bottom", "下"],
      ["bottom-end", "下右"],
    ].map(([placement, name]) => {
      return (
        <button
          key={placement}
          style={{ gridArea: placement }}
          className={
            "bg-bg-subtle hover:bg-bg-subtlest active:bg-bg-muted flex h-10 w-24 cursor-default items-center justify-center rounded text-center text-sm leading-tight"
          }
          onClick={() => {
            placement === "center"
              ? clear()
              : create(
                  <Toast className={"flex gap-2"}>
                    <span className={"shrink-0 pt-1"}>
                      <SpriteIcon name={"info"} />
                    </span>
                    <div className={"flex flex-col gap-1"}>
                      <ToastTitle>通知提醒</ToastTitle>
                      <ToastDescription className={"text-sm"}>
                        全局展示通知提醒，将信息及时有效的传达给用户。
                      </ToastDescription>
                    </div>
                    <ToastCloseButton />
                  </Toast>,
                  {
                    placement: placement,
                  },
                );
          }}
        >
          {name}
        </button>
      );
    })}
  </div>
);

全局配置

您可以通过将 toastOptions 属性传递给 ResolidProvider 组件来全局配置 toast。拥有以下几个属性

duration 自动关闭延时, 设置为 null 时不自动关闭, 默认值 5000
placement 放置位置, 默认值 bottom
spacing Toast 之间的间隔, 默认值 0.75rem

Hook API

useToast 返回 5 个方法来操作 Toast

const { create, update, promise, dismiss, clear } = useToast();

ToastOptions 拥有 3 个选项

id toast 不可重复的 id; 可选
duration 自动关闭延时, 默认使用 ResolidProvider 提供的值; 可选
placement 显示位置, 默认使用 ResolidProvider 提供的值; 可选

create

(component: ToastComponent, options?: ToastOptions) => ToastId

根据当前状态、区域和限制将新的 toast 添加到可见 toast 或队列，并返回创建的 toast 的 id。

update

(id: ToastId, component: ToastComponent) => void

使用新渲染的组件更新给定 id 的 toast。

promise

(promise: Promise | (() => Promise), component: ToastPromiseComponent, options?: ToastOptions) => ToastId

根据当前状态和限制，将新的基于承诺的 toast 添加到可见 toast 或队列，并返回创建的 toast 的 id。

ToastPromiseComponent 拥有 3 个属性

state promise 的状态，可以是 "pending" | "success" | "failure"
data promise 履行时返回的数据（如果有）
error promise 被拒绝时返回的错误（如果有）

dismiss

(id: ToastId) => void

从可见 toast 和队列中删除具有给定 id 的 toast。

clear

clear: (...args: ToastPlacement[]) => void

从可见 toast 和队列中删除所有 toast。

属性

Toast

属性	类型	默认值	必须
属性variant	类型"solid" \| "outline" \| "soft" \| "subtle"	默认值'soft'	必须false
属性color	类型"primary" \| "neutral" \| "success" \| "warning" \| "danger"	默认值'primary'	必须false
属性priority	类型"high" \| "low"	默认值'high'	必须false
属性onDismiss	类型() => void	默认值-	必须false