(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{685:function(n,a,t){"use strict";t.r(a),t.d(a,"default",function(){return S});var s=t(580),e=t.n(s),o=t(23),p=t.n(o),c=t(24),l=t.n(c),r=t(25),i=t.n(r),u=t(26),d=t.n(u),k=t(32),h=t.n(k),g=t(27),m=t.n(g),y=t(28),b=t.n(y),f=t(0),v=t.n(f),P=t(111),w=t(82),N=function(){var n=function(n){function a(){var n,t;p()(this,a);for(var s=arguments.length,e=new Array(s),o=0;oPortal\n

Portal widget

\n

Guides

\n

Portal provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

\n

Demos

'}),v.a.createElement(O,{title:"Basic usage",id:"Demobasic",src:'import { Portal, Button, PurePortal } from \'zent\';\n\n// const WrappedPortal = Portal.withNonScrollable(Portal.withESCToClose(Portal));\n\nclass PortalBasic extends Component {\n state = {\n bodyPortalVisible: false,\n purePortalVisible: false,\n };\n togglePurePortal = () =>\n this.setState({ purePortalVisible: !this.state.purePortalVisible });\n showBodyPortal = () => this.setState({ bodyPortalVisible: true });\n hideBodyPortal = () => this.setState({ bodyPortalVisible: false });\n render() {\n return (\n <div className="zent-doc-portal-container">\n <div className="zent-doc-portal-mount-node">Original content</div>\n <Portal selector=".zent-doc-portal-mount-node">\n <div className="zent-doc-portal-content">Content that Portal inserts dynamically</div>\n </Portal>\n <div className="zent-doc-pure-portal-mount-node">\n content to be overwritten\n </div>\n {this.state.purePortalVisible ? (\n <PurePortal selector=".zent-doc-pure-portal-mount-node">\n <div className="zent-doc-portal-content">\n Content that PurePortal inserts dynamically, overwrites the original content inside the container\n </div>\n </PurePortal>\n ) : null}\n <Button onClick={this.togglePurePortal}>Toggle PurePortal</Button>\n <Button onClick={this.showBodyPortal}>Append a Portal with curtain to body</Button>\n <Portal\n visible={this.state.bodyPortalVisible}\n onClose={this.hideBodyPortal}\n className="layer"\n style={{ background: \'rgba(0, 0, 0, 0.2)\' }}\n useLayerForClickAway\n closeOnClickOutside\n closeOnESC\n blockPageScroll\n >\n <div\n className="zent-doc-portal-content"\n style={{\n position: \'absolute\',\n left: \'50%\',\n top: \'50%\',\n transform: \'translate3d(-50%, -50%, 0)\',\n border: \'1px solid #d3d3d3\',\n borderRadius: \'3px\',\n padding: \'50px\',\n background: \'white\',\n }}\n >\n The content is appended to body by default, and a curtain is set for closing\n </div>\n </Portal>\n </div>\n );\n }\n}\n\nReactDOM.render(<PortalBasic />, mountNode);'},v.a.createElement(N)),v.a.createElement(C,{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\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
PropertyDescriptionTypeRequiredDefaultAlternative
childrenOnly supports one childstringNo
selectorDOM node to render childstring or DOM ElementNo\'body\'legal CSS selector or certain DOM node
visibleWhether to render childboolNotrue
layerThe layer curtain tag namestringNodiv
useLayerForClickAwayWhether to use a layer for click away from \nPortalbooleanNofalse
closeOnClickOutsideClose portal when click outside of portalboolNofalsetrue
closeOnESCClose portal when pressing ESCboolNofalsetrue
blockPageScrollBlock page scroll when portal is openboolNofalsetrue
onCloseCallback when portal closes(e: event) => voidNo
onLayerReadyThe hook when layer is ready(node: HTMLElement) => voidNo
classNameThe layer class namestringNo
styleThe layer styleobjectNo
css(Deprecated, use style instead) Extra css style. such as, \n{ \'margin-left\': \'10px\' }objectNo{}
\n

There\'s a contains method on Portal instance which can be used to check if a DOM node is a decedent of the portal. This method works with nested portals.

\n

Principle

\n\n

PurePortal

\n

Pure portal widget。

\n

Guides

\n

Portal behaves like React 16 Portal，which will overwrite all content inside its container.

\n

PurePortal-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
PropertyDescriptionTypeRequiredDefaultAlternative
childrenOnly supports one childstringNo
selectorDOM node to render childstring or DOM ElementNo\'body\'legal CSS selector or certain DOM node
appendShould append content to the container, if false, the container will be cleanedboolNofalse
'}))}}]),a}(f.Component)}}]);