A panel that slides out from the edge of the screen.
A panel that slides out from the edge of the screen.
import { Drawer } from '@yuntijs/ui';based on antd Drawer component.
import { Button, Drawer, Flex, Space } from '@yuntijs/ui';
import React, { useState } from 'react';
export default () => {
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
return (
<div>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer
title="YuntiUI Drawer"
onClose={onClose}
open={open}
extra={<Button>Action</Button>}
footer={
<Flex justify="flex-end" gap={16}>
<Button>取消</Button>
<Button type="primary">确定</Button>
</Flex>
}
>
<p>
The YuntiUI components are inspired by LobeUI and developed based on Antd components,
fully compatible with Antd components, and it is recommended to use antd-style as the
default css-in-js styling solution.
</p>
</Drawer>
</div>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| 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 | -- | {} | -- |
| closeIconPlacement | The placement of the close icon. When the value is auto and extra if present, the close button is left, and right if not. | "auto"|"left"|"right" | "right" |