From f44d396f17861f53889aee2a1ba383d32dd7f16c Mon Sep 17 00:00:00 2001 From: vapour Date: Thu, 20 Apr 2023 22:19:57 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E8=AF=91issue?= 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 container, can wrap child components `
`, `