zent/src/portal/demos/basic.md

一套前端设计语言和基于React的实现

---
order: 1
zh-CN:
	title: 基本用法，第二行是 `Portal` 插入的，可以在浏览器里审查元素观察Html结构
	originalContent: 这里是原来就有的内容
	portalContent: 这里是 Portal 动态插入的内容
	purePortalContent: 这里是 PurePortal 动态插入的内容, 覆盖容器内原有内容
	bodyPortalContent: 默认插入到body最后，并设置为拥有遮罩用于关闭
	bodyPortalButton: 添加带遮罩的Portal到body
en-US:
	title: Basic usage
	originalContent: Original content
	portalContent: Content that Portal inserts dynamically
	purePortalContent: Content that PurePortal inserts dynamically, overwrites the original content inside the container
	bodyPortalContent: The content is appended to body by default, and a curtain is set for closing
	bodyPortalButton: Append a Portal with curtain to body

---

```jsx
import { Portal, Button, PurePortal } from 'zent';

// const WrappedPortal = Portal.withNonScrollable(Portal.withESCToClose(Portal));

class PortalBasic extends Component {
	state = {
		bodyPortalVisible: false,
		purePortalVisible: false,
	};
	togglePurePortal = () =>
		this.setState({ purePortalVisible: !this.state.purePortalVisible });
	showBodyPortal = () => this.setState({ bodyPortalVisible: true });
	hideBodyPortal = () => this.setState({ bodyPortalVisible: false });
	render() {
		return (
			<div className="zent-doc-portal-container">
				<div className="zent-doc-portal-mount-node">{i18n.originalContent}</div>
				<Portal selector=".zent-doc-portal-mount-node">
					<div className="zent-doc-portal-content">{i18n.portalContent}</div>
				</Portal>
				<div className="zent-doc-pure-portal-mount-node">
					content to be overwritten
				</div>
				{this.state.purePortalVisible ? (
					<PurePortal selector=".zent-doc-pure-portal-mount-node">
						<div className="zent-doc-portal-content">
							{i18n.purePortalContent}
						</div>
					</PurePortal>
				) : null}
				<Button onClick={this.togglePurePortal}>Toggle PurePortal</Button>
				<Button onClick={this.showBodyPortal}>{i18n.bodyPortalButton}</Button>
				<Portal
					visible={this.state.bodyPortalVisible}
					onClose={this.hideBodyPortal}
					className="layer"
					style={{ background: 'rgba(0, 0, 0, 0.2)' }}
					useLayerForClickAway
					closeOnClickOutside
					closeOnESC
					blockPageScroll
				>
					<div
						className="zent-doc-portal-content"
						style={{
							position: 'absolute',
							left: '50%',
							top: '50%',
							transform: 'translate3d(-50%, -50%, 0)',
							border: '1px solid #d3d3d3',
							borderRadius: '3px',
							padding: '50px',
							background: 'white',
						}}
					>
						{i18n.bodyPortalContent}
					</div>
				</Portal>
			</div>
		);
	}
}

ReactDOM.render(<PortalBasic />, mountNode);
```