Based on antd drawer and react-draggable.
DragPanel
import { DragPanel } from '@yuntijs/ui';Based on antd drawer and react-draggable.
import { DragPanel } from '@yuntijs/ui';Based on antd drawer and react-draggable.
import { DragPanel } from '@yuntijs/ui';
export default () => {
return (
<DragPanel open styles={{ wrapper: { height: 320 } }} title="单节点调试">
我是 panel 的内容
</DragPanel>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| defaultPosition | 面板默认位置 | {x:number;y:number} | -- |
| onPositionChange | 面板位置改变的回调函数 | (position:import("react-draggable").ControlPosition)=>void | -- |
| size | -- | "large"|"default" | -- |
| open | -- | boolean | -- |
| afterOpenChange | -- | (open:boolean)=>void | -- |
| visible | -- | boolean | -- |
| afterVisibleChange | -- | (open:boolean)=>void | -- |
| classNames | -- | {header?:string;body?:string;footer?:string} | -- |
| styles | -- | {header?:object;body?:object;footer?:object} | -- |
| destroyOnClose | -- | boolean | -- |
| destroyOnHidden | -- | boolean | -- |
| children | -- | ReactNode | -- |
| loading | -- | boolean | -- |
| title | -- | ReactNode | -- |
| extra | -- | ReactNode | -- |
| footer | -- | ReactNode | -- |
| closable | Recommend to use closeIcon instead e.g. `<Drawer closeIcon={false} />` | any | -- |
| maskStyle | -- | {} | -- |
| onClose | -- | (e:React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>)=>void | -- |
| closeIcon | -- | ReactNode | -- |
| headerStyle | -- | {} | -- |
| bodyStyle | -- | {} | -- |
| footerStyle | -- | {} | -- |
| contentWrapperStyle | -- | {} | -- |
| drawerStyle | -- | {} | -- |