From 15cd2bc476ab2dc5427b298bccfa61ac27c12cd8 Mon Sep 17 00:00:00 2001
From: vapour <72777988+vapourma@users.noreply.github.com>
Date: Fri, 21 Apr 2023 11:06:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E8=AF=91issue=20(#1293)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/web/api/badge.en-US.md    |  41 ++++
 docs/web/api/calendar.en-US.md |  91 ++++++++
 docs/web/api/collapse.en-US.md |  35 +++
 docs/web/api/comment.en-US.md  |  43 ++++
 docs/web/api/divider.en-US.md  |  30 +++
 docs/web/api/grid.en-US.md     |  43 ++++
 docs/web/api/icon.en-US.md     |   7 +
 docs/web/api/layout.en-US.md   |  34 +++
 docs/web/api/list.en-US.md     |  37 ++++
 docs/web/api/progress.en-US.md |  19 ++
 docs/web/api/skeleton.en-US.md |  37 ++++
 docs/web/api/steps.en-US.md    |  57 +++++
 docs/web/api/swiper.en-US.md   |  56 +++++
 docs/web/api/table.en-US.md    | 394 +++++++++++++++++++++++++++++++++
 docs/web/api/tag.en-US.md      |  31 +++
 docs/web/api/tooltip.en-US.md  |  41 ++++
 docs/web/api/tree.en-US.md     | 107 +++++++++
 17 files changed, 1103 insertions(+)
 create mode 100644 docs/web/api/badge.en-US.md
 create mode 100644 docs/web/api/calendar.en-US.md
 create mode 100644 docs/web/api/collapse.en-US.md
 create mode 100644 docs/web/api/comment.en-US.md
 create mode 100644 docs/web/api/divider.en-US.md
 create mode 100644 docs/web/api/grid.en-US.md
 create mode 100644 docs/web/api/icon.en-US.md
 create mode 100644 docs/web/api/layout.en-US.md
 create mode 100644 docs/web/api/list.en-US.md
 create mode 100644 docs/web/api/progress.en-US.md
 create mode 100644 docs/web/api/skeleton.en-US.md
 create mode 100644 docs/web/api/steps.en-US.md
 create mode 100644 docs/web/api/swiper.en-US.md
 create mode 100644 docs/web/api/table.en-US.md
 create mode 100644 docs/web/api/tag.en-US.md
 create mode 100644 docs/web/api/tooltip.en-US.md
 create mode 100644 docs/web/api/tree.en-US.md

diff --git a/docs/web/api/badge.en-US.md b/docs/web/api/badge.en-US.md
new file mode 100644
index 0000000000..5c1c171f5e
--- /dev/null
+++ b/docs/web/api/badge.en-US.md
@@ -0,0 +1,41 @@
+---
+title: Badge
+description: The badge identifier that appears in the upper right corner of an icon or text.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### Badge in the style of a red dot. 
+
+It is displayed as a circle and is located in the upper right corner of an icon or after a text title when there is no icon. In scenarios with weak prompts, the number is not displayed and the user needs to manually click to view and clear it.
+
+{{ base }}
+
+### Badge in the style of a number.
+
+The badge containing a number, suitable for scenarios that require strong reminders and directly alerting the user to the number of related information.
+
+{{ number }}
+
+### Customized Badge
+
+The displayed information can be customized, such as displaying as “hot” or “new”.
+
+{{ custom }}
+
+### Badges of different sizes.
+
+Two sizes are provided: standard (default) and small.
+
+{{ size }}
+
+### Badges of different shapes.
+
+wo different shapes of badges are provided: round and square.
+
+{{ shape }}
+
+### Control the offset position of the badge display.
+
+{{ offset }}
diff --git a/docs/web/api/calendar.en-US.md b/docs/web/api/calendar.en-US.md
new file mode 100644
index 0000000000..daae512754
--- /dev/null
+++ b/docs/web/api/calendar.en-US.md
@@ -0,0 +1,91 @@
+---
+title: Calendar
+description: Container for displaying data or dates in a calendar format.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Event calendar panel
+
+A date display container that can display events within dates. It is commonly used when there is enough space and when it is necessary to carry or display event information.
+
+{{ base }}
+
+### Card mode calendar
+
+Using individual dates as units, nested within a container with limited space to display dates and other information.
+
+{{ card }}
+
+### Function example
+
+#### Specify highlighted dates
+
+Customize specified highlighted dates through component properties. The component defaults to highlighting “today” or “the current month”. The `value` attribute can be used to set this highlighted date.
+
+{{ value }}
+
+#### Switch mode Calendar/Monthly
+
+Specify the display form of the component through component properties. The component is displayed in calendar form by default and provides “Calendar” and “Monthly” mode switching buttons. Developers can switch modes by modifying the `mode` attribute.
+
+{{ mode }}
+
+#### Specify the first day of the week in the first column
+
+Specify the first day of the week in the first column: Specify the first day of the week in the calendar’s first column through component properties. The component defaults to “Monday” in the first column and can be set to other days of the week through the `firstDayOfWeek` attribute (only valid when `mode` is `month`).
+
+{{ first-day-of-week }}
+
+#### Control related configuration
+
+Customize the control of the component through component properties. In some business scenarios, it may be necessary to globally hide or disable controls. This can also be achieved through the `controllerConfig` attribute for local control.
+
+{{ controller-config }}
+
+### Customization
+
+#### Custom calendar range
+
+Specify the value range of the year and month selection box through component properties. By default, the component allows years to be selected from `1970 - ∞` and there is no restriction on months. The range attribute can be used to set the selectable `range` of the calendar.
+
+{{ range }}
+
+#### Customizing the display of weeks
+
+You can customize the display of weeks through the `week` attribute or slot. By default, the weeks in the calendar are displayed as “Monday” to “Sunday”, but in some scenarios, you may want to customize the display.
+
+{{ week }}
+
+### Event example
+
+Use `methods` to define the execution logic of events. Developers can use these events to implement more customized features.
+
+{{ events }}
+
+### Slot example
+
+#### Header slot (top left corner of the component)
+
+Display content in the top left corner of the component. In some business scenarios, you may need to display a title or similar content in the top left corner of the component. In this case, you can use the `head` named slot.
+
+{{ head }}
+
+#### Cell slot - Append content
+
+Append content to the existing cell display. By default, the current date is displayed in the calendar cell. If you need to display additional information, you can use the `cellAppend` named slot.
+
+{{ cell-append }}
+
+#### Cell slot - Custom content
+
+Completely rewrite the content displayed in the cell. Unlike the `cellAppend` named slot, the `cell` named slot allows you to fully customize the cell content.
+
+{{ cell }}
+
+#### Attribute slot
+
+Use the `Props API` to use slots. In some scenarios, you may want to render slot content through the `Props API`. `head`, `cell` and`cellAppend` all have their corresponding `Props API`. The following briefly demonstrates the `Props API` for `head` and `cell`.
+
+{{ slot-props-api }}
diff --git a/docs/web/api/collapse.en-US.md b/docs/web/api/collapse.en-US.md
new file mode 100644
index 0000000000..74c6b09f58
--- /dev/null
+++ b/docs/web/api/collapse.en-US.md
@@ -0,0 +1,35 @@
+---
+title: Collapse
+description: You can group more or more complex content. The grouped content area can be collapsed, expanded or hidden.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic collapsible panel
+
+Basic collapsible panel, with customizable panel content.
+
+{{ base }}
+
+### Accordion mode collapsible panel
+
+Accordion mode collapsible panel, only one panel can be opened at a time.
+
+{{ mutex }}
+
+### Collapsible panel with settable icons
+
+You can set whether to display the expand icon and the position of the icon display.
+
+{{ icon }}
+
+### Collapsible panel with settable right-side operation
+
+You can customize the right-side operation area of the panel.
+
+{{ rightSlot }}
+
+### Collapsible panel in different modes
+
+{{ other }}
diff --git a/docs/web/api/comment.en-US.md b/docs/web/api/comment.en-US.md
new file mode 100644
index 0000000000..393680c05d
--- /dev/null
+++ b/docs/web/api/comment.en-US.md
@@ -0,0 +1,43 @@
+---
+title: Comment
+description: Comment is used for feedback, evaluation, discussion, etc. on page content, such as evaluations of articles and discussions on topics.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic comments
+
+The most basic comment component, including avatar, author, time, and comment content. Suitable for various scenarios where comments need to be displayed.
+
+{{ base }}
+
+### Comments with operations
+
+A component that allows you to perform related operations on comment content. Suitable for scenarios where a custom operation column is needed.
+
+{{ operation }}
+
+### List comments
+
+Comments displayed in list form.
+
+{{ list }}
+
+### Comments with replies
+
+A component that displays the reply content of a comment. Suitable for scenarios where comments need to be replied to. The author’s name can be followed by the name of the reply object.
+
+{{ reply }}
+
+### Comments with quotes
+
+Comments can quote other content to indicate the reference relationship between the comment and other content.
+
+{{ quote }}
+
+### Comments with reply form
+
+A component for replying to comment content. You can directly enter content in the reply form to reply.
+
+{{ reply-form }}
diff --git a/docs/web/api/divider.en-US.md b/docs/web/api/divider.en-US.md
new file mode 100644
index 0000000000..b71a570f4d
--- /dev/null
+++ b/docs/web/api/divider.en-US.md
@@ -0,0 +1,30 @@
+---
+title: Divider 
+description: The divider is a linear lightweight component that serves to separate, organize, and refine. It is used to logically organize element content and page structure.
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+### Basic divider
+
+The basic divider is an independent line without text, divided into horizontal and vertical dividers.
+
+#### Horizontal divider
+
+Horizontal dividers are commonly used to separate different element content.
+
+{{ base }}
+
+#### Vertical divider
+
+Vertical dividers are commonly used for inline separation.
+
+{{ vertical }}
+
+### Text divider
+
+The text divider is a divider with embedded text and is used when an explanation of the separated content is needed.
+
+{{ text }}
+
diff --git a/docs/web/api/grid.en-US.md b/docs/web/api/grid.en-US.md
new file mode 100644
index 0000000000..05aaec3d55
--- /dev/null
+++ b/docs/web/api/grid.en-US.md
@@ -0,0 +1,43 @@
+---
+title: Grid  
+description: The grid is a regular grid array that guides and regulates the layout and information distribution of web pages, improving the consistency of the layout within the interface and saving costs.
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+### Basic usage
+
+{{ base }}
+
+### Block spacing
+
+{{ gutter }}
+
+### Left and right offset
+
+{{ offset }}
+
+### Sorting
+
+{{ sort }}
+
+### Order
+
+{{ order }}
+
+### Layout
+
+{{ halign }}
+
+### Alignment
+
+{{ valign }}
+
+### Flex
+
+{{ flex }}
+
+### Responsive layout
+
+{{ responsive }}
diff --git a/docs/web/api/icon.en-US.md b/docs/web/api/icon.en-US.md
new file mode 100644
index 0000000000..d3213c2a1c
--- /dev/null
+++ b/docs/web/api/icon.en-US.md
@@ -0,0 +1,7 @@
+---
+title: Icon
+description: As an important element in the UI composition, the Icon affects the overall style of the UI interface to a certain extent.
+isComponent: true
+usage: { title: "", description: "" }
+spline: base
+---
diff --git a/docs/web/api/layout.en-US.md b/docs/web/api/layout.en-US.md
new file mode 100644
index 0000000000..e2c05bf9b7
--- /dev/null
+++ b/docs/web/api/layout.en-US.md
@@ -0,0 +1,34 @@
+---
+title: Layout 
+description: Used to organize the framework structure of web pages.
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+
+### Basic usage
+
+`<Layout>`: layout container, can wrap child components `<Header>`, `<Footer>`, `<Aside>`, `<Content>`.
+
+When the child elements contain `<Aside>`, all child elements will be arranged horizontally, otherwise they will be arranged vertically.
+
+{{ base }}
+
+### Side navigation layout
+
+Mainly includes side navigation and content area. Under this layout, the operation efficiency of page switching is high, but the horizontal space of the content area is compressed. Suitable for pages with deep navigation levels and high navigation efficiency requirements.
+
+{{ aside }}
+
+### Top navigation layout
+
+Mainly includes the top area and content area. Under this layout, the display efficiency of horizontal space is very high, but the navigation space is lost and the switching efficiency of page navigation is reduced. Suitable for pages where the main operation area is in the content area and the page stacking efficiency requirements are not high. For such pages, in order to ensure the stability of information layout, the width of the content area is often set to a fixed width.
+
+{{ top }}
+
+### Combined navigation layout
+
+Mainly includes top navigation, side navigation and content area. The combination of top navigation and side navigation improves navigation efficiency. It is mostly used in application-oriented websites with complex information architecture and certain requirements for navigation efficiency.
+
+{{ combine }}
diff --git a/docs/web/api/list.en-US.md b/docs/web/api/list.en-US.md
new file mode 100644
index 0000000000..95c45d837d
--- /dev/null
+++ b/docs/web/api/list.en-US.md
@@ -0,0 +1,37 @@
+---
+title: List
+description: The lists use a continuous column to display multiple rows of elements. They are commonly used to display batches of modules with the same composition and content. They can carry a variety of information content, from pure text to complex combinations of graphics and text.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic text list
+
+The list containing only simple text. Used when displaying relatively simple information.
+
+{{ base }}
+
+### Multi-line text list
+
+The list containing only main text and descriptive text. Used when displaying more complex information with multiple fields or content.
+
+{{ multiline }}
+
+### Basic image-text list
+
+The list containing simple graphics and text. Used when information needs to be displayed using a combination of images and text.
+
+{{ image-text }}
+
+### List with operations
+
+The list containing operations. Used when operations need to be performed on the column.
+
+{{ operation }}
+
+### Lists of different sizes
+
+Provides large, medium (default), and small sizes.
+
+{{ size }}
diff --git a/docs/web/api/progress.en-US.md b/docs/web/api/progress.en-US.md
new file mode 100644
index 0000000000..7cbad9ce2d
--- /dev/null
+++ b/docs/web/api/progress.en-US.md
@@ -0,0 +1,19 @@
+---
+title: Progress
+description: Displays the current progress of the operation.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### Linear progress bar
+
+A component that represents progress in a linear form. It can optionally be supplemented with text or icons to display progress and status. Often used in situations where the amount of information is relatively rich.
+
+{{ line }}
+
+### Circular progress bar
+
+A component that represents progress in a circular form. The circle can optionally be supplemented with text or icons to display progress and status. Often used in situations where the percentage of progress needs to be emphasized.
+
+{{ circle }}
diff --git a/docs/web/api/skeleton.en-US.md b/docs/web/api/skeleton.en-US.md
new file mode 100644
index 0000000000..4817423f0b
--- /dev/null
+++ b/docs/web/api/skeleton.en-US.md
@@ -0,0 +1,37 @@
+---
+title: Skeleton
+description: When the network is slow, show the user the general structure of the page before the real data on the page is loaded.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### Basic skeleton screen
+
+The simplest skeleton screen effect.
+
+{{ base }}
+
+### Skeleton screen with animation effect
+
+Provides two animation effects: gradient and flashing.
+
+{{ animation }}
+
+### Skeleton screen with delay effect
+
+Set the minimum delay response time. Operations below the response time do not display the loading status.
+
+{{ delay }}
+
+### Skeleton screen with different themes
+
+You can quickly define skeleton screens with different theme styles through the `theme` attribute.
+
+{{ theme }}
+
+### Combined usage
+
+Placeholder effects that combine multiple elements such as images, text, buttons, input boxes, avatars, and tags.
+
+{{ advance }}
\ No newline at end of file
diff --git a/docs/web/api/steps.en-US.md b/docs/web/api/steps.en-US.md
new file mode 100644
index 0000000000..efd12b346d
--- /dev/null
+++ b/docs/web/api/steps.en-US.md
@@ -0,0 +1,57 @@
+---
+title: Steps
+description: A navigation bar that prompts the user's progress and current steps to guide the user to complete tasks step by step.
+isComponent: true
+usage: { title: "", description: "" }
+spline: navigation
+---
+
+### Horizontal step bar
+
+A step bar that guides users to use in a horizontal direction.
+
+#### Horizontal step bar with sequence number
+
+Suitable for when there are many steps, so that users can more clearly understand the number of steps.
+
+{{ sequence }}
+
+#### Horizontal step bar without sequence
+
+Suitable for when there are fewer steps, mainly to guide users to complete operations step by step.
+
+{{ no-sequence }}
+
+### Vertical step bar
+
+A vertically arranged step bar, commonly used in vertical layouts or narrow screen scenarios.
+
+#### Vertical step bar without sequence number
+
+Suitable for situations where there are fewer vertical steps.
+
+{{ vertical-no-sequence }}
+
+#### Vertical step bar with sequence number
+
+Suitable for scenarios with more steps and longer step prompts.
+
+{{ vertical-sequence }}
+
+### Step bar with status
+
+A step bar that includes three states of "completed, in progress, and not completed" in the steps.
+
+{{ status }}
+
+### Step bar with icon
+
+Suitable for scenarios where custom icons are required.
+
+{{ icon }}
+
+### Step bar with extra content
+
+Suitable for scenarios where additional operations are required in the steps and waiting for the next operation.
+
+{{ extra }}
diff --git a/docs/web/api/swiper.en-US.md b/docs/web/api/swiper.en-US.md
new file mode 100644
index 0000000000..35a99454a9
--- /dev/null
+++ b/docs/web/api/swiper.en-US.md
@@ -0,0 +1,56 @@
+---
+title: Swiper
+description: A carousel view container.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+---
+
+
+### Basic Usage
+
+The most basic usage of the Swiper component
+
+{{ base }}
+
+### Vertical Layout
+
+Set `direction` to `vertical` to make the carousel scroll vertically. The default is `horizontal`.
+
+{{ vertical }}
+
+### Navigator Position
+
+Control the position of the navigator by setting the `placement` property value in `navigation`. It can be set to be inside or outside the main body.
+
+{{ placement }}
+
+### Fractional Navigator
+
+Control the navigator to display in a fractional style by setting the `type` property value in `navigation` to `fraction`. The default is `bars`.
+
+{{ fraction }}
+
+### Fade Mode
+
+Control the carousel to display in a fade style by setting the `animation` property value to `fade`. The default is `slide`.
+
+{{ fade }}
+
+### Card Mode
+
+Control the navigator to display in a card style by setting the `type` property value to `card`.
+
+{{ card }}
+
+### Manual Jump
+
+Control which item the carousel plays by setting the `current` property value. The starting value of `current` is `0`.
+
+{{ current }}
+
+### Size of Navigator
+
+Control the size of the carousel navigator by setting the `size` property value in `navigation`.
+
+{{ size }}
\ No newline at end of file
diff --git a/docs/web/api/table.en-US.md b/docs/web/api/table.en-US.md
new file mode 100644
index 0000000000..9322b84fbc
--- /dev/null
+++ b/docs/web/api/table.en-US.md
@@ -0,0 +1,394 @@
+---
+title: Table
+description: Tables are commonly used to display multiple data under the same structure, making it easy to organize, compare, and analyze. They can also be used to search, filter, and sort data. Generally includes three parts:header, data rows, and footer.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+
+### Table Classification
+
+As the functionality of tables increases, if all the functions are concentrated in one component, the code file will become more and more bloated. This is not conducive to maintenance or to the business of introducing necessary functions on demand.
+
+Therefore, there are three table components: `BaseTable` (basic table), `PrimaryTable` (main table), and `EnhancedTable` (enhanced table). All three types of tables will be exported. `PrimaryTable` is exported by default.
+
+- `BaseTable` (basic table) includes some basic functions: fixed header, fixed column, frozen row, loading state, pagination, multi-level header, merged cells, custom cells, custom header, custom footer, text ellipsis, alignment, table events, size, row class name, border, zebra stripe, hover state, empty data etc.
+- `PrimaryTable` or `Table` (main table) includes some more advanced functions: row selection, row expansion/collapse, filtering, sorting, asynchronous loading, drag-and-drop sorting etc. `PrimaryTable` and `Table` include all the functions of `BaseTable`. `Table` and `PrimaryTable` are completely equivalent.
+- `EnhancedTable` (enhanced table) includes some more complex functions: tree structure etc. `EnhancedTable` includes all the functions of `BaseTable` and `PrimaryTable`.
+
+In general, using `PrimaryTable`, which is the default exported table, can meet 90% of the requirements. When it comes to very complex requirements, use `EnhancedTable`.
+
+
+### Basic Table
+
+Simple table with data switched using pagination. Use border lines and zebra stripes to clearly present the boundaries of each data cell and assist in information segmentation.
+
+- There are two table width modes: `fixed` and `auto`, [detailed explanation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout), the component defaults to `fixed`.
+
+{{ base }}
+
+### Customizable Style Table
+
+- Use the table property `rowClassName` to set the row class name.
+- Use the column property `className` to set the column class name or the class name of a specific cell or cells.
+- Use the column property `attr: { style: {} }` to set the inline style of the column or a specific cell or cells.
+
+{{ style }}
+
+### Table with Ellipsis for Overflowing Cells
+
+Supports ellipsis for overflowing cell text, separate control of title ellipsis, separate control of ellipsis layer content and background color, etc. Generally used in scenarios where cell detail information needs to be displayed on hover.
+
+- Use `ellipsis` to set the ellipsis display for overflowing column text. By default, it will also control the ellipsis display for the header. As long as `ellipsis` is true, ellipsis will appear for any data type.
+- Use `ellipsisTitle` to separately set the ellipsis display for the header. It has a higher priority than `ellipsis`.
+
+{{ ellipsis }}
+
+### Table with Fixed Header/Fixed Rows
+
+When the table content height exceeds, the header will automatically be fixed when scrolling. The table height can be set using `height` or `maxHeight`, with units the same as CSS properties. It is recommended to use `maxHeight` for adaptive height.
+
+There are two table width modes: `fixed` and `auto`, [detailed explanation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout), the component defaults to `fixed`. If you want the table columns to be self-adaptive in width, set `table-layout: auto`.
+
+To refresh the table DOM element, use the component instance method `refreshTable`.
+
+{{ fixed-header }}
+
+
+### Table with Fixed Columns
+
+When there are too many columns, using fixed columns is convenient for presenting table data content. Supports fixed left columns and fixed right columns. The fixed column effect can be achieved by setting the column property to `fixed: 'left'` or `fixed: right`. The width of the fixed column line can be controlled by CSS.
+
+There are two table width modes: `fixed` and `auto`, [detailed explanation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout), the component defaults to `fixed`. If you want the table columns to be self-adaptive in width, set `table-layout: auto`. In this mode, the total width of the table content `tableContentWidth` must be specified for fixed columns. The value of `tableContentWidth` must be greater than the visible width of the table.
+
+In a multi-level header with fixed columns, the `colKey` and `fixed` properties must be specified for each fixed column.
+
+{{ fixed-column }}
+
+### Table with Fixed Header and Columns
+
+Supports both fixed header and fixed columns. `fixedRows` is used to set the number of frozen first and last rows. Example: `[2, 2]`.
+
+There are two table width modes: `fixed` and `auto`, [detailed explanation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout), the component defaults to `fixed`. If you want the table columns to be self-adaptive in width, set `table-layout: auto`. In this mode, the total width of the table content `tableContentWidth` must be specified for fixed columns. The value of `tableContentWidth` must be greater than the visible width of the table.
+
+In a multi-level header with fixed columns, the `colKey` and `fixed` properties must be specified for each fixed column.
+
+{{ fixed-header-col }}
+
+### Table with Custom Cells
+
+Cells are rendered using `row[colKey]` by default. There are 3 ways to customize cells:
+
+- Use `cell` as a render function with parameters: `{col, colIndex, row, rowIndex}`.
+
+- For frameworks with slot features, support slots using the value of `cell` as the slot name. If the value of `cell` is empty, the default is to take `colKey` as the slot name. Note that slot names should be kept in kebab-case or camelCase.
+
+- 【Not recommended】Use `render` as a render function with parameters: `{col, colIndex, row, rowIndex, type}`, where the value of `type` is `cell`.
+
+{{ custom-cell }}
+
+### Table with Custom Header
+
+The title is rendered using `title` by default. There are 3 ways to customize titles:
+
+- Use `title` as a render function with parameters: `title({ col, colIndex })`.
+
+- For frameworks with slot features, support slots using the value of `title` as the slot name. Note that slot names should be kept in kebab-case or camelCase.
+
+- 【Not recommended】Use `render` as a render function with parameters: `render({ col, colIndex, row, rowIndex, type })`, where the value of `type` is `title`. This method cannot be used when using sorting, filtering and other functions.
+
+{{ custom-header }}
+
+### Table with Custom Footer
+
+The table provides custom footer functionality that can be used for scenarios such as footer data statistics. Use `column.foot` to define footer content for each column.
+
+- By default outputs string from `column.foot`. If type of foot is a function then it will be used as a footer render function to customize footer content.
+- For frameworks with slot features support slots using value of foot as slot name. Note that slot names should be kept in kebab-case or camelCase.
+- To define full-width footer use 'footerSummary'.
+- To customize footer cell merge information use 'rowspanAndColspanInFooter', similar to table content cell merge method 'rowspanAndColspan'.
+
+{{ custom-footer }}
+
+### Table with Header/Footer Affixed
+
+- Header affixed to top. Set `headerAffixedTop=true`. To adjust the affixed position and more configurations, use `headerAffixedTop: { offsetTop: 80 }`.
+- Footer affixed to bottom. Set `footAffixedBottom=true`. To adjust the affixed position and more configurations, use `footAffixedBottom: { offsetBottom: 60 }`.
+- Scrollbar affixed to bottom. Set `horizontalScrollAffixedBottom=true`. To adjust the affixed position and more configurations, use `horizontalScrollAffixedBottom: { offsetBottom: 60 }`.
+- Paginator affixed to bottom. Set `paginationAffixedBottom=true`. To adjust the affixed position and more configurations, use `paginationAffixedBottom: { offsetBottom: 60 }`.
+
+{{ affix }}
+
+### Expandable and Collapsible Table
+
+The table provides a collapsible function. After expanding, you can further view detailed content.
+
+- `expandedRowKeys` is used to store the values of expanded rows and supports non-controlled attribute `defaultExpandedRowKeys`.
+- `expandedRow` is used to define the specific content displayed by the expanded row with parameters `{ row, rowIndex }`.
+- `expandIcon` is used to customize the expand icon. The value true displays the default icon, the value false does not display an icon, and a function value means completely customizing the icon.
+- `expandOnRowClick` indicates whether to allow expansion when clicking on a table row.
+- The expand row change event will be triggered when the expand row changes.
+
+{{ expandable }}
+
+### Column Configurable Table
+
+Customize the columns that need to be displayed. This can be set through the `columnController` field. For more details, see the description of `TableColumnController` in the API documentation.
+
+- `displayColumns` represents the currently displayed columns and supports non-controlled attribute `defaultDisplayColumns`.
+- `onDisplayColumnsChange` will be triggered after column configuration confirmation.
+- `onColumnChange` will be triggered when column configuration is selected (before confirmation).
+- `columnController.placement` is used to adjust the placement of the column configuration button based on the table. There are 4 positions: top left, top right, bottom left, and bottom right.
+- `columnController.fields` is used to set which columns are allowed to control display or hide. If not passed, all columns can be controlled for display or hide.
+- `columnController.displayType` is used to set the arrangement of column fields in the column configuration pop-up window. Fixed width or automatic width. Optional values: `auto-width` and `fixed-width`.
+- Supports passing all properties of the CheckboxGroup component. `columnController.checkboxGroupProps` is used to control related functions of checkboxes in pop-up windows.
+- Supports passing all properties of Dialog component. `columnController.dialogProps` is used to adjust related functions of column configuration pop-up window such as preventing scroll penetration.
+- Supports passing all properties of Button component. `columnController.buttonProps` is used to control all features of column configuration button such as button color and text.
+- `columnControllerVisible` freely controls whether to display column configuration box generally used in scenarios where you want to completely customize column configuration button.
+- `onColumnControllerVisibleChange` triggered when column configuration box is shown or hidden.
+
+
+#### Example 1: Column configuration function example with configuration button
+
+{{ custom-col-button }}
+
+#### Example 2: Column configuration function example without configuration button
+
+Use `columnControllerVisible` to control whether the column configuration pop-up is displayed, and `onColumnControllerVisibleChange` to listen for related changes. Generally used in scenarios where you need to fully customize the content and position of the column configuration button.
+
+{{ custom-col }}
+
+### Sortable table
+
+For scenarios where the order is required (such as security policy scenarios), provide table sorting capabilities so that users can adjust their positions.
+
+#### Single field sorting
+
+- Set the `sorter` attribute of the column that needs to be sorted to `true`, for example: `{ colKey: 'date', title: 'Date', sorter: true }`.
+- Set the value of the table sort attribute `sort` to `{ sortBy: 'date', descending: true }`, where `descending` indicates whether it is sorted in descending order, with a value of `true` indicating descending order and a value of `false` indicating ascending order.
+- When sorting changes, listen for the `onSortChange` event and add business logic in the event handler.
+- Use `showSortColumnBgColor` to control whether to display the background color of the sorted column to remind users of the specific sorted column more prominently.
+
+Provide column attribute `sortType` for customizing supported sorting methods. Optional values are `desc`/`asc`/`all`, which respectively indicate that only descending order, only ascending order, and descending and ascending orders are supported.
+
+{{ single-sort }}
+
+#### Multi-field sorting
+
+- Set the table attribute `multipleSort` to true.
+- Set the `sorter` attribute of the column that needs to be sorted to true. Multiple columns can be set, for example: `[{ colKey: 'date', title: 'Date', sorter: true }, { colKey: 'cost', title: 'Cost', sorter: true }]`.
+- Set the value of the table sort attribute `sort` to `[{ sortBy: 'date', descending: true }, { sortBy: 'cost', descending: false }]`
+
+{{ multiple-sort }}
+
+#### Local data sorting
+
+Local data sorting means that the component will sort the data parameter internally. If there are 10 data in data, only these 10 data will be sorted.
+
+- Set the `sorter` attribute of the column that needs to be sorted to a sort function, for example: `{ colKey: 'date', title: 'Date', sorter: (a, b) => a.status - b.status }`.
+- Set the value of the table sort attribute `sort` to `{ sortBy: 'date', descending: true }`.
+- When sorting changes, listen for the `onSortChange` event and add business logic in the event handler.
+- When sorting changes, because it is local data sorting, the data will also change. You need to listen for `onDatachange`, and event handling is controlled by data.
+
+{{ data-sort }}
+
+### Table with selectable rows
+
+In scenarios involving form selection or batch operations, you can directly select or deselect operation objects in front of data rows.
+
+### Table with selectable rows
+
+In scenarios involving form selection or batch operations, you can directly select or deselect operation objects in front of data rows.
+
+#### Single selection
+
+- `selectedRowKeys` represents an array of unique identifiers for the currently selected rows and supports the non-controlled attribute `defaultSelectedRowKeys`.
+- `onSelectChange` is triggered when the selected row changes.
+- Setting `columns: [{ colKey: 'row-select', type: 'single' }]` can define any column as a row selection operation column.
+
+{{ select-single }}
+
+#### Multiple selection
+
+- `selectedRowKeys` represents an array of unique identifiers for the currently selected rows and supports the non-controlled attribute `defaultSelectedRowKeys`.
+- `onSelectChange` is triggered when the selected row changes.
+- Setting `columns: [{ colKey: 'row-select', type: 'multiple' }]` can define any column as a row selection operation column.
+- In the case of pagination, row selection by default allows cross-page selection, that is, when turning pages, the previous page's selection results are still saved. If you want each page to control the selection separately and not affect each other, you can set `reserveSelectedRowOnPaginate=false`.
+- Note: If you find that clicking on a row selects all of them, it means that the `rowKey` setting is incorrect or not set. Please make sure that the value of `rowKey` is a field in `data`.
+
+{{ select-multiple }}
+
+### Paginated table
+
+#### Remote data pagination
+
+Remote data pagination means that the component will not paginate the `data` parameter internally. Only output pagination information for remote requests to paginate.
+
+{{ pagination-ajax }}
+
+#### Local data pagination
+
+When `data.length` exceeds `pageSize`, a single page can no longer display data completely. At this time, local data pagination will be automatically enabled and the component will paginate `data` internally.
+If you want to disable internal pagination of the component, you can set `disableDataPage=true`.
+
+{{ pagination }}
+
+### Filterable table
+
+The component comes with built-in filters such as checkboxes, radio buttons, input boxes, etc. At the same time, you can also customize any filter, such as the date picker in the example.
+
+- The table attribute `filterValue` is used to set the default value for filtering functions. For example: `{ firstName: '' }`.
+- The table attribute `filterIcon` is used to set custom filter icons.
+- When the filter value changes, it will trigger the `filterChange` event.
+- Column configuration `filter.type` determines which filter to use. Optional values are: `single/multiple/input`, which respectively represent: radio button filter, checkbox filter, input box filter. You can also use `filter.component` to customize the filter component.
+- Column configuration `filter.list` is used to configure what are the optional values for the current filter. It is only valid when `filter.type` equals single or multiple.
+- Column configuration `filter.props` is used to pass through filter attributes and can be configured with any attributes supported by the original component.
+- Column configuration `filter.component` is used to customize filters. As long as custom filters contain a `value` attribute and a `change` event, they can be used normally like built-in filters.
+- Column configuration `filter.showConfirmAndReset` is used to control whether to display "Confirm" and "Reset" buttons.
+- Column configuration `filter.resetValue` is used to set the reset value when clicking on "Reset" button. Not every scenario will reset to '' or [] null. The default reset value is ''.
+- The table attribute `filterRow` can completely customize the display content of the filtered result row. Set `filterRow=null` to hide the filter row.
+- For more functional attributes, please refer to TableColumnFilter in API documentation.
+
+{{ filter-controlled }}
+
+### Table with merged cells
+
+According to data structure, rows and columns in table can be merged.
+
+- Use table attribute `rowspanAndColspan` to set table content merge cells.
+- Use table attribute `rowspanAndColspanInFooter` to set footer merge cells.
+- Use column attribute `colspan` to set header merge. If it is a multi-row header, please refer to "Multi-level header" example below.
+
+{{ merge-cells }}
+
+### Multi-level Table Headers
+
+Table header data labels can be presented in multiple levels to express the hierarchical relationship of information.
+
+- To configure multi-level headers, simply add `children` sub-column configurations to the column configuration.
+- For fixed columns in multi-level headers, the `colKey` and `fixed` attributes must be specified for each fixed column.
+- For column width settings in multi-level table headers, only the width of the last level of headers needs to be specified.
+
+{{ multi-header }}
+
+### Loading State Tables
+
+#### Normal Loading
+
+Normal loading will display a translucent loading layer on top of the table, and the table content will not be hidden.
+
+- `loading=true` displays the default loading state; `loading=false` does not display the loading state; if the value of `loading` is a function, it represents custom loading state text content. For frameworks that support slots, it also supports slots with the same name (excluding loading icons).
+- `loadingProps` is used to pass all properties of the loading component and can be used to customize more personalized loading states.
+
+{{ loading }}
+
+#### Asynchronous Loading
+
+Use `asyncLoading` to define asynchronous loading states.
+
+- `asyncLoading=''` indicates a non-loading or completed loading state;
+- `asyncLoading='load-more'` displays "Load More" at the bottom of the table;
+- `asyncLoading='loading'` displays "Loading, please wait" at the bottom of the table;
+- If the value of `asyncLoading` is a function, it represents completely custom bottom asynchronous loading content.
+
+{{ async-loading }}
+
+### Empty Table
+
+Use the default empty table style.
+
+{{ empty }}
+
+### Draggable Sorting Table
+
+Adjust the order by dragging table rows and adjust column order by dragging table headers.
+
+- `dragSort='row'` is used to set the table for row drag sorting.
+- `dragSort='row-handler'` is used to set the table for row drag sorting, that is, to control drag sorting by dragging the handle. In this mode, you also need to set the handle column synchronously, `{ colKey: 'sort', cell: () => <MoveIcon /> }`.
+- `dragSort='col'` is used to set the table for column drag sorting.
+- `sortOnRowDraggable` is used for row drag sorting. It has been deprecated. Please use `dragSort='row'` instead. Compatible support.
+
+#### Example 1: Row drag sorting without handle column
+
+Set the parameter `dragSort='row'`.
+
+{{ drag-sort }}
+
+#### Example 2: Row drag sorting with handle column
+
+When setting the parameter `dragSort='row-handler'`, you also need to add a handle column: `{ colKey: 'sort', cell: () => <MoveIcon /> }`.
+
+{{ drag-sort-handler }}
+
+#### Column drag sorting
+
+【Continuous improvement】Adjust column order. Set the parameter `dragSort='col'`. In the column drag sorting scenario, you must specify a unique identifier for the column `colKey`.
+
+{{ drag-col-sort }}
+
+### Lazy loading table
+
+Lazy loading is generally used in scenarios with large amounts of data. Set `scroll={ type: 'lazy' }` to enable lazy loading mode and pre-load data in advance through `scroll.bufferSize`.
+
+{{ lazy }}
+
+### Virtual scrolling table
+
+In virtual scrolling scenarios, almost all table functions are supported, such as fixed columns, fixed headers, fixed footers, header suction top, footer suction bottom, etc. Please refer to the "Multi-level header table" example for experimental sites.
+
+- Virtual scrolling is generally used in scenarios where super-large data is rendered to provide better front-end performance. Set `scroll={ type: 'virtual' }` to enable virtual scrolling mode.
+- To ensure maximum component benefits, when the amount of data is less than `threshold`, regardless of whether virtual scrolling configuration exists or not, virtual scrolling will not be turned on internally by the component. The default value of `threshold` is `100`.
+
+{{ virtual-scroll }}
+
+### Editable table
+
+Editable tables are divided into two types: cell editing tables and row editing tables. For detailed and complete interfaces, please refer to `TableEditableCellConfig` in the API documentation.
+
+#### Editable cell table
+
+- `column.edit.component` represents the component for editing, such as Input, Select, DatePicker. It is necessary to ensure that the component contains two properties: `value` and `onChange`. If you also need to support validation rules, the component also needs to implement two APIs: `tips` and `status`. The implementation rules can refer to the `Input` component.
+- `column.edit.props` represents the parameters passed to the editing component `column.edit.component`.
+- `column.edit.onEdited` is triggered when editing is completed and exiting edit mode.
+- `column.edit.rules` refers to validation rules, which are the same as the validation rule configuration of the form `FormRule`.
+- `column.edit.abortEditOnEvent` indicates which events exit edit mode in addition to clicking on non-self elements. For example: radio box value change event `onChange`, generally no need to configure.
+- `column.edit.defaultEditable` whether the default state is editable.
+- `editableCellState` is a global attribute of the table used to control whether cells are allowed to be edited. If the return value is `true`, it means editable; if the return value is `false`, it means not editable and read-only.
+
+{{ editable-cell }}
+
+#### Editable row table
+
+You can perform operations such as editing and saving entire rows of tables.
+
+- `editableRowKeys` is used to control rows in edit mode.
+- `onRowEdit` will be triggered during row editing.
+- The instance method `validateRowData` is used for table row data validation, and `onRowValidate` is triggered when row editing validation is completed.
+- The instance method `validateTableData` is used for table-wide data validation, and `onValidate` is triggered when all data validation is completed.
+
+{{ editable-row }}
+
+
+### Tree structure table
+
+Please use `EnhancedTable`. `Table/PrimaryTable/BaseTable` does not support tree structure.
+
+⚠️ The tree structure table supports rich features such as adding nodes, deleting nodes, swapping sibling nodes, querying nodes, expanding/collapsing nodes, etc. In order to reduce the recursive query for each calculation and prepare for the virtual table in the future, the internal data is tiled. All data changes are controlled by component instance methods. For specific instance methods, please refer to the API documentation `EnhancedTableInstanceFunctions`. For details of tree structure configuration, please refer to `tree: TableTreeConfig`.
+
+- `treeExpandAndFoldIcon` is used to set the tree structure fold/expand icon and supports global configuration.
+- The child node field defaults to `children`, and you can use `tree.childrenKey` to define field aliases. Example: `tree={ childrenKey: 'list' }`.
+- `tree.indent` is used to set the tree node indentation distance. The distance of leaf nodes can be set separately by class name `t-table__tree-leaf-node`.
+- `tree.treeNodeColumnIndex` is used to set which column is used as the tree structure operation column.
+- `tree.checkStrictly` indicates that the row selection (multiple selection) of the tree structure is independent of the parent-child row selection by default and the value is true.
+- `tree.defaultExpandAll=true` indicates that all nodes are expanded by default and can be controlled by `expandAll` and `foldAll` later to expand or collapse all. Use `toggleExpandData` to control the expansion and collapse of individual nodes.
+- To refresh table data, please use the component instance method `resetData`.
+- To obtain tree structure data, you can use the component instance method `getTreeNode`.
+
+#### Tree structure display
+
+{{ tree }}
+
+#### Tree structure row selection
+
+{{ tree-select }}
diff --git a/docs/web/api/tag.en-US.md b/docs/web/api/tag.en-US.md
new file mode 100644
index 0000000000..3a0919a8c9
--- /dev/null
+++ b/docs/web/api/tag.en-US.md
@@ -0,0 +1,31 @@
+---
+title: Tag 
+description: Definition: Tags are commonly used for marking, categorizing and selecting.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### Basic Tag
+
+The basic tag is the default tag style. Suitable for general forms.
+
+{{ base }}
+
+### Tag with Icon
+
+Embed an icon in the tag. Suitable for using icons to assist in tag classification or expressing the attributes of the tag.
+
+{{ icon }}
+
+### Deletable and Addable Tags
+
+Deletable or addable tags. Adding tags can be combined with input box components.
+
+{{ delete }}
+
+### Selectable Tags
+
+Tags have two states: selected and unselected. You can switch by clicking on the tag. Similar to the effect of a checkbox.
+
+{{ selectable }}
diff --git a/docs/web/api/tooltip.en-US.md b/docs/web/api/tooltip.en-US.md
new file mode 100644
index 0000000000..d439ab385b
--- /dev/null
+++ b/docs/web/api/tooltip.en-US.md
@@ -0,0 +1,41 @@
+---
+title: Tooltip
+description: A bubble box for text prompts.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic Usage
+
+{{ base }}
+
+### Text Prompt with Arrow
+
+Text prompts with arrows have a clear direction. Commonly used when multiple pieces of information that need to be prompted are placed side by side to prompt a specific piece of information.
+
+{{ arrow }}
+
+### Text Prompt without Arrow
+
+Text prompts without arrows have no clear direction. Commonly used in scenarios where targeted prompts are not required.
+
+{{ no-arrow }}
+
+### Text Prompt with Theme Color
+
+Provides text prompts in light gray, blue, green, red, and yellow themes.
+
+{{ theme }}
+
+### Text Prompt with Different Trigger Methods
+
+Supports triggering text prompts with common element events.
+
+{{ trigger }}
+
+### Lightweight Text Prompt
+
+Hovering over an element displays a text prompt that does not rely on Popup. For specific API, please refer to `TooltipLite Props`.
+
+{{ lite }}
diff --git a/docs/web/api/tree.en-US.md b/docs/web/api/tree.en-US.md
new file mode 100644
index 0000000000..3e2855a8c2
--- /dev/null
+++ b/docs/web/api/tree.en-US.md
@@ -0,0 +1,107 @@
+---
+title: Tree
+description: Used to carry structured content with parent-child relationships and provide a hierarchical display of content.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic Tree
+
+Can carry content with parent-child relationships for display. The parent node has expand/collapse operations and provides a selection mark for a single node. Commonly used for displaying system directory structures and organizational structures.
+
+{{ base }}
+
+### Selectable Tree
+
+#### Tree with Checkboxes
+
+Provides checkbox controls on top of the basic tree structure. Used when multiple nodes need to be selected, such as selecting multiple personnel in an organizational structure.
+
+{{ checkable }}
+
+#### Highlightable
+
+{{ activable }}
+
+### Draggable Tree
+
+Nodes in the tree can be freely dragged
+
+{{ draggable }}
+
+### Filterable Tree
+
+{{ filter }}
+
+### Customizable
+
+#### Tree with Operational Functions
+
+Provides operational buttons for nodes on top of the basic tree structure. Used when a series of operations need to be performed on nodes, such as adding, deleting, and modifying.
+
+{{ operations }}
+
+#### Tree with Custom Icons
+
+Allows for custom design of the expand/collapse icons on parent nodes. Used when the icon needs to match the meaning of the information name, such as the concept of a folder.
+
+{{ icon }}
+
+#### Empty Data
+
+{{ empty }}
+
+#### Custom Labels
+
+{{ label }}
+
+### Tree with Connecting Lines
+
+Connects parent nodes in the tree with their child nodes at the same level. This usage is for situations where there are many sub-items at deep levels and a clearer representation of the subordinate relationship is needed.
+
+{{ line }}
+
+### Expand Operations
+
+#### Expand All on Initialization
+
+{{ expand-all }}
+
+#### Expand First Level on Initialization
+
+{{ expand-level }}
+
+#### Mutually Exclusive Expansion
+
+{{ expand-mutex }}
+
+<!-- ### Disabled State
+
+{{ disabled }} -->
+
+### Data Loading
+
+#### Asynchronously Load Nodes
+
+{{ load }}
+
+#### Load Nodes on Expansion
+
+{{ lazy }}
+
+<!-- ### Controlled Operations
+
+{{ controlled }} -->
+
+### Controlled Usage
+
+{{ sync }}
+
+<!-- ### Update Nodes
+
+{{ state }} -->
+
+### Virtual Scrolling
+
+{{ vscroll }}