mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
1.5 KiB
1.5 KiB
order | title | ||||
---|---|---|---|---|---|
1 |
|
zh-CN
自定义位置,点击触发按钮抽屉从相应的位置滑出,点击遮罩区关闭。
en-US
The Drawer can appear from any edge of the screen.
import { Drawer, Button, Radio, Space } from 'antd';
class App extends React.Component {
state = { visible: false, placement: 'left' };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
};
onChange = e => {
this.setState({
placement: e.target.value,
});
};
render() {
const { placement, visible } = this.state;
return (
<>
<Space>
<Radio.Group value={placement} onChange={this.onChange}>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</Radio.Group>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</Space>
<Drawer
title="Basic Drawer"
placement={placement}
closable={false}
onClose={this.onClose}
visible={visible}
key={placement}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
}
}
export default App;