antd notice提醒框 ---Message

Myth丶恋晨 2022-04-22 11:52 167阅读 0赞

import React from 'react'

import \{ Card, Button, notification \} from 'antd'

import './ui.less'

export default class Buttons extends React.Component \{

type是传的参数,direction定义方位

openNotification = (type,direction)=>\{

if (direction)\{

notification.config(\{

placement: direction

\})

\}

notification\[type\](\{

message:'发工资了',

description:'上个月考勤22天，迟到12天，实发工资250，请笑纳'

\});

\}

render()\{

return (

<div>

<Card title="通知提醒框" className="card-wrap">

<Button type="primary" onClick=\{()=>this.openNotification('success')\}>Success</Button>

<Button type="primary" onClick=\{()=>this.openNotification('info')\}>Info</Button>

<Button type="primary" onClick=\{()=>this.openNotification('warning')\}>Warning</Button>

<Button type="primary" onClick=\{()=>this.openNotification('error')\}>Error</Button>

</Card>

<Card title="通知提醒框" className="card-wrap">

<Button type="primary" onClick=\{() => this.openNotification('success','topLeft')\}>Success</Button>

<Button type="primary" onClick=\{() => this.openNotification('info','topRight')\}>Info</Button>

<Button type="primary" onClick=\{() => this.openNotification('warning','bottomLeft')\}>Warning</Button>

<Button type="primary" onClick=\{() => this.openNotification('error','bottomRight')\}>Error</Button>

</Card>

</div>

);

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd输入框禁止回车

问题： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

电玩女神/ 2022年11月15日 14:14/ 0 赞/ 371 阅读

相关 antd模糊搜索框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

浅浅的花香味﹌/ 2022年11月15日 11:23/ 0 赞/ 244 阅读

相关 iOS开发 - UIAlertController 弹框提醒

传统的alertView - (void)alertView { UIAlertView alert = [[UIAlertView al

傷城~/ 2022年08月04日 13:42/ 0 赞/ 210 阅读

相关 Material Design Lite组件之提醒框

1.用法介绍为一个div容器添加mdl-js-snackbar和mdl-snackbar类设置为提醒框组件；在该容器内部添加一个类名mdl-snackbar\_\_

﹏ヽ暗。殇╰゛Y/ 2022年05月23日 02:14/ 0 赞/ 191 阅读

相关 antd notice提醒框 ---Message

import React from 'react' import \{ Card, Button, notification \} from 'antd' impor

Myth丶恋晨/ 2022年04月22日 11:52/ 0 赞/ 168 阅读

相关 Notice-MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm

朴灿烈づ我的快乐病毒、/ 2022年03月22日 04:13/ 0 赞/ 232 阅读

相关 Notice-Message消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，

忘是亡心i/ 2022年03月22日 04:10/ 0 赞/ 276 阅读

相关 Antd的Message怎么限制弹出次数

之前的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2022年03月08日 19:44/ 0 赞/ 230 阅读

相关 MyEclipse启动时弹出提醒框

1、 ![230914147677992.png][] MyEclipse has detected that less than 5% of the 31MB of PS

阳光穿透心脏的1/2处/ 2021年12月24日 00:51/ 0 赞/ 234 阅读

相关 easyui messager 消息框对话框

通过 $.messager.defaults 重写默认的 defaults。消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、

秒速五厘米/ 2021年07月28日 18:10/ 0 赞/ 786 阅读