📝 docs: component docs to en

ant-design · Feb 12, 2024 · c5811ad · c5811ad
1 parent 67ce7b1
commit c5811ad
Show file tree

Hide file tree

Showing 16 changed files with 196 additions and 262 deletions.
diff --git a/src/DraggablePanel/demos/basic.tsx b/src/DraggablePanel/demos/basic.tsx
@@ -12,9 +12,9 @@ export default () => (
       maxWidth: '100%',
     }}
   >
-    <div style={{ flex: 1, padding: 12 }}>内容</div>
+    <div style={{ flex: 1, padding: 12 }}>Content</div>
     <DraggablePanel style={{ padding: 12 }} maxWidth={600}>
-      右侧面板
+      Right Panel
     </DraggablePanel>
   </div>
 );
diff --git a/src/DraggablePanel/demos/bottom.tsx b/src/DraggablePanel/demos/bottom.tsx
@@ -6,9 +6,9 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox style={{ height: 300 }}>
-    <div style={{ flex: 1, padding: 12 }}>内容</div>
+    <div style={{ flex: 1, padding: 12 }}>Content</div>
     <DraggablePanel placement="bottom" maxHeight={250} style={{ width: '100%', padding: 12 }}>
-      底部面板
+      Bottom Panel
     </DraggablePanel>
   </Flexbox>
 );
diff --git a/src/DraggablePanel/demos/controlFloat.tsx b/src/DraggablePanel/demos/controlFloat.tsx
@@ -21,7 +21,7 @@ export default () => {
         mode="float"
         style={{ padding: 12 }}
       >
-        悬浮可拖拽面板
+        Float Draggable Panel
       </DraggablePanel>
     </div>
   );

diff --git a/src/DraggablePanel/demos/float.tsx b/src/DraggablePanel/demos/float.tsx
@@ -12,7 +12,7 @@ export default () => {
       }}
     >
       <DraggablePanel style={{ padding: 12 }} mode="float">
-        悬浮可拖拽面板
+        Float Draggable Panel
       </DraggablePanel>
     </div>
   );

diff --git a/src/DraggablePanel/demos/left.tsx b/src/DraggablePanel/demos/left.tsx
@@ -7,8 +7,8 @@ import { Flexbox } from 'react-layout-kit';
 export default () => (
   <Flexbox horizontal style={{ height: 300 }}>
     <DraggablePanel placement="left" maxWidth={800} style={{ width: '100%', padding: 12 }}>
-      左侧面板
+      Left Panel
     </DraggablePanel>
-    <div style={{ flex: 1, padding: 12 }}>内容</div>
+    <div style={{ flex: 1, padding: 12 }}>Content</div>
   </Flexbox>
 );
diff --git a/src/DraggablePanel/demos/top.tsx b/src/DraggablePanel/demos/top.tsx
@@ -7,8 +7,8 @@ import { Flexbox } from 'react-layout-kit';
 export default () => (
   <Flexbox style={{ height: 300 }}>
     <DraggablePanel placement="top" maxHeight={250} style={{ width: '100%', padding: 12 }}>
-      顶部面板
+      Top Panel
     </DraggablePanel>
-    <div style={{ flex: 1, padding: 12 }}>内容</div>
+    <div style={{ flex: 1, padding: 12 }}>Content</div>
   </Flexbox>
 );
diff --git a/src/DraggablePanel/index.en-US.md b/src/DraggablePanel/index.en-US.md
@@ -1,60 +1,45 @@
 ---
 title: DraggablePanel
-group: Basic
+atomId: DraggablePanel
+group: Panel
 ---
 
-# Draggable Floating Panel
+# DraggablePanel Draggable Floating Panel
 
-## When to use
+Used for panels that need to be stretched or dragged and moved.
 
-Use when you need a panel that can be stretched or dragged.
+## Code Demo
 
-## Fixed Panel
+<code src="./demos/basic.tsx"  compact="true" title="Fixed Panel on the Right"  description="By default, the panel on the right is fixed and can be dragged left and right"></code>
 
-### Right Panel (Default)
+<code src="./demos/left.tsx" title="Fixed Panel on the Left" description="The panel on the left is fixed and can be dragged left and right"></code>
 
-Resizable from left to right
+<code src="./demos/bottom.tsx" title="Fixed Panel at the Bottom" description="The panel at the bottom is fixed and can be dragged up and down"></code>
 
-<code src="./demos/basic.tsx"  compact="true" ></code>
+<code src="./demos/top.tsx" title="Fixed Panel at the Top" description="The panel at the top is fixed and can be dragged up and down"></code>
 
-### Left Panel
+<code src="./demos/float.tsx" compact="true" title="Floating Draggable Panel" description="Set `mode` to `float`"></code>
 
-<code src="./demos/left.tsx"></code>
-
-### Bottom Panel
-
-<code src="./demos/bottom.tsx"></code>
-
-### Top Panel
-
-<code src="./demos/top.tsx"></code>
-
-## Floating Draggable Panel
-
-<code src="./demos/float.tsx" compact="true" ></code>
-
-### Floating Controlled Mode
-
-<code src="./demos/controlFloat.tsx" compact="true"  ></code>
+<code src="./demos/controlFloat.tsx" compact="true" title="Floating Controlled Mode" description="The position of the floating panel is controlled"></code>
 
 ## API
 
 | Property         | Type                                       | Default      | Description                                                                   |
 | ---------------- | ------------------------------------------ | ------------ | ----------------------------------------------------------------------------- |
 | mode             | `'fixed' \| 'float'`                       | `'fixed'`    | The position mode of the panel, using fixed mode or floating window           |
 | placement        | `'right' \| 'left' \| 'top' \| 'bottom'`   | `'right'`    | The orientation of the panel in fixed mode, default placement is on the right |
-| minWidth         | `number`                                   |              | The minimum width of the panel                                                |
-| minHeight        | `number`                                   |              | The minimum height of the panel                                               |
-| maxWidth         | `number`                                   |              | The maximum width of the panel                                                |
-| maxHeight        | `number`                                   |              | The maximum height of the panel                                               |
+| minWidth         | `number`                                   |              | Minimum width of the panel                                                    |
+| minHeight        | `number`                                   |              | Minimum height of the panel                                                   |
+| maxWidth         | `number`                                   |              | Maximum width of the panel                                                    |
+| maxHeight        | `number`                                   |              | Maximum height of the panel                                                   |
 | resize           | `RndProps['enableResizing']`               |              | Control the resizable area                                                    |
 | size             | `Partial<Size>`                            |              | Panel size                                                                    |
 | onSizeChange     | `(delta: NumberSize, size?: Size) => void` |              | Callback for panel size change                                                |
 | onSizeDragging   | `(delta: NumberSize, size?: Size) => void` |              | Callback during panel size dragging                                           |
 | expandable       | `boolean`                                  | `true`       | Whether it can be expanded                                                    |
-| isExpand         | `boolean`                                  |              | Current expansion state                                                       |
-| onExpandChange   | `(expand: boolean) => void`                |              | Callback for expansion state change                                           |
-| position         | `RndProps['position']`                     |              | Panel position, controlled mode                                               |
+| isExpand         | `boolean`                                  |              | Whether it is currently in the expanded state                                 |
+| onExpandChange   | `(expand: boolean) => void`                |              | Callback for expand state change                                              |
+| position         | `RndProps['position']`                     |              | Panel position in controlled mode                                             |
 | defaultSize      | `Partial<Size>`                            |              | Default panel size                                                            |
 | defaultPosition  | `RndProps['position']`                     | `[100, 100]` | Default panel position, valid in floating mode                                |
 | onPositionChange | `(position: RndProps['position']) => void` |              | Callback for panel position change                                            |

diff --git a/src/ErrorBoundary/index.en-US.md b/src/ErrorBoundary/index.en-US.md
@@ -2,30 +2,27 @@
 title: ErrorBoundary
 order: 100
 atomId: ErrorBoundary
-group: Basic
+group:
+  title: Panel
 ---
 
 # ErrorBoundary Error Prompt
 
-## Example
+General error prompt panel
 
-### Production Environment
+## Code Demo
 
-<code src='./demos/_prod.tsx' ></code>
+<code src='./demos/_prod.tsx' title="Production Environment"></code>
 
-### Development Environment
-
-Error messages will be displayed directly during development:
-
-<code src='./demos/_dev.tsx' ></code>
+<code src='./demos/_dev.tsx' title="Development Environment" description="Error messages will be displayed directly during development"></code>
 
 ## API
 
 Error boundary component property interface
 
-| Property       | Type              | Description                            |
-| -------------- | ----------------- | -------------------------------------- |
-| children       | `React.ReactNode` | Child component                        |
-| onExportConfig | `() => void`      | Export configuration callback function |
-| onRetry        | `() => void`      | Retry callback function                |
-| showDev        | `boolean`         | Whether to display developer options   |
+| Property       | Type              | Description                                         |
+| -------------- | ----------------- | --------------------------------------------------- |
+| children       | `React.ReactNode` | Child component                                     |
+| onExportConfig | `() => void`      | Callback function for exporting configuration items |
+| onRetry        | `() => void`      | Retry callback function                             |
+| showDev        | `boolean`         | Whether to display developer options                |
diff --git a/src/FreeCanvas/index.en-US.md b/src/FreeCanvas/index.en-US.md
@@ -1,12 +1,14 @@
 ---
 title: FreeCanvas
 atomId: FreeCanvas
-group: Basic
+group: Panel
 ---
 
 # FreeCanvas Free Canvas
 
-## Example
+A free canvas encapsulation based on `ReactFlow`
+
+## Code Demo
 
 <code src='./demos/basic.tsx' ></code>
 

diff --git a/src/Highlight/index.en-US.md b/src/Highlight/index.en-US.md
@@ -6,47 +6,37 @@ group: Basic
 
 # Highlight
 
-## When to use
-
-Use it to display code. Highlight uses [Shiki](https://github.com/shikijs/shiki) for rendering by default. Shiki uses the TextMate syntax parser for more precision, but it requires loading additional wasm files, which may result in poor performance in case of poor network conditions. If initialization fails, the component will use [highlight.js](https://highlightjs.org/) as a replacement.
+Used to display code, Highlight defaults to using [Shiki](https://github.com/shikijs/shiki) for rendering. Shiki uses a TextMate grammar for more precision, but it requires loading additional wasm files, which may result in a poor experience in case of poor network conditions. If initialization fails, the component will set the renderer to [highlight.js](https://highlightjs.org/) as a replacement.
 
 ## Code Demo
 
-### Automatic Theme
-
-<code src="./demos/auto.tsx" ></code>
-
-### Disable Shiki
-
-<code src="./demos/shiki.tsx" ></code>
-
-### Specify Language
-
-<code src="./demos/basic.tsx" ></code>
+<code src="./demos/auto.tsx" title="Automatic Theme" description="By default, `auto` is enabled, which will automatically switch themes based on the current environment"></code>
 
-### Display Code Block Line Numbers
+<code src="./demos/shiki.tsx"  title="Disable Shiki" description="By default, `shiki` rendering is enabled, but it can be disabled by setting `shiki=false` in weak or no network situations"></code>
 
-<code src="./demos/lineNumber.tsx" ></code>
+<code src="./demos/basic.tsx" title="Specify Language and Theme" description="You can specify the language for highlighting using `language` and the highlighting theme using `theme`"></code>
 
-### Theme & Language & Line Numbers & Renderer
+<code src="./demos/lineNumber.tsx"  title="Display Code Block Line Numbers"
+description="You can specify whether to display line numbers for the code block using `lineNumber`"></code>
 
-<code src="./demos/theme.tsx" ></code>
+<code src="./demos/theme.tsx"  title="Switch Language and Theme"
+description="You can use this example to see the effects of different languages in different themes"></code>
 
 ## API Parameters
 
 ### Highlight
 
-| Parameter    | Description                                                                                            | Type    | Default |
-| :----------- | :----------------------------------------------------------------------------------------------------- | :------ | :------ |
-| language     | Specify the language type, see the table below                                                         | string  | -       |
-| showLanguage | Whether to display the language tag                                                                    | boolean | true    |
-| theme        | Specify the theme, options: `dark`, `light`, `auto`                                                    | string  | `auto`  |
-| lineNumber   | Specify whether to enable line numbers for the code block, options: `true`, `false`                    | boolean | false   |
-| copyable     | Specify whether to display a copy button for the code block, options: `true`, `false`                  | boolean | true    |
-| height       | Specify the height of the code block, used for scenarios where the code block height needs to be fixed | number  | -       |
-| type         | Specify the rendering type, options: `block`, `pure`. In pure mode, the container style is removed     | `block` | -       |
-
-### Currently supported language list
+| Parameter    | Description                                                                                        | Type    | Default |
+| :----------- | :------------------------------------------------------------------------------------------------- | :------ | :------ |
+| language     | Specifies the language type, see table below                                                       | string  | -       |
+| showLanguage | Whether to display the language tag                                                                | boolean | true    |
+| theme        | Specifies the theme, options: `dark`, `light`, `auto`                                              | string  | `auto`  |
+| lineNumber   | Specifies whether to enable code block line numbers, options: `true`, `false`                      | boolean | false   |
+| copyable     | Specifies whether to display a copy button for the code block, options: `true`, `false`            | boolean | true    |
+| height       | Specifies the code block height, for scenarios where the code block height needs to be fixed       | number  | -       |
+| type         | Specifies the rendering type, options: `block`, `pure`. In pure mode, container styles are removed | `block` | -       |
+
+### Currently Supported Language List
 
 - javascript
 - typescript

diff --git a/src/IconPicker/index.en-US.md b/src/IconPicker/index.en-US.md
@@ -1,34 +1,24 @@
 ---
 title: IconPicker
-group: Panel
+atomId: IconPicker
+group:
+  title: Panel
 ---
 
 # IconPicker Icon Selector
 
-## When To Use
-
 Used for selecting icons.
 
 ## Code Demo
 
-### Basic Usage
-
-<code src="./demos/normal.tsx" ></code>
-
-### Controlled Mode
+<code src="./demos/normal.tsx" title="Basic Usage"></code>
 
-<code src="./demos/controlled.tsx" ></code>
+<code src="./demos/controlled.tsx" title="Controlled Mode"></code>
 
-### External Scripts
-
-If external iconfontScripts are provided and onChange method is not set, the add icon source button will be hidden by default.
-
-<code src="./demos/scripts.tsx" ></code>
+<code src="./demos/scripts.tsx" title="External Scripts" description="If `iconfontScripts` are passed in externally and `onChange` method is not set, the button for adding icon sources will be hidden by default."></code>
 
 ## API
 
-## Basic Properties
-
 | Property                     | Type                                           | Description                                           |
 | ---------------------------- | ---------------------------------------------- | ----------------------------------------------------- |
 | defaultIcon                  | `IconUnit`                                     | Default icon unit                                     |
@@ -64,9 +54,9 @@ The most basic unit of icon information, which can be `ReactIcon` or `IconfontIc
 
 ### IconfontIcon
 
-| Property      | Type       | Description                                              |
-| ------------- | ---------- | -------------------------------------------------------- |
-| type          | `iconfont` | Icon type, only supports iconfont                        |
-| componentName | `string`   | Icon component name                                      |
-| props         | `Object`   | Props of the icon component, must include the type field |
-| scriptUrl     | `string`   | Link to the iconfont script                              |
+| Property      | Type       | Description                                                |
+| ------------- | ---------- | ---------------------------------------------------------- |
+| type          | `iconfont` | Icon type, only supports iconfont                          |
+| componentName | `string`   | Icon component name                                        |
+| props         | `Object`   | Props of the icon component, must include the `type` field |
+| scriptUrl     | `string`   | Link address of the iconfont script                        |