Taroify

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

函数调用

版本 >= v0.6.0-alpha.0可以直接调用。低版本需要手动在页面（page）里挂载一个 Notify 组件并指定 id 为 notify。

import { Cell, Notify } from "@taroify/core"

function ImperativeNotify() {
  return (
    <>
      {/* <Notify id="notify" /> */}
      <Cell title="函数调用" clickable isLink onClick={() => Notify.open("通知内容")} />
    </>
  )
}

组件调用

import { Cell, Notify } from "@taroify/core"

function BasicNotify() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Notify open={open} onClose={setOpen}>
        通知内容
      </Notify>
      <Cell title="基础用法" clickable onClick={() => setOpen(true)} />
    </>
  )
}

代码演示

基础用法

Notify.open("通知内容")

<Notify id="notify" open>
  通知内容
</Notify>

通知颜色

预设 primary、success、warning、danger 四种通知颜色，默认为 danger。

Notify.open({ type: "primary", message: "通知内容" })
Notify.open({ type: "success", message: "通知内容" })
Notify.open({ type: "danger", message: "通知内容" })
Notify.open({ type: "warning", message: "通知内容" })

<Notify open type="primary">通知内容</Notify>
<Notify open type="success">通知内容</Notify>
<Notify open type="danger">通知内容</Notify>
<Notify open type="warning">通知内容</Notify>

自定义通知

自定义消息通知的颜色和展示时长。

Notify.open({
  color: "#ad0000",
  background: "#ffe1e1",
  message: "自定义颜色",
})
Notify.open({
  duration: 1000,
  message: "自定义时长",
})

<Notify open style={{ color: "#ad0000", background: "#ffe1e1" }}>自定义颜色</Notify>
<Notify open duration={1000}>自定义时长</Notify>

API

Props

参数	说明	类型	默认值
className	自定义类名	string	-
style	组件样式	CSSProperties	-
defaultOpen	默认是否显示消息提示	boolean	-
open	是否显示消息提示	boolean	-
type	类型，可选值为 `primary` `success` `warning`	string	`danger`
color `v0.6.0-alpha.0`	字体颜色	string	-
background `v0.6.0-alpha.0`	背景颜色	string	-
duration	展示时长(ms)，值为 0 时，notify 不会消失	number	`3000`
children	展示文案，支持通过`\n`换行	ReactNode	-
onClose	关闭时的回调函数	(open : boolean) => void	-

Options

参数	说明	类型	默认值
selector	自定义节点选择器	string	`notify`
className	自定义类名	string	-
style	组件样式	CSSProperties	-
color	类型，可选值为 `primary` `success` `warning`	string	`danger`
duration	展示时长(ms)，值为 0 时，notify 不会消失	number	`3000`
message	展示文案，支持通过`\n`换行	ReactNode	-
onClose	关闭时的回调函数	(open : boolean) => void	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—notify-color	var(—white)	-
—notify-padding	var(—padding-xs) var(—padding-md)	-
—notify-font-size	var(—font-size-md)	-
—notify-line-height	var(—line-height-md)	-
—notify-primary-background-color	var(—primary-color)	-
—notify-success-background-color	var(—success-color)	-
—notify-warning-background-color	var(—warning-color)	-
—notify-danger-background-color	var(—danger-color)	-