mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
demo: improve drawer demo and test case code
This commit is contained in:
parent
1b3d063990
commit
76afe5037d
@ -40,7 +40,7 @@ class MultiDrawer extends React.Component {
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Multi-level drawer"
|
||||
wrapClassName="test_drawer"
|
||||
className="test_drawer"
|
||||
width={520}
|
||||
closable={false}
|
||||
onClose={this.onClose}
|
||||
|
@ -55,9 +55,3 @@ class App extends React.Component {
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container{
|
||||
display:none
|
||||
}
|
||||
</style>
|
||||
|
@ -55,10 +55,3 @@ class App extends React.Component {
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container{
|
||||
display:none
|
||||
}
|
||||
</style>
|
@ -28,11 +28,9 @@ class DrawerForm extends React.Component {
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
this.setState(
|
||||
{
|
||||
visible: false,
|
||||
}
|
||||
);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -174,13 +172,8 @@ class DrawerForm extends React.Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const App = Form.create()(DrawerForm);
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container{
|
||||
display:none
|
||||
}
|
||||
</style>
|
@ -52,13 +52,12 @@ class App extends React.Component {
|
||||
<Drawer
|
||||
title="Multi-level drawer"
|
||||
width={520}
|
||||
wrapClassName="test_drawer"
|
||||
closable={false}
|
||||
onClose={this.onClose}
|
||||
visible={this.state.visible}
|
||||
>
|
||||
<Button type="primary" onClick={this.showChildrenDrawer}>
|
||||
Two-level drawer
|
||||
Two-level drawer
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Two-level Drawer"
|
||||
@ -102,9 +101,3 @@ class App extends React.Component {
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container{
|
||||
display:none
|
||||
}
|
||||
</style>
|
||||
|
@ -24,29 +24,27 @@ const pStyle = {
|
||||
marginBottom: 16,
|
||||
};
|
||||
|
||||
const DescriptionItem = ({ title, content }) => {
|
||||
return (
|
||||
<div
|
||||
const DescriptionItem = ({ title, content }) => (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
marginBottom: 7,
|
||||
color: 'rgba(0,0,0,0.65)',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
marginBottom: 7,
|
||||
color: 'rgba(0,0,0,0.65)',
|
||||
marginRight: 8,
|
||||
display: 'inline-block',
|
||||
color: 'rgba(0,0,0,0.85)',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
marginRight: 8,
|
||||
display: 'inline-block',
|
||||
color: 'rgba(0,0,0,0.85)',
|
||||
}}
|
||||
>
|
||||
{title}:
|
||||
</p>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
{title}:
|
||||
</p>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
|
||||
class App extends React.Component {
|
||||
state = { visible: false };
|
||||
@ -185,9 +183,3 @@ class App extends React.Component {
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container{
|
||||
display:none
|
||||
}
|
||||
</style>
|
@ -31,3 +31,9 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
|
||||
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
|
||||
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
@ -32,3 +32,9 @@ title: Drawer
|
||||
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
|
||||
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
|
||||
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
|
||||
|
||||
<style>
|
||||
#_hj_feedback_container {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user