ReactAntd(十一) ANTD-Nofilication

React Antd - Nofilication

引入包

import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  FormOutlined,
} from '@ant-design/icons'
import { Card, Button, notification } from 'antd'

nofilication 类型

• 默认

notification.open({
  message: '右上角默认提示',
  description: '这就是右上角默认提示内容',
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})

• success

notification['success']({
  message: '右上角成功提示',
  description: '这就是右上角成功提示内容',
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})

• info

notification['info']({
  message: '右上角成功提示',
  description: '这就是右上角成功提示内容',
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})

• warning

notification['warning']({
  message: '右上角警告提示',
  description: '这就是右上角成功提示内容',
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})

• error

notification['error']({
  message: '右上角关闭提示',
  description: '这就是右上角成功提示内容',
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})

nofilication 位置和自定义图标

• 位置需要增加个参数 placement 自定义图标是 icon

• placement 有几个参数 topLeft,topRight,bottomLeft,bottomRight

import { DownloadOutlined } from '@ant-design/icons'
notification.open({
  message: '左上角默认提示',
  description: '这就是左上角默认提示内容',
  placement: 'topLeft',
  icon: <DownloadOutlined />,
  onClick: () => {
    console.log('点击了确定')
  },
  onClose: () => {
    console.log('点击了右上角的关闭')
  },
})