Geist UI

useToast / 通知

显示重要的全局通知信息。

基础的

基础示例。

多行

显示多行或过长的文本。

动作

在通知中附加一个按钮。

取消

使用 passive (消极地) 改变按钮的状态与样式。

自定义模板

以 ReactNode 代替字符串展示更丰富的信息。

类型

APIs / 接口文档

`useToasts`

const {
  // 当前 DOM 中所有可用实例
  toasts: Array<Toast>

  // 创建一个立即显示的通知
  setToast: (toast: ToastInput) => void

  // 立刻隐藏所有的通知
  removeAll: () => void

  // 按 ID 查询指定的实例
  findToastOneByID: (ident: string) => Toast | undefined

  // 按 ID 移除一个指定通知
  removeToastOneByID: (ident: string) => void
} = useToasts(layout: ToastLayout)

`ToastLayout`

参数	描述	类型	默认值
padding	通用 CSS 属性	`string`	-
margin	通用 CSS 属性	`string`	-
width	通用 CSS 属性	`string`	-
maxWidth	通用 CSS 属性	`string`	`90vw`
maxHeight	通用 CSS 属性	`string`	`75px`
placement	组件弹出的位置	ToastPlacement	`bottomRight`

`ToastInput`

参数	描述	类型	默认值
id	唯一识别 ID，可自动生成	`string`	-
text	组件内显示的信息	`string`, `ReactNode`	-
type	组件的样式类型	ToastTypes	`default`
delay	自动关闭前等待的时间	`number`	`2000`
actions	指定一个默认的动作	ToastAction	-

`ToastPlacement`

type ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

`ToastAction`

interface ToastAction {
  name: string
  handler: (event: React.MouseEventHandler<HTMLButtonElement>, cancel: Function) => void
  passive?: boolean
}

`ToastTypes`

type ToastTypes = 'default' \| 'secondary' | 'success' | 'warning' | 'error'

文档贡献者