(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{645:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return H});var t=s(23),p=s.n(t),e=s(24),o=s.n(e),c=s(25),l=s.n(c),u=s(26),i=s.n(u),k=s(32),r=s.n(k),d=s(27),m=s.n(d),g=s(28),f=s.n(g),h=s(580),v=s.n(h),y=s(582),E=s.n(y),b=s(0),N=s.n(b),A=s(111),w=s(82),z=function(){return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,null,N.a.createElement("span",null,"通知提示文案"),N.a.createElement("a",{href:"javascript:;",className:"zent-alert-demo-text"},"文字链接")),N.a.createElement(w.b,{title:"基础用法",description:"通知提示文案"}))},C=function(){return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{type:"info"},"这个是默认的 info 样式"),N.a.createElement(w.b,{type:"success"},"这个是 success 样式"),N.a.createElement(w.b,{type:"warning"},"这个是 warning 样式"),N.a.createElement(w.b,{type:"error"},"这个是 error 样式"))},x=function(){return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{type:"info",loading:!0},"消息加载中..."))},O=function(){var n=w.b.highlightClassName;return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{type:"info",loading:!0},"内容正在处理 (",N.a.createElement("span",{className:n},"13/25"),")"),N.a.createElement("p",null,"使用 Alert.highlightClassName 来添加对应的高亮颜色"))},j=function(){return N.a.createElement(function(){var n=N.a.useState(!1),a=E()(n,2),s=a[0],t=a[1];return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{closable:!0,closeContent:N.a.createElement("a",{href:"javascript:;"},"我知道了")},"关闭触发器可自定义"),N.a.createElement(w.b,{closable:!0,closed:s,onClose:function(){t(!0),w.vb.alert({content:"公告关闭了"})}},"关闭状态受控"),N.a.createElement(w.i,{onClick:function(){return t(!1)}},"重新显示"))},null)},_=function(){return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{type:"info",extraContent:N.a.createElement(w.i,{type:"primary"},"按钮")},"额外内容会放置在 Alert 组件右侧"),N.a.createElement(w.b,{type:"info",extraContent:N.a.createElement("a",{href:"javascript:;"},"文字链接")},"额外内容会放置在 Alert 组件右侧"))},D=function(){return N.a.createElement("div",{className:"zent-alert-example"},N.a.createElement(w.b,{type:"info",outline:!0,title:"Outline 模式",description:"outline 模式公告内容"}),N.a.createElement(w.b,{type:"success",outline:!0,title:"Outline 模式",description:"outline 模式公告内容"}),N.a.createElement(w.b,{type:"warning",outline:!0,title:"Outline 模式",description:"outline 模式公告内容"}),N.a.createElement(w.b,{type:"error",outline:!0,title:"Outline 模式",description:"outline 模式公告内容"}))};function R(n){return N.a.createElement(n.tag,v()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return N.a.createElement(R,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function M(n){return N.a.createElement(R,{tag:"style",html:n.style})}var B=function(n){function a(){var n,s;p()(this,a);for(var t=arguments.length,e=new Array(t),o=0;oAlert 公告\n

公告，提供一个醒目的提示信息。

\n

使用指南

\n\n

代码演示

'}),N.a.createElement(B,{title:"基础用法",id:"Demobasic",src:'import { Alert } from \'zent\';\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert>\n <span>通知提示文案</span>\n <a href="javascript:;" className="zent-alert-demo-text">\n 文字链接\n </a>\n </Alert>\n <Alert title="基础用法" description="通知提示文案" />\n </div>,\n mountNode\n);'},N.a.createElement(z)),N.a.createElement(B,{title:"四种样式：info, success, warning 和 error",id:"Demostyles",src:'import { Alert } from \'zent\';\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert type="info">这个是默认的 info 样式</Alert>\n <Alert type="success">这个是 success 样式</Alert>\n <Alert type="warning">这个是 warning 样式</Alert>\n <Alert type="error">这个是 error 样式</Alert>\n </div>,\n mountNode\n);'},N.a.createElement(C)),N.a.createElement(B,{title:"Loading 模式",id:"Demoloading",src:'import { Alert } from \'zent\';\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert type="info" loading>\n 消息加载中...\n </Alert>\n </div>,\n mountNode\n);'},N.a.createElement(x)),N.a.createElement(B,{title:"高亮文字",id:"Demohighlight",src:'import { Alert } from \'zent\';\n\nconst { highlightClassName } = Alert;\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert type="info" loading>\n 内容正在处理 (<span className={highlightClassName}>13/25</span>)\n </Alert>\n <p>使用 Alert.highlightClassName 来添加对应的高亮颜色</p>\n </div>,\n mountNode\n);'},N.a.createElement(O)),N.a.createElement(B,{title:"关闭按钮及回调",id:"Democlose",src:'import { Alert, Sweetalert } from \'zent\';\n\nconst Simple = () => {\n const [closed, setClosed] = React.useState(false);\n\n const onCloseHandler = () => {\n setClosed(true);\n Sweetalert.alert({ content: \'公告关闭了\' });\n }\n\n return (\n <div className="zent-alert-example">\n <Alert closable closeContent={<a href="javascript:;">我知道了</a>}>\n 关闭触发器可自定义\n </Alert>\n <Alert closable closed={closed} onClose={onCloseHandler}>\n 关闭状态受控\n </Alert>\n <Button onClick={() => setClosed(false)}>重新显示</Button>\n </div>\n )\n}\n\nReactDOM.render(\n <Simple />,\n mountNode\n);'},N.a.createElement(j)),N.a.createElement(B,{title:"额外内容",id:"Demoextra",src:'import { Alert, Button } from \'zent\';\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert\n type="info"\n extraContent={<Button type="primary">按钮</Button>}\n >\n 额外内容会放置在 Alert 组件右侧\n </Alert>\n <Alert type="info" extraContent={<a href="javascript:;">文字链接</a>}>\n 额外内容会放置在 Alert 组件右侧\n </Alert>\n </div>,\n mountNode\n);'},N.a.createElement(_)),N.a.createElement(B,{title:"Outline 模式",id:"Demooutline",src:'import { Alert, Button } from \'zent\';\n\nReactDOM.render(\n <div className="zent-alert-example">\n <Alert\n type="info"\n outline\n title="Outline 模式"\n description="outline 模式公告内容"\n />\n <Alert\n type="success"\n outline\n title="Outline 模式"\n description="outline 模式公告内容"\n />\n <Alert\n type="warning"\n outline\n title="Outline 模式"\n description="outline 模式公告内容"\n />\n <Alert\n type="error"\n outline\n title="Outline 模式"\n description="outline 模式公告内容"\n />\n </div>,\n mountNode\n);'},N.a.createElement(D)),N.a.createElement(S,{html:'

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值备选值
className自定义额外类名string
type警告提示的样式string\'info\'\'info\'\n, \n\'success\'\n, \n\'warning\'\n, \n\'error\'
loading是否是加载中模式boolfalsetrue\n, \nfalse
outline是否是 outline 模式boolfalsetrue\n, \nfalse
closable是否可以关闭boolfalsetrue\n, \nfalse
closed外部控制组件的关闭状态bool
onClose点击关闭触发器时的回调func
closeContent关闭触发器的自定义内容ReactNode
extraContent右侧额外内容ReactNode
title内容标题ReactNode
description内容描述ReactNode
'}))}}]),a}(b.Component)}}]);