Taroify

Notify 消息提示

介绍

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

函数调用

由于小程序不支持 DOM 操作，因此需要手动在页面（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 id="notify" open>通知内容</Notify>

通知颜色

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

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

自定义通知

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

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

API

Props

参数	说明	类型	默认值
className	自定义类名	string	-
style	组件样式	CSSProperties	-
defaultOpen	默认是否显示消息提示	boolean	-
open	是否显示消息提示	boolean	-
color	类型，可选值为 `primary` `success` `warning`	string	`danger`
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)	-