mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 06:58:33 +08:00
0a70563e44
* 🎬 improve drawer demo * 🎬 fix drawer demo glitch close #24011
1.5 KiB
1.5 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
渲染在当前 dom 里。自定义容器,查看 getContainer。
en-US
Render in current dom. custom container, check getContainer.
import { Drawer, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
};
render() {
return (
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{ position: 'absolute' }}
>
<p>Some contents...</p>
</Drawer>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
.site-drawer-render-in-current-wrapper {
position: relative;
height: 200px;
padding: 48px;
overflow: hidden;
text-align: center;
background: #fafafa;
border: 1px solid #ebedf0;
border-radius: 2px;
}