Skip to content

Commit 9238280

Browse files
afc163afc163
committed
docs: refine bilingual README branding
1 parent 12b3f53 commit 9238280

2 files changed

Lines changed: 46 additions & 48 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div align="center">
22
<h1>@rc-component/drawer</h1>
3-
<p><sub>Part of the Ant Design ecosystem.</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
54
<p>🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.</p>
65

76
<p>

‎README.zh-CN.md‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div align="center">
22
<h1>@rc-component/drawer</h1>
3-
<p><sub>Ant Design 生态的一部分。</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
54
<p>🚪 React 抽屉组件，支持遮罩、动画、自定义容器和语义化样式。</p>
65

76
<p>
@@ -21,11 +20,11 @@
2120

2221
| 范围 | 支持 |
2322
| ----------- | ------------------------------------------------------ |
24-
| Placement | Left, right, top, and bottom drawers |
25-
| Interaction | Mask click, keyboard close, focus management |
26-
| Composition | Nested drawers with push behavior |
27-
| Layout | Fixed drawer size, resizable panels, custom containers |
28-
| Motion | Configurable open and close transitions |
23+
| Placement | 左、右、上、下四个方向的抽屉 |
24+
| Interaction | 遮罩点击、键盘关闭和焦点管理 |
25+
| Composition | 支持带 push 行为的嵌套抽屉 |
26+
| Layout | 固定抽屉尺寸、可调整大小面板和自定义容器 |
27+
| 运动 | 可配置打开和关闭动画 |
2928

3029
## 安装
3130

@@ -47,49 +46,49 @@ export default () => (
4746

4847
## 示例
4948

50-
查看[在线示例](https://drawer-react-component.vercel.app/)，了解 placement, container, nested drawer, mask, force render, and resizable demos。
49+
查看[在线示例](https://drawer-react-component.vercel.app/)，了解放置、容器、嵌套抽屉、遮罩、强制渲染和可调整大小的演示。
5150

5251
## API
5352

5453
| 参数 | 类型 | 默认值 | 说明 |
5554
| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- |
56-
| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. |
57-
| autoFocus | boolean | true | Whether to focus the drawer after it opens. |
58-
| children | ReactNode | - | Drawer content. |
59-
| className | string | - | Class name for the drawer panel. |
60-
| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. |
61-
| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. |
62-
| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. |
63-
| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. |
64-
| focusTrap | boolean | - | Whether to trap focus inside the drawer. |
65-
| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. |
66-
| forceRender | boolean | false | Render the drawer before it is opened. |
67-
| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. |
68-
| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. |
69-
| keyboard | boolean | true | Whether pressing Esc closes the drawer. |
70-
| mask | boolean | true | Whether to show the mask. |
71-
| maskClassName | string | - | Class name for the mask. |
72-
| maskClosable | boolean | true | Whether clicking the mask closes the drawer. |
73-
| maskMotion | CSSMotionProps | - | Motion config for the mask. |
74-
| maskStyle | CSSProperties | - | Style for the mask. |
75-
| maxSize | number | - | Maximum size for a resizable drawer. |
76-
| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. |
77-
| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. |
78-
| open | boolean | false | Whether the drawer is open. |
79-
| panelRef | Ref<HTMLDivElement> | - | Ref for the drawer panel. |
55+
| afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 |
56+
| autoFocus | boolean | true | 抽屉打开后是否聚焦。 |
57+
| children们 | ReactNode | - | 抽屉内容。 |
58+
| className | string | - | 抽屉面板的className称。 |
59+
| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 |
60+
| defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 |
61+
| destroyOnHidden | boolean | false | 抽屉完全关闭后将其卸下。 |
62+
| drawerRender | `(node: ReactNode) => ReactNode` | - | 自定义渲染的抽屉面板内容。 |
63+
| focusTrap | boolean | - | 是否将焦点限制在抽屉内。 |
64+
| focusTriggerAfterClose | boolean | true | 关闭后是否将焦点返回到触发器。 |
65+
| forceRender | boolean | false | 在抽屉打开之前对其进行渲染。 |
66+
| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | 返回挂载节点。设置为 `false` 时内联渲染。 |
67+
| 高度 | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 |
68+
| keyboard | boolean | true | 按 Esc 是否关闭抽屉。 |
69+
| mask | boolean | true | 是否显示遮罩。 |
70+
| maskClassName | string | - | 掩码的className称。 |
71+
| maskClosable | boolean | true | 单击蒙版是否会关闭抽屉。 |
72+
| maskMotion | CSSMotionProps | - | 遮罩动画配置。 |
73+
| maskStyle | CSSProperties | - | 遮罩样式。 |
74+
| maxSize | number | - | 可调整大小的抽屉的最大尺寸。 |
75+
| 运动 | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 |
76+
| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 |
77+
| 打开 | boolean | false | 抽屉是否打开。 |
78+
| panelRef | Ref<HTMLDivElement> | - | 抽屉面板参考。 |
8079
| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. |
81-
| prefixCls | string | `rc-drawer` | Class name prefix. |
82-
| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. |
83-
| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | Enable resizing and optional resize callbacks. |
84-
| rootClassName | string | - | Class name for the root wrapper. |
85-
| rootStyle | CSSProperties | - | Style for the root wrapper. |
86-
| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. |
87-
| style | CSSProperties | - | Style for the drawer panel. |
88-
| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. |
89-
| width | number \| string | - | Deprecated. Use `size` for left or right placement. |
90-
| zIndex | number | - | Root wrapper z-index. |
91-
92-
Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel.
80+
| prefixCls | string | `rc-drawer` | className前缀。 |
81+
| push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 |
82+
| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 |
83+
| rootClassName | string | - | 根包装器的className。 |
84+
| rootStyle | CSSProperties | - | 根包装器的样式。 |
85+
| size | number \| string | `378` for left/right | 抽屉尺寸。控制左/右的宽度和顶部/底部放置的高度。 |
86+
| 风格 | CSSProperties | - | 抽屉面板的样式。 |
87+
| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | 内部抽屉元素的语义样式。 |
88+
| 宽度 | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 |
89+
| zIndex | number | - | 根包装器 z 索引。 |
90+
91+
鼠标和键盘事件处理程序（例如 `onClick` 、 `onMouseEnter` 、 `onMouseLeave` 、 `onKeyDown` 和 `onKeyUp`）将传递到抽屉面板。
9392

9493
## 本地开发
9594

@@ -113,8 +112,8 @@ npm run compile
113112
npm run prepublishOnly
114113
```
115114

116-
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
115+
包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
117116

118117
## 许可证
119118

120-
@rc-component/drawer is released under the [MIT](./LICENSE) license.
119+
@rc-component/drawer 基于 [MIT](./LICENSE) 许可证发布。

0 commit comments

Comments
 (0)