+ 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.
+
+
+
+ );
+};
diff --git a/src/Drawer/index.md b/src/Drawer/index.md
new file mode 100644
index 0000000..26d66e7
--- /dev/null
+++ b/src/Drawer/index.md
@@ -0,0 +1,65 @@
+---
+nav: Components
+group: Feedback
+title: Drawer
+description: A panel that slides out from the edge of the screen.
+---
+
+## Usage
+
+based on antd [Drawer](https://ant.design/components/drawer-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+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 (
+
+
+ Action}
+ footer={
+
+
+
+
+ }
+ >
+
+ 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.
+
+
+
+ );
+};
+```
+
+
+
+## Playground
+
+
+
+## APIs
+
+
diff --git a/src/Drawer/index.tsx b/src/Drawer/index.tsx
new file mode 100644
index 0000000..6411ecf
--- /dev/null
+++ b/src/Drawer/index.tsx
@@ -0,0 +1,24 @@
+import { Drawer as AntdDrawer, type DrawerProps as AntdDrawerProps } from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+interface CustomDrawerProps {
+ /**
+ * @description The placement of the close icon. When the value is auto and extra if present, the close button is left, and right if not.
+ * @default 'right'
+ */
+ closeIconPlacement?: 'left' | 'right' | 'auto';
+}
+
+export interface DrawerProps extends AntdDrawerProps, CustomDrawerProps {}
+
+export const Drawer: React.FC = props => {
+ const { className, ...otherProps } = props;
+
+ const { styles, cx } = useStyles(otherProps);
+
+ return ;
+};
+
+export default Drawer;
diff --git a/src/Drawer/style.ts b/src/Drawer/style.ts
new file mode 100644
index 0000000..0bca18d
--- /dev/null
+++ b/src/Drawer/style.ts
@@ -0,0 +1,33 @@
+import { createStyles } from 'antd-style';
+
+import { DrawerProps } from './index';
+
+export const useStyles = createStyles(
+ ({ css, prefixCls }, { closeIcon, closeIconPlacement, extra }: DrawerProps) => {
+ const rightCloseIconStyle = css`
+ .${prefixCls}-drawer-header-title {
+ flex-direction: row-reverse;
+ }
+ .${prefixCls}-drawer-close {
+ flex-direction: row-reverse;
+ margin-right: -10px !important;
+ }
+ ${!(closeIcon === null || closeIcon === false) &&
+ css`
+ .${prefixCls}-drawer-extra {
+ position: absolute;
+ right: 45px;
+ }
+ `}
+ `;
+ return {
+ custom: css`
+ ${(!closeIconPlacement ||
+ closeIconPlacement === 'right' ||
+ (closeIconPlacement === 'auto' && !extra)) &&
+ rightCloseIconStyle}
+ `,
+ };
+ },
+ { hashPriority: 'low' }
+);
diff --git a/src/index.ts b/src/index.ts
index a9f5ecb..d1f90b9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ export * from './Alert';
export * from './Card';
export * from './Descriptions';
export * from './Divider';
+export * from './Drawer';
// ~ antd
export {
@@ -45,6 +46,12 @@ export {
type ColProps, // @todo center style
DatePicker,
type DatePickerProps,
+ Dropdown,
+ type DropDownProps,
+ Flex,
+ type FlexProps,
+ Space,
+ type SpaceProps,
} from 'antd';
// ~ @lobehub/ui