mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
placement add top and bottom
This commit is contained in:
陈帅
偏右
parent
83790dfee5
commit
2ca3661e87
@ -16,6 +16,20 @@ describe('Drawer', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render top drawer', () => {
|
||||
const wrapper = render(
|
||||
<Drawer
|
||||
visible
|
||||
height={400}
|
||||
placement="top"
|
||||
getContainer={false}
|
||||
>
|
||||
Here is content of Drawer
|
||||
</Drawer>
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('have a title', () => {
|
||||
const wrapper = render(
|
||||
<Drawer
|
||||
|
||||
@ -105,7 +105,7 @@ describe('Drawer', () => {
|
||||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('render right MultiDrawer', () => {
|
||||
it('render left MultiDrawer', () => {
|
||||
const wrapper = mount(<MultiDrawer placement="left" />);
|
||||
wrapper.find('button#open_drawer').simulate('click');
|
||||
wrapper.find('button#open_two_drawer').simulate('click');
|
||||
|
||||
@ -205,3 +205,43 @@ exports[`Drawer render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Drawer render top drawer 1`] = `
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-top"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform:translateY(-100%);-ms-transform:translateY(-100%);height:400px"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`Drawer render correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn"
|
||||
class="ant-btn ant-btn-clicked"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 左侧滑出
|
||||
en-US: Left Slider
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
|
||||
|
||||
## en-US
|
||||
|
||||
Basic drawer.
|
||||
|
||||
```jsx
|
||||
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>
|
||||
<Button type="primary" onClick={this.showDrawer}>
|
||||
Open
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Basic Drawer"
|
||||
placement="left"
|
||||
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);
|
||||
```
|
||||
75
components/drawer/demo/placement.md
Normal file
75
components/drawer/demo/placement.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 自定义位置
|
||||
en-US: Custom Placement
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
|
||||
|
||||
## en-US
|
||||
|
||||
Basic drawer.
|
||||
|
||||
```jsx
|
||||
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);
|
||||
```
|
||||
@ -27,9 +27,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| title | The title for Drawer. | string\|ReactNode | - |
|
||||
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
|
||||
| width | Width of the Drawer dialog. | string\|number | 256 |
|
||||
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
|
||||
| className | The class name of the container of the Drawer dialog. | string | - |
|
||||
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
|
||||
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
|
||||
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
|
||||
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import PropTypes from 'prop-types';
|
||||
import createReactContext, { Context } from 'create-react-context';
|
||||
import warning from 'warning';
|
||||
import classNames from 'classnames';
|
||||
@ -24,12 +24,13 @@ export interface DrawerProps {
|
||||
title?: React.ReactNode;
|
||||
visible?: boolean;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
/* deprecated, use className instead */
|
||||
wrapClassName?: string;
|
||||
zIndex?: number;
|
||||
prefixCls?: string;
|
||||
push?: boolean;
|
||||
placement?: 'left' | 'right';
|
||||
placement?: 'top' | 'right' | 'bottom' | 'left';
|
||||
onClose?: (e: EventType) => void;
|
||||
className?: string;
|
||||
}
|
||||
@ -65,6 +66,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-drawer',
|
||||
width: 256,
|
||||
height: 256,
|
||||
closable: true,
|
||||
placement: 'right',
|
||||
maskClosable: true,
|
||||
@ -179,7 +181,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
);
|
||||
}
|
||||
renderProvider = (value: Drawer) => {
|
||||
let { zIndex, style, placement, className, wrapClassName, ...rest } = this.props;
|
||||
let { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
|
||||
warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
|
||||
const RcDrawerStyle = this.state.push
|
||||
? {
|
||||
@ -188,10 +190,17 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
}
|
||||
: { zIndex };
|
||||
this.praentDrawer = value;
|
||||
const offsetStyle: any = {};
|
||||
if (placement === 'left' || placement === 'right') {
|
||||
offsetStyle.width = width;
|
||||
} else {
|
||||
offsetStyle.height = height;
|
||||
}
|
||||
return (
|
||||
<DrawerContext.Provider value={this}>
|
||||
<RcDrawer
|
||||
{...rest}
|
||||
{...offsetStyle}
|
||||
handler={false}
|
||||
open={this.props.visible}
|
||||
onMaskClick={this.onMaskClick}
|
||||
|
||||
@ -28,9 +28,10 @@ title: Drawer
|
||||
| title | 标题 | string \| ReactNode | - |
|
||||
| visible | Drawer 是否可见 | boolean | - |
|
||||
| width | 宽度 | string \| number | 256 |
|
||||
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
|
||||
| className | 对话框外层容器的类名 | string | - |
|
||||
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
|
||||
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
|
||||
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'
|
||||
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user