chunk-277VJHNT.js

import{a as B,b as R,c as _,d as O,e as G,f as A,g as L,h as P,i as U}from"./chunk-4GLTC2EC.js";import"./chunk-RZO35D2M.js";import"./chunk-EWUNFFQE.js";import"./chunk-S6FFAGIU.js";import{h as f,n as T,o as D,t as k,u as H}from"./chunk-JITDWUL2.js";import"./chunk-MN5MGPLV.js";import"./chunk-KXB4PYRX.js";import{$ as l,Ae as b,Db as e,Ga as S,Ma as h,Re as N,Ye as C,Ze as v,_ as a,ab as o,bb as t,cb as n,db as m,ef as y,ff as w,mb as z,rh as I,sb as u,tb as E,ub as g,ya as i}from"./chunk-MEWDXWWM.js";import"./chunk-DAQOROHW.js";function W(c,d){c&1&&(t(0,"span"),e(1,"Notification"),n())}function Z(c,d){c&1&&m(0,"span")}var x=class c{expanded=!1;codeBoxes;goLink(d){window&&(window.location.hash=d)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(d=>d.expandCode(this.expanded))}static \u0275fac=function(r){return new(r||c)};static \u0275cmp=S({type:c,selectors:[["nz-demo-notification"]],viewQuery:function(r,s){if(r&1&&u(f,5),r&2){let p;E(p=g())&&(s.codeBoxes=p)}},decls:493,vars:25,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#when_to_use","nzTitle","When To Use",1,"toc-indent-1"],["nzHref","#examples","nzTitle","Examples",1,"toc-indent-1"],["nzHref","#components-notification-demo-basic","nzTitle","Basic",1,"toc-indent-2"],["nzHref","#components-notification-demo-duration","nzTitle","Duration after which the notification box is closed",1,"toc-indent-2"],["nzHref","#components-notification-demo-with-icon","nzTitle","Notification with icon",1,"toc-indent-2"],["nzHref","#components-notification-demo-with-btn","nzTitle","Custom close button",1,"toc-indent-2"],["nzHref","#components-notification-demo-custom-icon","nzTitle","Customized Icon",1,"toc-indent-2"],["nzHref","#components-notification-demo-placement","nzTitle","Placement",1,"toc-indent-2"],["nzHref","#components-notification-demo-custom-style","nzTitle","Customized style",1,"toc-indent-2"],["nzHref","#components-notification-demo-update","nzTitle","Update Notification Content",1,"toc-indent-2"],["nzHref","#components-notification-demo-template","nzTitle","Use a template",1,"toc-indent-2"],["nzHref","#api","nzTitle","API",1,"toc-indent-1"],[1,"markdown"],[4,"nzSpaceItem"],["name","notification","description","Prompt notification message globally.","language","en"],["id","when_to_use"],["onclick","window.location.hash = 'when_to_use'",1,"anchor"],["id","examples"],["nzType","appstore","nz-tooltip","","nzTooltipTitle","Expand All Code",1,"code-box-expand-trigger",3,"click"],["onclick","window.location.hash = 'examples'",1,"anchor"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzXl","nzSpan"],["nzTitle","Basic","nzVersion","","nzId","components-notification-demo-basic","nzSelector","nz-demo-notification-basic","nzLink","components-notification-demo-basic","nzGenerateCommand","ng g ng-zorro-antd:notification-basic <name>","nzComponentName","NzDemoNotificationBasicComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/basic.md",3,"nzIframe","nzIframeHeight"],["demo",""],["intro",""],["nzTitle","Notification with icon","nzVersion","","nzId","components-notification-demo-with-icon","nzSelector","nz-demo-notification-with-icon","nzLink","components-notification-demo-with-icon","nzGenerateCommand","ng g ng-zorro-antd:notification-with-icon <name>","nzComponentName","NzDemoNotificationWithIconComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/with-icon.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Customized Icon","nzVersion","","nzId","components-notification-demo-custom-icon","nzSelector","nz-demo-notification-custom-icon","nzLink","components-notification-demo-custom-icon","nzGenerateCommand","ng g ng-zorro-antd:notification-custom-icon <name>","nzComponentName","NzDemoNotificationCustomIconComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/custom-icon.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Customized style","nzVersion","","nzId","components-notification-demo-custom-style","nzSelector","nz-demo-notification-custom-style","nzLink","components-notification-demo-custom-style","nzGenerateCommand","ng g ng-zorro-antd:notification-custom-style <name>","nzComponentName","NzDemoNotificationCustomStyleComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/custom-style.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Use a template","nzVersion","","nzId","components-notification-demo-template","nzSelector","nz-demo-notification-template","nzLink","components-notification-demo-template","nzGenerateCommand","ng g ng-zorro-antd:notification-template <name>","nzComponentName","NzDemoNotificationTemplateComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/template.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Duration after which the notification box is closed","nzVersion","","nzId","components-notification-demo-duration","nzSelector","nz-demo-notification-duration","nzLink","components-notification-demo-duration","nzGenerateCommand","ng g ng-zorro-antd:notification-duration <name>","nzComponentName","NzDemoNotificationDurationComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/duration.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Custom close button","nzVersion","","nzId","components-notification-demo-with-btn","nzSelector","nz-demo-notification-with-btn","nzLink","components-notification-demo-with-btn","nzGenerateCommand","ng g ng-zorro-antd:notification-with-btn <name>","nzComponentName","NzDemoNotificationWithBtnComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/with-btn.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Placement","nzVersion","","nzId","components-notification-demo-placement","nzSelector","nz-demo-notification-placement","nzLink","components-notification-demo-placement","nzGenerateCommand","ng g ng-zorro-antd:notification-placement <name>","nzComponentName","NzDemoNotificationPlacementComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/placement.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Update Notification Content","nzVersion","","nzId","components-notification-demo-update","nzSelector","nz-demo-notification-update","nzLink","components-notification-demo-update","nzGenerateCommand","ng g ng-zorro-antd:notification-update <name>","nzComponentName","NzDemoNotificationUpdateComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/notification/demo/update.md",3,"nzIframe","nzIframeHeight"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nznotificationservice"],[1,"api-type-label","service"],["onclick","window.location.hash = 'nznotificationservice'",1,"anchor"],["id","global_configuration"],["onclick","window.location.hash = 'global_configuration'",1,"anchor"],["href","/docs/global-config/en"],["id","nznotificationref"],["onclick","window.location.hash = 'nznotificationref'",1,"anchor"],[1,"language-ts"],[1,"token","keyword"],[1,"token","class-name"],[1,"token","punctuation"],[1,"token","operator"],[1,"token","builtin"],[1,"token","comment"]],template:function(r,s){r&1&&(t(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),z("nzClick",function(V){return s.goLink(V)}),m(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5)(7,"nz-link",6)(8,"nz-link",7)(9,"nz-link",8)(10,"nz-link",9)(11,"nz-link",10)(12,"nz-link",11)(13,"nz-link",12)(14,"nz-link",13),n()(),t(15,"section",14)(16,"h1")(17,"nz-space"),h(18,W,2,0,"span",15)(19,Z,1,0,"span",15),n()(),m(20,"component-meta",16),t(21,"section",14),l(),t(22,"h2",17)(23,"span"),e(24,"When To Use"),n(),t(25,"a",18),e(26,"#"),n()(),t(27,"p"),e(28,`To display a notification message at any of the four corners of the viewport. Typically it can be
used in the following cases:`),n(),t(29,"ul")(30,"li"),e(31,"A notification with complex content."),n(),t(32,"li"),e(33,`A notification providing a feedback based on the user interaction. Or it may show some details
about upcoming steps the user may have to follow.`),n(),t(34,"li"),e(35,"A notification that is pushed by the application."),n()(),a(),n(),t(36,"h2",19)(37,"span"),e(38,"Examples"),n(),t(39,"nz-icon",20),z("click",function(){return s.expandAllCode()}),n(),t(40,"a",21),e(41,"#"),n()()(),t(42,"div",22)(43,"div",23)(44,"nz-code-box",24),m(45,"nz-demo-notification-basic",25),t(46,"div",26),l(),t(47,"p"),e(48,"The simplest usage that close the notification box after 4.5s."),n(),a(),n()(),t(49,"nz-code-box",27),m(50,"nz-demo-notification-with-icon",25),t(51,"div",26),l(),t(52,"p"),e(53,"A notification box with a icon at the left side."),n(),a(),n()(),t(54,"nz-code-box",28),m(55,"nz-demo-notification-custom-icon",25),t(56,"div",26),l(),t(57,"p"),e(58,"The icon can be customized to any "),t(59,"code"),e(60,"TemplateRef<void>"),n(),e(61,"."),n(),a(),n()(),t(62,"nz-code-box",29),m(63,"nz-demo-notification-custom-style",25),t(64,"div",26),l(),t(65,"p"),e(66,"The nzStyle and nzClass are available to customize Notification."),n(),a(),n()(),t(67,"nz-code-box",30),m(68,"nz-demo-notification-template",25),t(69,"div",26),l(),t(70,"p"),e(71,"Use template to implement more complex interactions."),n(),a(),n()()(),t(72,"div",23)(73,"nz-code-box",31),m(74,"nz-demo-notification-duration",25),t(75,"div",26),l(),t(76,"p")(77,"code"),e(78,"nzDuration"),n(),e(79,` can be used to specify how long the notification stays open. After the duration time elapses,
the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
the notification box will never close automatically.`),n(),a(),n()(),t(80,"nz-code-box",32),m(81,"nz-demo-notification-with-btn",25),t(82,"div",26),l(),t(83,"p"),e(84,"To customize the style or font of the close button."),n(),a(),n()(),t(85,"nz-code-box",33),m(86,"nz-demo-notification-placement",25),t(87,"div",26),l(),t(88,"p"),e(89,"A notification box can pop up from "),t(90,"code"),e(91,"topRight"),n(),e(92," or "),t(93,"code"),e(94,"bottomRight"),n(),e(95," or "),t(96,"code"),e(97,"bottomLeft"),n(),e(98," or "),t(99,"code"),e(100,"topLeft"),n(),e(101," or "),t(102,"code"),e(103,"top"),n(),e(104," or "),t(105,"code"),e(106,"bottom"),n(),e(107,"."),n(),a(),n()(),t(108,"nz-code-box",34),m(109,"nz-demo-notification-update",25),t(110,"div",26),l(),t(111,"p"),e(112,"Update content with unique "),t(113,"code"),e(114,"nzKey"),n(),e(115,"."),n(),a(),n()()()(),t(116,"section",35),l(),t(117,"h2",36)(118,"span"),e(119,"API"),n(),t(120,"a",37),e(121,"#"),n()(),t(122,"h3",38)(123,"span"),e(124,"NzNotificationService"),n(),t(125,"label",39),e(126,"service"),n(),t(127,"a",40),e(128,"#"),n()(),t(129,"p"),e(130,"The component provides a number of service methods using the following methods and parameters:"),n(),t(131,"ul")(132,"li")(133,"code"),e(134,"NzNotificationService.blank(title, content, [options])"),n(),e(135," // Notification without icon"),n(),t(136,"li")(137,"code"),e(138,"NzNotificationService.success(title, content, [options])"),n()(),t(139,"li")(140,"code"),e(141,"NzNotificationService.error(title, content, [options])"),n()(),t(142,"li")(143,"code"),e(144,"NzNotificationService.info(title, content, [options])"),n()(),t(145,"li")(146,"code"),e(147,"NzNotificationService.warning(title, content, [options])"),n()()(),t(148,"table")(149,"thead")(150,"tr")(151,"th"),e(152,"Argument"),n(),t(153,"th"),e(154,"Description"),n(),t(155,"th"),e(156,"Type"),n(),t(157,"th"),e(158,"Default"),n()()(),t(159,"tbody")(160,"tr")(161,"td")(162,"code"),e(163,"title"),n()(),t(164,"td"),e(165,"Title"),n(),t(166,"td")(167,"code"),e(168,"string | TemplateRef<void>"),n()(),t(169,"td"),e(170,"-"),n()(),t(171,"tr")(172,"td")(173,"code"),e(174,"content"),n()(),t(175,"td"),e(176,"Notification content"),n(),t(177,"td")(178,"code"),e(179,"NzNotificationContentType"),n()(),t(180,"td"),e(181,"-"),n()(),t(182,"tr")(183,"td")(184,"code"),e(185,"options"),n()(),t(186,"td"),e(187,"Support setting the parameters for the current notification box, see the table below"),n(),t(188,"td")(189,"code"),e(190,"object"),n()(),t(191,"td"),e(192,"-"),n()()()(),t(193,"p"),e(194,"The parameters that are set by the "),t(195,"code"),e(196,"options"),n(),e(197," support are as follows:"),n(),t(198,"table")(199,"thead")(200,"tr")(201,"th"),e(202,"Argument"),n(),t(203,"th"),e(204,"Description"),n(),t(205,"th"),e(206,"Type"),n()()(),t(207,"tbody")(208,"tr")(209,"td")(210,"code"),e(211,"nzKey"),n()(),t(212,"td"),e(213,"The unique identifier of the Notification"),n(),t(214,"td")(215,"code"),e(216,"string"),n()()(),t(217,"tr")(218,"td")(219,"code"),e(220,"nzDuration"),n()(),t(221,"td"),e(222,"Duration (milliseconds), does not disappear when set to 0"),n(),t(223,"td")(224,"code"),e(225,"number"),n()()(),t(226,"tr")(227,"td")(228,"code"),e(229,"nzPauseOnHover"),n()(),t(230,"td"),e(231,"Do not remove automatically when mouse is over while setting to "),t(232,"code"),e(233,"true"),n()(),t(234,"td")(235,"code"),e(236,"boolean"),n()()(),t(237,"tr")(238,"td")(239,"code"),e(240,"nzAnimate"),n()(),t(241,"td"),e(242,"Whether to turn on animation"),n(),t(243,"td")(244,"code"),e(245,"boolean"),n()()(),t(246,"tr")(247,"td")(248,"code"),e(249,"nzStyle"),n()(),t(250,"td"),e(251,"Custom inline style"),n(),t(252,"td")(253,"code"),e(254,"object"),n()()(),t(255,"tr")(256,"td")(257,"code"),e(258,"nzClass"),n()(),t(259,"td"),e(260,"Custom CSS class"),n(),t(261,"td")(262,"code"),e(263,"object"),n()()(),t(264,"tr")(265,"td")(266,"code"),e(267,"nzData"),n()(),t(268,"td"),e(269,"Anything that would be used as template context"),n(),t(270,"td")(271,"code"),e(272,"any"),n()()(),t(273,"tr")(274,"td")(275,"code"),e(276,"nzCloseIcon"),n()(),t(277,"td"),e(278,"Custom close icon"),n(),t(279,"td")(280,"code"),e(281,"TemplateRef<void> | string"),n()()(),t(282,"tr")(283,"td")(284,"code"),e(285,"nzButton"),n()(),t(286,"td"),e(287,"Custom button"),n(),t(288,"td")(289,"code"),e(290,"TemplateRef<{ $implicit: NzNotificationComponent }> | string"),n()()()()(),t(291,"p"),e(292,"Methods for destruction are also provided:"),n(),t(293,"ul")(294,"li")(295,"code"),e(296,"NzNotificationService.remove(id)"),n(),e(297," // Remove the notification with the specified id. When the id is empty, remove all notifications (the notification id is returned by the above method)"),n()(),t(298,"h3",41)(299,"span"),e(300,"Global Configuration"),n(),t(301,"a",42),e(302,"#"),n()(),t(303,"p"),e(304,"You can use "),t(305,"code"),e(306,"NzConfigService"),n(),e(307," to configure this component globally. Please check the "),t(308,"a",43),e(309,"Global Configuration"),n(),e(310," chapter for more information."),n(),t(311,"table")(312,"thead")(313,"tr")(314,"th"),e(315,"Parameter"),n(),t(316,"th"),e(317,"Description"),n(),t(318,"th"),e(319,"Type"),n(),t(320,"th"),e(321,"Default"),n()()(),t(322,"tbody")(323,"tr")(324,"td")(325,"code"),e(326,"nzDuration"),n()(),t(327,"td"),e(328,"Duration (milliseconds), does not disappear when set to 0"),n(),t(329,"td")(330,"code"),e(331,"number"),n()(),t(332,"td")(333,"code"),e(334,"4500"),n()()(),t(335,"tr")(336,"td")(337,"code"),e(338,"nzMaxStack"),n()(),t(339,"td"),e(340,"The maximum number of notifications that can be displayed at the same time"),n(),t(341,"td")(342,"code"),e(343,"number"),n()(),t(344,"td")(345,"code"),e(346,"8"),n()()(),t(347,"tr")(348,"td")(349,"code"),e(350,"nzPauseOnHover"),n()(),t(351,"td"),e(352,"Do not remove automatically when mouse is over while setting to "),t(353,"code"),e(354,"true"),n()(),t(355,"td")(356,"code"),e(357,"boolean"),n()(),t(358,"td")(359,"code"),e(360,"true"),n()()(),t(361,"tr")(362,"td")(363,"code"),e(364,"nzAnimate"),n()(),t(365,"td"),e(366,"Whether to turn on animation"),n(),t(367,"td")(368,"code"),e(369,"boolean"),n()(),t(370,"td")(371,"code"),e(372,"true"),n()()(),t(373,"tr")(374,"td")(375,"code"),e(376,"nzTop"),n()(),t(377,"td"),e(378,"The top of the notification when it pops up from the top."),n(),t(379,"td")(380,"code"),e(381,"string"),n()(),t(382,"td")(383,"code"),e(384,"'24px'"),n()()(),t(385,"tr")(386,"td")(387,"code"),e(388,"nzBottom"),n()(),t(389,"td"),e(390,"The bottom of the notification when it pops up from the bottom."),n(),t(391,"td")(392,"code"),e(393,"string"),n()(),t(394,"td")(395,"code"),e(396,"'24px'"),n()()(),t(397,"tr")(398,"td")(399,"code"),e(400,"nzPlacement"),n()(),t(401,"td"),e(402,"Popup position, optional "),t(403,"code"),e(404,"topLeft"),n(),t(405,"code"),e(406,"topRight"),n(),t(407,"code"),e(408,"bottomLeft"),n(),t(409,"code"),e(410,"bottomRight"),n(),t(411,"code"),e(412,"top"),n(),t(413,"code"),e(414,"bottom"),n()(),t(415,"td")(416,"code"),e(417,"'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom'"),n()(),t(418,"td")(419,"code"),e(420,"'topRight'"),n()()(),t(421,"tr")(422,"td")(423,"code"),e(424,"nzDirection"),n()(),t(425,"td"),e(426,"Direction of the text in the notification"),n(),t(427,"td")(428,"code"),e(429,"'ltr' | 'rtl'"),n()(),t(430,"td"),e(431,"-"),n()()()(),t(432,"h3",44)(433,"span"),e(434,"NzNotificationRef"),n(),t(435,"a",45),e(436,"#"),n()(),t(437,"p"),e(438,"It's the object that returned when you call "),t(439,"code"),e(440,"NzNotificationService.success"),n(),e(441," and others."),n(),t(442,"pre")(443,"code",46)(444,"span",47),e(445,"export"),n(),e(446," "),t(447,"span",47),e(448,"interface"),n(),e(449," "),t(450,"span",48),e(451,"NzNotificationRef"),n(),e(452," "),t(453,"span",49),e(454,"{"),n(),e(455,`
  messageId`),t(456,"span",50),e(457,":"),n(),e(458," "),t(459,"span",51),e(460,"string"),n(),t(461,"span",49),e(462,";"),n(),e(463,`
  onClose`),t(464,"span",50),e(465,":"),n(),e(466," Subject"),t(467,"span",50),e(468,"<"),n(),t(469,"span",51),e(470,"boolean"),n(),t(471,"span",50),e(472,">"),n(),t(473,"span",49),e(474,";"),n(),e(475," "),t(476,"span",52),e(477,"// It would emit an event when the notification is closed, and emit a `true` if it's closed by user"),n(),e(478,`
  onClick`),t(479,"span",50),e(480,":"),n(),e(481," Subject"),t(482,"span",50),e(483,"<"),n(),e(484,"MouseEvent"),t(485,"span",50),e(486,">"),n(),t(487,"span",49),e(488,";"),n(),e(489,`
`),t(490,"span",49),e(491,"}"),n(),e(492,`
`),n()(),a(),n()()),r&2&&(i(),o("nzOffsetTop",16),i(),o("nzAffix",!1),i(40),o("nzGutter",16),i(),o("nzXl",12)("nzSpan",24),i(),o("nzIframe",!1)("nzIframeHeight",null),i(5),o("nzIframe",!1)("nzIframeHeight",null),i(5),o("nzIframe",!1)("nzIframeHeight",null),i(8),o("nzIframe",!1)("nzIframeHeight",null),i(5),o("nzIframe",!1)("nzIframeHeight",null),i(5),o("nzXl",12)("nzSpan",24),i(),o("nzIframe",!1)("nzIframeHeight",null),i(7),o("nzIframe",!1)("nzIframeHeight",null),i(5),o("nzIframe",!1)("nzIframeHeight",null),i(23),o("nzIframe",!1)("nzIframeHeight",null))},dependencies:[H,f,k,T,D,b,w,y,I,N,v,C,B,R,_,O,G,A,L,P,U],encapsulation:2})};export{x as default};