mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +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 } from 'antd';
const RadioGroup = Radio.Group;
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() {
return (
<div>
<RadioGroup
style={{ marginRight: 8 }}
defaultValue={this.state.placement}
onChange={this.onChange}
>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</RadioGroup>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
<Drawer
title="Basic Drawer"
placement={this.state.placement}
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);