通知提醒

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

导入

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={"shrink-0 pt-1 w-5"}>
          {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={
            'flex h-10 w-24 text-center leading-tight text-sm cursor-default items-center justify-center rounded bg-bg-subtle hover:bg-bg-subtlest active:bg-bg-muted'
          }
          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