Tencent · xiaosansiji · Apr 21, 2023 · Apr 20, 2023
diff --git a/docs/web/api/badge.en-US.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }}