-
- {props.cascaderlis.map((item, index) => {
- return
+
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index 88e98169..cb35e239 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -7,6 +7,7 @@
```vue
Primary
+Disabled
+
+```html
+Primary
+Disabled
+```
+
+### Secondary button
+
+Common
+Disabled
+
+```html
+Common
+Disabled
+```
\ No newline at end of file
diff --git a/docs/en-US/components/card/index.md b/docs/en-US/components/card/index.md
new file mode 100644
index 00000000..d81ada82
--- /dev/null
+++ b/docs/en-US/components/card/index.md
@@ -0,0 +1,220 @@
+# Card
+
+Universal card container。
+
+### When to use
+
+Basic card container, which can contain text, lists, pictures, paragraphs, used for overview display。
+
+
+### Basic usage
+
+
+
+
+
+```html
+
+
+
+```
+
+### Use image
+
+The alignment of the d-card-actions operation area can be set through align: initial alignment, tail alignment, stretch alignment。
+
+
+
+
+
+```html
+
+
+
+```
+
+### Custom Area
+
+
+
+
+```html
+
+
+```
+
\ No newline at end of file
diff --git a/docs/en-US/components/carousel/index.md b/docs/en-US/components/carousel/index.md
new file mode 100644
index 00000000..4fad5733
--- /dev/null
+++ b/docs/en-US/components/carousel/index.md
@@ -0,0 +1,162 @@
+# Carousel
+
+A set of carousel areas。
+
+### When to use
+
+1. Used to display pictures or cards。
+
+### Basic usage
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+```css
+.d-carousel-item {
+ text-align: center;
+ line-height: 200px;
+ background: var(--devui-global-bg, #f3f6f8);
+}
+```
+### 指示器&切换箭头
+arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。
+
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+### Automatic carousel
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+### Custom action
+
+ {{ item }}
+
+
+ {{ item }}
+
+` | When the card is switched, return to the index of the current card, starting from 0 | [Basic-usage](#Basic-usage) |
+
+#### methods
+
+| methods | description | jump Demo |
+| :---------: | :---------------------------------- | :----------------------------- |
+| prev() | Switch to the previous card | [Custom-action](#Custom-action) |
+| next() | Switch to the next card | [Custom-action](#Custom-action) |
+| goTo(index) | Switch to the card with the specified index, the index starts from 0 | [Custom-action](#Custom-action) |
+
+
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/checkbox/index.md b/docs/en-US/components/checkbox/index.md
new file mode 100644
index 00000000..1cd4822d
--- /dev/null
+++ b/docs/en-US/components/checkbox/index.md
@@ -0,0 +1,42 @@
+# CheckBox
+
+CheckBox。
+
+### When to use
+
+1. Make multiple choices in a set of options；
+2. Used alone can indicate switching between the two states, and can be combined with the submit operation。
+
+### Basic usage
+
+
+
+自定义
+
+```html
+自定义
+
+
+```
+
+### Set zIndex
+
+Set zIndex to control the level of the pop-up effect, and set backDropZIndex to control the level of the background of the pop-up layer。
+You can see that when zIndex is set to be less than backDropZIndex, imagePreview will be displayed below the background。
+You can close imagePreview by Esc。
+
+```
+// 待嵌入 modal 组件即可
+```
+
+### API
+
+| parameter | type | default | description |
+| :------------: | :-------: | :---: | :------------------------------------------------------------ |
+| custom | `Object` | -- | Optional, the command will be automatically injected into the open method, and the preview window will be opened through custom.open |
+| disableDefault | `Boolean` | false | Optional, turn off the default click trigger image preview mode |
+| zIndex | `Number` | 1050 | Optional, optional, set the z-index value of the picture when previewing |
+| backDropZIndex | `Number` | 1040 | Optional, set the z-index value of the image background during preview |
+
+
+
+
diff --git a/docs/en-US/components/input/index.md b/docs/en-US/components/input/index.md
new file mode 100644
index 00000000..edc7f8fa
--- /dev/null
+++ b/docs/en-US/components/input/index.md
@@ -0,0 +1,96 @@
+# Input
+
+Text input。
+
+### When to use
+
+You need to manually enter text to use。
+
+### Basic usage
+
+:::demo
+
+```vue
+
+ click me!
+
+
+
+
+
+
+```
+:::
+
+
+### many promise
+support many promise。
+:::demo
+
+```vue
+
+ click me!
+
+ Loading Style 1
+
+ Loading Style 2
+
+ Loading Style 3
+
+ click me show full screen loading!
+
+ click me show loading in target!
+
+ click me close loading in target!
+
+ \| Array> \| Boolean \| undefined` | -- | Optional, command mode, control loading status | [Basic-usage](#Basic-usage) |
+| target | `element` | document.body | Optional, service mode, DOM nodes that need to be covered by Loading | [Service-method-call](#Service-method-call) |
+| message | `string` | -- | Optional, prompt message during loading | [many-promise](#many-promise) |
+| loadingTemplateRef | `VNode` | -- | Optional, custom loading template | [Custom-css-style](#Custom-css-style) |
+| backdrop | `boolean` | true | Optional, whether to show the mask during loading | [Basic-usage](#Basic-usage) |
+| positionType | `string` | relative | Optional, specify the positioning type of the `dLoading` host element, the value is consistent with the css position attribute。 | [Basic-usage](#Basic-usage) |
+| view | `{top?:string,left?:string} ` | {top: '50%', left: '50%'} | Optional, adjust the display position of loading, relative to the top and left distances of the host element | [Basic-usage](#Basic-usage) |
+| zIndex | `number` | -- | Optional, z-index value of loading prompt | [Basic-usage](#Basic-usage) |
+
diff --git a/docs/en-US/components/overlay/index.md b/docs/en-US/components/overlay/index.md
new file mode 100644
index 00000000..6a7399ba
--- /dev/null
+++ b/docs/en-US/components/overlay/index.md
@@ -0,0 +1,198 @@
+## overlay
+The mask layer is a basic component and is used to build components independent of the current page layout。
+### When to use
+You can use this component when you need a global pop-up window, or when you need an element-following function。
+### Fixed overlay
+
+:::demo Use `sm`, `''`, `lg` to define the basic type of `Search`
+
+```vue
+
+ {{title}}
+
+
+
+
+```
+:::
+
+
+### Elastic overlay
+
+:::demo
+```vue
+
+
+
+
+
+```
+
+:::
+
+
+
+
+### API
+The parameter of d-fixed-overlay
+
+| parameter | type | default | description |
+| :--------------: | :------------------------: | :---: | :-------------------------------------------------------------------- |
+| visible | `boolean` | false | Optional, whether the mask layer is visible |
+| onUpdate:visible | `(value: boolean) => void` | -- | Optional, the mask layer cancels the visible event |
+| backgroundBlock | `boolean` | false | Optional, if true, the background cannot be scrolled |
+| backgroundClass | `string` | -- | Optional, the style class of the background |
+| hasBackdrop | `boolean` | true | Optional, if false, the content behind the background will be triggered |
+| backdropClick | `() => void` | -- | Optional, click on the event triggered by the background |
+| backdropClose | `boolean` | false | Optional, if true, clicking on the background will trigger `onUpdate:visible`, the default parameter is false |
+| overlayStyle | `CSSProperties` | -- | Optional, the style of the mask layer |
+
+The parameter of d-flexible-overlay
+
+| 参数 | 类型 | 默认 | 说明 |
+| :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---: | :---------------------------------------------------------------- |
+| visible | `boolean` | false | 可选，遮罩层是否可见 |
+| onUpdate:visible | `(value: boolean) => void` | -- | 可选，遮罩层取消可见事件 |
+| backgroundBlock | `boolean` | false | 可选，如果为 true，背景不能滚动 |
+| backgroundClass | `string` | -- | 可选，背景的样式类 |
+| hasBackdrop | `boolean` | true | 可选，如果为false，背景后下的内容将可以触发 |
+| backdropClick | `() => void` | -- | 可选，点击背景触发的事件 |
+| backdropClose | `boolean` | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
+| origin | `Element \| ComponentPublicInstance \| { x: number, y: number, width?: number, height?: number }` | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起 |
+| position | `{originX: HorizontalPos, originY: VerticalPos, overlayX: HorizontalPos, overlayY: VerticalPos } (type HorizontalPos = 'left' \| 'center' \| 'right') ( type VerticalPos = 'top' \| 'center' \| 'bottom')` | false | 可选，指定遮罩层与原点的连接点 |
diff --git a/docs/en-US/components/pagination/index.md b/docs/en-US/components/pagination/index.md
new file mode 100644
index 00000000..6e85d151
--- /dev/null
+++ b/docs/en-US/components/pagination/index.md
@@ -0,0 +1,473 @@
+# Pagination
+
+Pagination。
+
+### When to use
+
+When loading/rendering all the data will take a lot of time, you can switch the page number to browse the data。
+
+
+### Basic usage
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+```
+:::
+
+### Multiple configurations
+Support setting input jump, display jump button; setting pageSize and other functions。
+:::demo
+
+```vue
+
+
+
+ When the value of
+
+ When the value of
+ ` | Optional, callback of page number change, return current page number value | [Multiple-configurations](#Multiple-configurations) |
+| pageSizeChange | `EventEmitter` | Optional, callback when the maximum number of items per page is changed, return the current number of items displayed on each page | [Multiple-configurations](#Multiple-configurations) |
+
+**Tnterface & TypeDefine**
+
+##### AppendToBodyDirection
+
+```ts
+export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
+```
+
+##### ConnectedPosition
+
+```ts
+export interface ConnectedPosition {
+ originX: 'start' | 'center' | 'end';
+ originY: 'top' | 'center' | 'bottom';
+
+ overlayX: 'start' | 'center' | 'end';
+ overlayY: 'top' | 'center' | 'bottom';
+
+ weight?: number;
+ offsetX?: number;
+ offsetY?: number;
+ panelClass?: string | string[];
+}
+```
+
diff --git a/docs/en-US/components/panel/index.md b/docs/en-US/components/panel/index.md
new file mode 100644
index 00000000..da8c4438
--- /dev/null
+++ b/docs/en-US/components/panel/index.md
@@ -0,0 +1,74 @@
+# Panel
+
+Content panel for content grouping。
+
+### When to use
+
+Used when the page content needs to be displayed in groups, generally including three parts: header, content area, and bottom。
+
+### Basic usage
+
+
+
+
+ Panel with foldable
+
+
+ This is body
+
+
+
+
+ Panel has no left padding
+
+
+ This is body
+
+
+
+ Panel with header and footer
+ This is body
+ This is footer
+
+
+
+
+```html
+
+
+
+ Panel with foldable
+
+
+ This is body
+
+
+
+
+ Panel has no left padding
+
+
+ This is body
+
+
+
+ Panel with header and footer
+ This is body
+ This is footer
+
+
+```
+
+
diff --git a/docs/en-US/components/popover/index.md b/docs/en-US/components/popover/index.md
new file mode 100644
index 00000000..522495c9
--- /dev/null
+++ b/docs/en-US/components/popover/index.md
@@ -0,0 +1,386 @@
+# Popover
+Simple text prompt bubble box。
+
+### When to use
+Used to notify users of non-critical issues or to prompt a control in a special situation。
+
+### Basic usage
+When Popover pops up, it will be positioned based on the content of the `reference` slot。
+
+
+
+ default
+
+
+
+
+
+ info
+
+
+
+
+
+ error
+
+
+
+
+
+ success
+
+
+
+
+
+ warning
+
+
+
+
+ no-animation
+
+
+```
+
+### Custom content
+Customize the content of the `reference` slot and the content of the pop-up prompt。
+
+
+
+ bottom-right
+
+
+
+
+ bottom-right
+
+
+```
+
+### dPopover parameter
+
+| parameter | type | default | description | jump Demo |
+| ---- | ---- | ---- | ---- | ---- |
+| content | `string` | defalut |Optional, the display content of the pop-up box | [Custom-content](#Custom-content) |
+| visible | `boolean` | false | Optional, the initial pop-up state of the bullet box | [Basic-usage](#Basic-usage) |
+| trigger | `string` | click | Optional, trigger mode of the bullet frame | [Basic-usage](#Basic-usage) |
+| popType | `string` | default | Optional, pop-up box type, different styles | [Basic-usage](#Basic-usage) |
+| zIndex | `number` | 1060 | Optional, z-index value is used to manually control the layer height | [Basic-usage](#Basic-usage) |
+| positionType | `string` | bottom | Optionally, control the direction in which the bullet frame appears | [Pop-up-position](#Pop-up-position) |
+| showAnimation | `boolean` | true | Optional, whether to show animation | [Basic-usage](#Basic-usage) |
+| mouseEnterDelay | `number` | 150 | Optional, only when the trigger is hover, set the delay after the mouse moves in to display Popover, the unit is `ms`| [Delay-trigger](#Delay-trigger) |
+| mouseLeaveDelay | `number` | 100 | Optional, only need to set the delay after the mouse is moved out to hide the popover only when the trigger is hover, the unit is `ms` | [Delay-trigger](#Delay-trigger) |
+
diff --git a/docs/en-US/components/progress/index.md b/docs/en-US/components/progress/index.md
new file mode 100644
index 00000000..402090d5
--- /dev/null
+++ b/docs/en-US/components/progress/index.md
@@ -0,0 +1,142 @@
+# Progress
+
+progress bar。
+
+### When to use
+1. When the operation takes a long time, show the user the progress of the operation。
+2. When the operation needs to interrupt the existing interface or background operation, it takes a long time。
+3. When it is necessary to display the percentage of an operation completed or the completed steps/total steps。
+
+### Basic usage
+Basic progress and text configuration。
+
+
+
+
+
+```html
+
+
+
+
+```html
+
+ The Radio value is: {{ item }}
+
+
+
+
+```
+
+:::
+
+### radio 根据条件终止切换操作
+
+:::demo 根据条件判断，第二项禁止跳转。
+
+```vue
+
+
+ The Radio value is: {{ item }}
+
+
+
+
+```
+
+:::
+
+### radio-group 根据条件终止切换操作
+
+:::demo
+
+```vue
+
+
+
+ {{ item }}
+
+
+
+
+ {{ item }}
+
+
+
+
+
+```
+
+:::
+
+### 禁用
+
+:::demo
+
+```vue
+
+
+ The Radio value is: {{ item }}
+
+
+
+
+```
+
+:::
+
+### 横向排列
+
+:::demo
+
+```vue
+
+
+
+ The Radio value is: {{ item }}
+
+
+
+
+
+```
+
+:::
+
+### 竖向排列
+
+:::demo
+
+```vue
+
+
+
+ The Radio value is: {{ item }}
+
+
+
+
+ The Radio value is: {{ item.name }}
+
+
+
+
+
+```
+
+:::
+
+### API
+
+d-radio 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :----------: | :------------------: | :---: | :------------------------------------------------------------------------------ | --------------------------------------- |
+| name | `string` | -- | 可选，单选项名称 | [互相独立的单选项](#相互独立的单选项) |
+| value | `string` | -- | 必选，单选项值 | [互相独立的单选项](#相互独立的单选项) |
+| disabled | `boolean` | false | 可选，是否禁用该单选项 | [禁用](#禁用) |
+| beforeChange | `Function / Promise` | -- | 可选，radio 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio 切换 | [回调切换](#radio-根据条件终止切换操作) |
+
+d-radio 事件
+
+| 参数 | 类型 | 说明 | 跳转 Demo |
+| :----: | :--------------------: | :------------------------------- | ------------------------------------- |
+| change | `EventEmitter` | 单选项值改变时触发，返回选中的值 | [互相独立的单选项](#相互独立的单选项) |
+
+d-radio-group 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :----------: | :------------------: | :------: | :-------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| name | `string` | -- | 可选，单选框的名称 | [竖向排列](#竖向排列) |
+| values | `array` | -- | 可选，单选数据组 | [竖向排列](#竖向排列) |
+| disabled | `boolean` | false | 可选，是否禁用该选项组 | [radio-group 根据条件终止切换操作](#radio-group-根据条件终止切换操作) |
+| cssStyle | `'row' / 'column'` | 'column' | 可选，设置横向或纵向排列 | [横向排列](#横向排列) |
+| beforeChange | `Function / Promise` | -- | 可选，radio-group 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio-group 的切换 | [回调切换](#radio-group-根据条件终止切换操作) |
+
+d-radio-group 事件
+
+| 参数 | 类型 | 说明 | 跳转 Demo |
+| :----: | :--------------------: | :------------------------------- | --------------------- |
+| change | `EventEmitter` | 单选项值改变时触发，返回选中的值 | [竖向排列](#竖向排列) |
diff --git a/docs/en-US/components/rate/index.md b/docs/en-US/components/rate/index.md
new file mode 100644
index 00000000..4ffde650
--- /dev/null
+++ b/docs/en-US/components/rate/index.md
@@ -0,0 +1,138 @@
+# Rate
+
+Grade evaluation。
+
+When to sue
+It can be used when users rate a product。
+
+### Demo
+
+### Read-only mode
+
+:::demo
+
+```vue
+
+
+
+
+
+
+ +### 带有输入框的滑动组件 + +
+
+ +### 可设置 Step 的滑动组件 +
+
+ +```html + + +
+
+ +```html + +Success
+Error
+Warning
+Initial
+Waiting
+Running
+Invalid
+
+```html
+Success
+Error
+Warning
+Initial
+Waiting
+Running
+Invalid
+```
\ No newline at end of file
diff --git a/docs/en-US/components/sticky/index.md b/docs/en-US/components/sticky/index.md
new file mode 100644
index 00000000..e3acf7c0
--- /dev/null
+++ b/docs/en-US/components/sticky/index.md
@@ -0,0 +1,139 @@
+# sticky 便贴
+
+### 何时使用
+当用户在滚动屏幕时，需要某个区域内容在段落或者浏览器可视区域可见时。
+
+### 基本用法
+
+:::demo 默认容器为父元素
+
+```vue
+
+
+ +#### Small + +
+ +
+
+ +#### Middle + +
+ +
+ +
+
+ +#### Large + +
+ +
+
+
+ Back to {{ msg.myInfo }} Home Page
+
+
+ Success
+ Warn
+ Error
+ Multiple
+ link
+ pure text
+ common
+ no title
+
+
+```html
+
+
+
+ Back to {{ msg.myInfo }} Home Page
+
+
+ Success
+ Warn
+ Error
+ Multiple
+ link
+ pure text
+ common
+ no title
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast(type: any) {
+ switch (type) {
+ case 'link':
+ msgs.value = [
+ { severity: 'info', summary: 'Relative', detail: `Back to Home Page` },
+ { severity: 'info', summary: 'Absolute', content: 'slot:customTemplate', myInfo: 'Devui' }
+ ]
+ break
+ case 'multiple':
+ msgs.value = [
+ {
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ {
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ break
+ case 'noTitle':
+ msgs.value = [{ severity: 'warn', content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ case 'plainText':
+ msgs.value = [{ severity: 'info', content: 'data：' }]
+ break
+ default:
+ msgs.value = [
+ {
+ severity: type,
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 超时时间
+
+当设置超时时间、没有标题时，则不展示标题和关闭按钮。
+
+
+ Success
+ Warn
+ Error
+ common
+
+
+```html
+
+ Success
+ Warn
+ Error
+ common
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast(type: any) {
+ switch (type) {
+ case 'error':
+ msgs.value = [{ severity: type, content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ case 'common':
+ msgs.value = [{ severity: type, content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ default:
+ msgs.value = [
+ {
+ severity: type,
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 自定义样式
+
+
+ +
+ Custom Style
+
+
+```html
+
+ Custom Style
+
+```
+
+```scss
+.custom-class {
+ .devui-toast-item-container {
+ color: #252b3a;
+ background-color: #ffffff;
+
+ .devui-toast-icon-close {
+ top: 10px;
+ right: 13px;
+
+ & i.icon {
+ color: #252b3a !important;
+ }
+ }
+
+ .devui-toast-image {
+ top: 15px;
+ }
+
+ .devui-toast-message {
+ line-height: 23px;
+
+ .devui-toast-title {
+ font-size: 16px;
+ }
+
+ p {
+ font-size: 14px;
+ }
+ }
+ }
+}
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast() {
+ msgs.value = [
+ {
+ severity: 'success',
+ summary: 'Success',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 每个消息使用单独的超时时间
+
+当设置超时时间模式为 single 时，每个消息使用自身的 life 作为超时时间，如果未设置则按 severity 判断，severity 也未设置时默认超时时间为 5000 毫秒。
+
+
+ Single
+
+
+```html
+
+ Single
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast() {
+ msgs.value = [
+ { life: 3000, summary: 'Summary', content: 'This is a test text. This is a test text. This is a test text.' },
+ {
+ life: 6000,
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ {
+ severity: 'success',
+ summary: 'Success',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ { severity: 'warn', summary: 'Warn', content: 'This is a test text. This is a test text. This is a test text.' }
+ ]
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 服务方式调用
+
+使用服务的方式创建 toast 全局通知。
+
+click me show simplest toast!
+click me show customer toast!
+click me close customer toast!
+only close first customer toast!
+
+```html
+click me show simplest toast!
+click me show customer toast!
+click me close customer toast!
+only close first customer toast!
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+import { ToastService } from 'devui/toast'
+
+export default defineComponent({
+ setup() {
+ const results = ref()
+
+ function openToast2() {
+ results.value = ToastService.open({
+ value: [
+ { severity: 'info', summary: 'summary', content: '1. I am content' },
+ { severity: 'error', summary: 'summary', content: '2. I am content' },
+ { severity: 'error', summary: 'summary', content: '3. I am content' }
+ ],
+ sticky: true,
+ style: { width: '600px', color: 'red' },
+ styleClass: 'myCustom-toast',
+ life: 5000,
+ lifeMode: 'global',
+ /*
+ 接收发射过来的数据
+ */
+ onCloseEvent(value: any) {
+ console.log('closeEvent', value)
+ },
+ onValueChange(value: any) {
+ console.log('valueChange', value)
+ }
+ })
+
+ console.log('results', results.value)
+
+ isShow.value = true
+ }
+
+ function closeToast2() {
+ results.value.toastInstance.close()
+ isShow.value = false
+ }
+
+ function closeToast3() {
+ /*
+ 1.可以根据指定下标关闭 results.value.toastInstance.close(0);
+ 2.可以根据value对象去关闭，作用跟1是等同的，如下所示：
+ */
+ results.value.toastInstance.close({ severity: 'info', summary: 'summary', content: '1. I am content' })
+ }
+
+ return {
+ isShow,
+ openToast,
+ openToast2,
+ closeToast2,
+ closeToast3
+ }
+ }
+})
+```
+
+### Toast Api
+
+ // 消息内容，支持纯文本和插槽，推荐使用
+ life?: number // 单个消息超时时间，需设置 lifeMode 为 single 。每个消息使用自己的超时时间，开启该模式却未设置时按 severity 判断超时时间
+ id?: any // 消息ID
+}
+```
+
+### Service 引入方式
+
+```ts
+import { ToastService } from 'devui'
+```
+
+### Service 使用
+
+```ts
+// 方式 1，局部引入 ToastService
+ToastService.open({ xxx })
+
+// 方式2，全局属性
+app.config.globalProperties.$toastService.open({ xxx })
+```
+
+### Service Api
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.example {
+ height: 50px;
+ width: 60px;
+ background: cornflowerblue;
+ margin-top: 30px;
+}
+```
+:::
+
+### Delay trigger
+
+The mouse will be triggered after moving in for more than [mouseEnterDelay] milliseconds to prevent flashing caused by the user accidentally swiping. The default value is 150 milliseconds; after the mouse is moved out, the toolTip component will be hidden after [mouseLeaveDelay] milliseconds. The default value Is 100 milliseconds。
+
+:::demo Use the `mouseEnterDelay` property to control the `delay display` of the tooltip prompt box (the default is 100ms), and the `mouseLeaveDelay` property to control the `delay disappearing` of the tooltip prompt box (the default is 150ms)
+
+
+
+
+
+
+```
+
+```css
+.customCss {
+ width: fit-content;
+ height: 30px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ background: cornflowerblue;
+}
+.customCss-leave {
+ width: fit-content;
+ height: 30px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #252b3a;
+ background: #fff;
+}
+```
+:::
+
+### Tooltip Api
+
+| parameter | type | default | description | jump Demo | Global configuration items |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- |
+| content | `string|DOMString` | -- | Required, tooltip displays content | [基本用法](#基本用法) ||
+| position | `PositionType | PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional, tooltip display position | [基本用法](#基本用法) ||
+| showAnimation | `boolean` | true | Optional, whether to show the wipe out animation | |✔|
+| mouseEnterDelay | `number` | 150 | Optional, how long is the delay before the Tooltip is displayed after the mouse moves in, the unit is ms | [基本用法](#延时触发) ||
+| mouseLeaveDelay | `number` | 100 | Optional, after the mouse is moved out, how long is the delay before the Tooltip is hidden, the unit is ms | [基本用法](#延时触发) ||
diff --git a/docs/en-US/components/transfer/index.md b/docs/en-US/components/transfer/index.md
new file mode 100644
index 00000000..988204fe
--- /dev/null
+++ b/docs/en-US/components/transfer/index.md
@@ -0,0 +1,224 @@
+# Transfer 穿梭框
+
+双栏穿梭选择框。
+
+### 何时使用
+
+需要在多个可选项中进行多选时。穿梭选择框可用只管的方式在两栏中移动数据，完成选择行为。其中左边一栏为source，右边一栏为target。最终返回两栏的数据，提供给开发者使用。
+
+### 基本用法
+
+穿梭框基本用法。
+
+
+
+
+
+
+
+
+```html
+
+
+```
+
+```ts
+import {defineComponent, reactive} from 'vue'
+ type TData = {
+ id: number
+ age: number
+ value: string
+ disabled?: boolean
+ }
+ export default defineComponent({
+ setup() {
+ const options = reactive({
+ titles: ['sourceHeader', 'targetHeader'],
+ source: [
+ {
+ key: '北京',
+ value: '北京',
+ disabled: false
+ },
+ {
+ key: '上海',
+ value: '上海',
+ disabled: true
+ },
+ {
+ key: '广州',
+ value: '广州',
+ disabled: false
+ },
+ {
+ key: '深圳',
+ value: '深圳',
+ disabled: false
+ },
+ {
+ key: '成都',
+ value: '成都',
+ disabled: false
+ },
+ {
+ key: '武汉',
+ value: '武汉',
+ disabled: false
+ },
+ {
+ key: '西安',
+ value: '西安',
+ disabled: false
+ },
+ {
+ key: '福建',
+ value: '福建',
+ disabled: false
+ },
+ {
+ key: '大连',
+ value: '大连',
+ disabled: false
+ },
+ {
+ key: '重庆',
+ value: '重庆',
+ disabled: false
+ }
+ ],
+ target: [
+ {
+ key: '南充',
+ value: '南充',
+ disabled: false
+ },
+ {
+ key: '广元',
+ value: '广元',
+ disabled: true
+ },
+ {
+ key: '绵阳',
+ value: '绵阳',
+ disabled: false
+ }
+ ],
+ isSearch: true,
+ modelValues: ['深圳', '成都', '绵阳']
+ })
+ return {
+ options
+ }
+ }
+ })
+```
+
+### 参数
+
+| **参数** | **类型** | **默认** | **说明** | **跳转 Demo** |
+| ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- |
+| sourceOption | Array | [] | 可选参数，穿梭框源数据 | [基本用法](#基本用法) |
+| targetOption | Array | [] | 可选参数，穿梭框目标数据 | [基本用法](#基本用法) |
+| titles | Array | [] | 可选参数，穿梭框标题 | [基本用法](#基本用法) |
+| height | string | 320px | 可选参数，穿梭框高度 | [基本用法](#基本用法) |
+| isSearch | boolean | true | 可选参数，是否可以搜索 | [基本用法](#基本用法) |
+| disabled | boolean | false | 可选参数 穿梭框禁止使用 | [基本用法](#基本用法) |
diff --git a/docs/en-US/components/upload/index.md b/docs/en-US/components/upload/index.md
new file mode 100644
index 00000000..b2f8d8c2
--- /dev/null
+++ b/docs/en-US/components/upload/index.md
@@ -0,0 +1,1297 @@
+# Upload
+
+File upload component。
+
+### When to use
+
+When you need to upload files to the back-end server。
+
+### Basic usage
+
+Single file upload, drag file upload, prohibit upload。
+
+
+ 选取文件
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+自定义默认 slot，初始显示已上传文件。
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+### API
+
+d-single-upload 参数
+
+| **参数** | **类型** | **默认** | 说明 | **跳转 Demo** |
+| ---------------------- | --------------------------------- | ---------- | ---------------------------------------------------------------------------------------- | --------------------- |
+| fileOptions | [IFileOptions](#ifileoptions) | -- | 必选，待上传文件配置 | [基本用法](#基本用法) |
+| filePath | `string` | -- | 文件路径 | [基本用法](#基本用法) |
+| uploadOptions | [IUploadOptions](#iuploadoptions) | \-- | 必选，上传配置 | [基本用法](#基本用法) |
+| autoUpload | `boolean` | false | 可选，是否自动上传 | [基本用法](#基本用法) |
+| placeholderText | `string` | '选择文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](#基本用法) |
+| uploadText | `string` | '上传' | 可选，上传按钮文字 | [基本用法](#基本用法) |
+| uploadedFiles | `Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ DEVUI Course
+
+
+ Updated at Dec 31 15:55
+
+
+
+
+
+
+ DEVUI Course
+
+
+ Updated at Dec 31 15:55
+
+
+
+
+ 上一张
+ 下一张
+ 第一张
+
+
+```html
+
+ 上一张
+ 下一张
+ 第一张
+
+```
+```css
+.carousel-demo-operate{
+ margin-top: 10px;
+
+ display: flex;
+ align-items: center;
+
+ > * {
+ margin-right: 20px;
+ }
+}
+```
+
+### API
+#### parameter
+
+| parameter | type | default | description | jump Demo |
+| :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ |
+| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover' | Optional, specify the switching arrow display mode | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| autoplay | `boolean` | false | Optional, whether to rotate automatically | [Automatic-carousel](#Automatic-carousel) |
+| autoplaySpeed | `number` | 3000 | Optional, used with `autoplay`, automatic rotation speed, unit: ms | [Automatic-carousel](#Automatic-carousel) |
+| height | `string` | '100%' | Optional, carousel container height | [Basic-usage](#Basic-usage) |
+| showDots | `boolean` | true | Optional, whether to display the panel indicator | [Automatic-carousel](#Automatic-carousel) |
+| dotPosition | `'top'\|'bottom'` | 'bottom' | Optional, panel indicator position | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| dotTrigger | `'click'\|'hover'` | 'click' | Optional, indicator triggers carousel mode | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| activeIndex | `number` | 0 | Optional, initialize the active card index, starting from 0, supporting `[(activeIndex)]` two-way binding | [Basic-usage](#Basic-usage) |
+
+#### Event
+
+| event | type | description | jump Demo |
+| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- |
+| activeIndexChange | `EventEmitter{{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/date-picker/index.md b/docs/en-US/components/date-picker/index.md
new file mode 100644
index 00000000..6ec80542
--- /dev/null
+++ b/docs/en-US/components/date-picker/index.md
@@ -0,0 +1,121 @@
+
+
+# DatePicker
+
+Date and time visual input。
+
+## Attributes auto-close
+
+|project|description|
+|----|----|
+|name|auto-close / autoClose|
+|type|boolean|
+|mustSelect|false|
+|default|false|
+|description|After selecting the date, whether to automatically close the date panel|
+
+```vue
+
+
+ ![]()
+
+
+```html
+
+ ![]()
+
+
+
+```
+
+### Custom open preview window
+
+Pass in the custom parameter, the command will be automatically injected into the open method, and the preview window will be opened through custom.open
+
+
+ ![]()
+
+
+ ![]()
+
+Default
+ +Disabled
+ +Error
+ +Small
+ +Middle
+ +Large
+ +| 序号 | 姓名 | 队伍 | 操作 | +
|---|---|---|---|
| {{index}} | 张家齐 | 跳水 | 跳水队 | +
loading will show here2
+
+
+
+```
+:::
+
+### Custom Css Style
+Customize loading style through templateRef。
+:::demo
+
+```vue
+
+ loading will show here1
+
+
+
+
+
+```
+:::
+
+### Service method call
+Use the service method to load the loading component in full screen or load the loading component on the specified host。
+:::demo
+
+```vue
+
+ loading will show here3
+
+
+
+```
+:::
+
+### parameter
+The parameter of dLoading
+
+| **parameter** | **type** | **default** | **description** | **jump Demo** |
+| ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- |
+| v-dLoading | `Promisehello world
+
+ {{title}}
+
+
+ orgin
+
+
+
+ 依赖元素的 X 轴：
+
+
+ 依赖元素的 Y 轴：
+
+
+ Overlay X 轴：
+
+
+ Overlay Y 轴：
+
+ hello world
+ size = 'sm'
+size = 'md'
+size = 'lg'
+Custom Style
+Simple Mode
+Super Simple Mode
+haveConfigMenu = "true"
+
+
+ show field
+ setting
+
+
+ display method
+
+
+
+
+
+ When the value of pageIndex exceeds the maximum page number, enable showTruePageIndex to display the value of pageIndex
+
+
+ When the value of pageIndex exceeds the maximum page number, the showTruePageIndex function is disabled and only the maximum page number is displayed.
+
+ Default Mode
+
+ total = 0
+ total = 5
+ total = 15
+
+
+ Simple Mode
+
+ total = 0
+ total = 20
+ total = 30000
+ total = 100000
+ index = 2
+ index = 3
+
+
+
+```
+:::
+
+### 参数
+
+d-pagination 参数
+
+| parameter | type | default | description | jump Demo |
+| ----------------- | ------------------------------------------------------------ | -------------------------- | ------------------------------------------------------------ | --------------------- |
+| pageSize | `number` | 10 | Optional, display the maximum number of entries per page | [Basic-usage](#Basic-usage) |
+| total | `number` | 0 | Optional, total number of entries displayed | [Basic-usage](#Basic-usage) |
+| pageSizeOptions | `number[] ` | 10 | Optional, the data source of the drop-down box for the maximum number of entries per page for pagination, there are four options by default 5, 10, 20, 50 | [Multiple-configurations](#Multiple-configurations) |
+| pageSizeDirection | `Array<`[`AppendToBodyDirection`](#appendtobodydirection) `\|` [`ConnectedPosition`](#connectedposition)`>` | ['centerDown', 'centerUp'] | Optional, set the display direction of the drop-down box of each page entry | [Multiple-configurations](#Multiple-configurations) |
+| pageIndex | `number` | 1 | Optional, initialize page number | [Basic-usage](#Basic-usage) |
+| maxItems | `number` | 10 | Optional, display a few buttons at most for pagination | [Basic-usage](#Basic-usage) |
+| preLink | `string` | -- | Optional, the previous page button displays the icon, the default setting is the left arrow icon | [Basic-usage](#Basic-usage) |
+| nextLink | `string` | -- | Optional, the next page button displays the icon, the default setting is the right arrow icon | [Basic-usage](#Basic-usage) |
+| size | `number` | '' | 可Selection, paging component size, there are three options lg,``,sm, respectively representing large, medium and small | [Basic-usage](#Basic-usage) |
+| canJumpPage | `boolean` | false | Optional, whether to display the page input jump | [Basic-usage](#Basic-usage) |
+| canChangePageSize | `boolean` | false |Optional, whether to display the drop-down box for selecting the maximum number of entries per page for changing the pagination | [Basic-usage](#Basic-usage) |
+| canViewTotal | `boolean` | false | Optional, whether to display total entries | [Basic-usage](#Basic-usage) |
+| totalItemText | `string` | 'All entries' | Optional, total entry text | [Minimalist-mode](#Minimalist-mode) |
+| goToText | `string` | 'jump to' | Optional, total entry text | [Basic-usage](#Basic-usage) |
+| showJumpButton | `boolean` | false | Optional, whether to show the jump button | [Multiple-configurations](#Multiple-configurations) |
+| showTruePageIndex | `boolean` | false | Optional, the switch to display the current page number when the page number exceeds the paging range | [Multiple-configurations](#Multiple-configurations) |
+| lite | `boolean` | false | Optional, whether to switch to Minimalist-mode | [Minimalist-mode](#Minimalist-mode) |
+| showPageSelector | `boolean` | true | Optional, whether to show page number drop-down under `Minimalist-mode` | [Minimalist-mode](#Minimalist-mode) |
+| haveConfigMenu | `boolean` | false | Optional, whether to display the configuration under `Minimalist-mode` | [Minimalist-mode](#Minimalist-mode) |
+| autoFixPageIndex | `boolean` | true | Optional, whether to automatically correct the page number when changing the pageSize. If the `pageIndex` is handled in the `pageSizeChange` event, it is recommended to set it to `false` | [Minimalist-mode](#Minimalist-mode) |
+| autoHide | `boolean` | false | Optional, whether to hide automatically, autoHide is true and the minimum value of pageSizeOptions> total does not show pagination | [Minimalist-mode](#Minimalist-mode) |
+
+d-pagination Event
+
+| parameter | type | default | jump Demo |
+| --------------- | -------------------- | ---------------------------------------------------------- | --------------------- |
+| pageIndexChange | `EventEmitter+
+
+
+
+
+
+ default
+
+
+
+
+ info
+
+
+
+
+ error
+
+
+
+
+ success
+
+
+
+
+ warning
+
+
+
+
+ no-animation
+
+
+
+
+
+```html
+
+
+
+ Custom-content
+
+
+
+
+```html
+
+
+
+ Custom-content
+
+
+
+```
+
+### Pop-up position
+A total of 12 pop-up positions are supported。
+
+
+
+
+ left
+
+
+
+
+ left-top
+
+
+
+
+ left-bottom
+
+
+
+
+left
+
+
+ left-top
+ left-top
+
+
+ left-bottom
+ left-bottom
+
+
+
+
+
+ top
+
+
+ top
+
+
+
+
+ top-left
+
+
+ top-left
+
+
+
+
+ top-right
+
+
+ top-right
+
+
+
+
+
+
+
+ right
+
+
+
+
+ right-top
+
+
+
+
+ right-bottom
+
+
+
+
+right
+
+
+ right-top
+ right-top
+
+
+ right-bottom
+ right-bottom
+
+
+
+
+
+ bottom
+
+
+
+
+ bottom-left
+
+
+
+
+ bottom-right
+
+
+
+
+```html
+bottom
+
+
+ bottom-left
+
+
+ bottom-right
+
+
+
+
+
+ left
+
+
+
+
+ left-top
+
+
+
+
+ left-bottom
+
+
+
+
+left
+
+
+ left-top
+ left-top
+
+
+ left-bottom
+ left-bottom
+
+
+
+
+
+ top
+
+
+ top
+
+
+
+
+ top-left
+
+
+ top-left
+
+
+
+
+ top-right
+
+
+ top-right
+
+
+
+
+
+
+
+ right
+
+
+
+
+ right-top
+
+
+
+
+ right-bottom
+
+
+
+
+right
+
+
+ right-top
+ right-top
+
+
+ right-bottom
+ right-bottom
+
+
+
+
+
+ bottom
+
+
+
+
+ bottom-left
+
+
+
+
+ bottom-right
+
+
+
+```
+
+### Delay trigger
+Only when the trigger is hover, the mouse moves in for more than [mouseEnterDelay] milliseconds to trigger to prevent flashing caused by the user inadvertently swiping. The default value is 150 milliseconds; after the mouse is moved out, it will be triggered after [mouseLeaveDelay] milliseconds. , The Popover component will be hidden, the default value is 100 milliseconds。
+
+bottom
+
+
+ bottom-left
+
+
+ bottom-right
+
+
+
+
+
+ MouseEnter delay 500ms
+
+
+
+
+ MouseLeave delay 2000ms
+
+
+
+
+```html
+ Mouse enter 500ms later.
+ show Me
+
+
+ Mouse leave 2000ms later.
+
+
+ bottom-right
+
+
+ bottom-right
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.progress-container {
+ margin-bottom: 20px;
+}
+```
+
+### Ring usage
+Basic progress and text configuration。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.progress-container-circle {
+ height: 130px;
+ width: 130px;
+ font-size: 20px;
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.icon-position {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ line-height: 1;
+ white-space: normal;
+ text-align: center;
+ transform: translate(-50%, -50%);
+ color: #50d4ab;
+ font-size: 24px;
+}
+```
+
+### API
+#### d-progress parameter
+| parameter | type | default | description | jump Demo |
+| :---: | :---: | :---: | :---: | :---: |
+| percentage | `number` | 0 | Optional, the maximum value of the progress bar is 100 | [基本用法](#基本用法) |
+| percentageText | `string` | -- | Optional, the text description of the current value of the progress bar, such as: '30%' \| '4/5' | [基本用法](#基本用法) |
+| barBgColor | `string` | #5170ff | Optional, the color of the progress bar is displayed, the default is sky blue | [基本用法](#基本用法) |
+| height | `string` | 20px | Optional, the height of the progress bar, the default value is 20px | [基本用法](#基本用法) |
+| isCircle | `boolean` | false | Optional, show whether the progress bar is a circle | [圆环用法](#圆环用法) |
+| strokeWidth | `number` | 6 | Optional, set the width of the circular progress bar, the unit is the percentage of the width of the progress bar and the canvas | [圆环用法](#圆环用法) |
+| showContent | `boolean` | true | Optional, set whether to display content in the circle-shaped progress bar | [圆环用法](#圆环用法) |
+
+
+
diff --git a/docs/en-US/components/quadrant-diagram/index.md b/docs/en-US/components/quadrant-diagram/index.md
new file mode 100644
index 00000000..e212464c
--- /dev/null
+++ b/docs/en-US/components/quadrant-diagram/index.md
@@ -0,0 +1,44 @@
+# ProQuadrantDiagramgress
+
+Quadrant diagram。
+
+### When to use
+
+Regional division and value sorting of affairs according to needs, which can be used to manage the priority of affairs。
+
+### Basic usage
+
+Basic Usage
+ +:::demo + +```vue + +
+
+
+
+
+
+
+
+```
+
+:::
+
+### API
+
+d-rate parameter
+
+| parameter | type | default | description | jump Demo |
+| :-------: | :-----------------------------: | :----: | :------------------------------------------------------- | ----------------------------------- |
+| read | `boolean` | false | Optional, set whether to read-only mode, read-only mode cannot be interactive | [只读模式](#只读模式) |
+| count | `number` | 5 | Optional, set the total number of levels | [只读模式](#只读模式) |
+| type | `'success'\|'warning'\|'error'` | -- | Optional, set the current rating type, different types correspond to different colors | [使用 type 参数](#使用-type-参数) |
+| color | `string` | -- | Optional, star color | [动态模式-自定义](#动态模式-自定义) |
+| icon | `string` | -- | Optional, the style of the rating icon, only supports all icons in the devUI icon library | [动态模式](#动态模式) |
+| character | `string` | -- | Optional, the style of the rating icon, only one of icon and character can be set | [动态模式-自定义](#动态模式-自定义) |
diff --git a/docs/en-US/components/search/index.md b/docs/en-US/components/search/index.md
new file mode 100644
index 00000000..a47a8355
--- /dev/null
+++ b/docs/en-US/components/search/index.md
@@ -0,0 +1,95 @@
+# Search 搜索框
+
+### 基本用法
+
+:::demo 使用`sm`，`''`，`lg`来定义`Search`基本类型
+
+```vue
+
+
+ Small
+
+
+```
+:::
+
+### 搜索图标左置
+
+:::demo 使用`left`，`right`来定义`Search`搜索图标位置， 默认`right`
+
+```vue
+
+
+
+
+```
+:::
+
+### 无边框
+
+:::demo 使用`noBorder`来定义`Search`无边框
+
+```vue
+
+
+
+
+```
+:::
+
+### 双向绑定
+
+:::demo 使用`v-model`双向绑定
+
+```vue
+
+
+
+ Small
+
+
+
+
+```
+:::
+
+#### 多选
+
+:::demo 通过`multiple`：`true`来开启多选
+
+```vue
+
+ +
+
+
+
+ +### 带有输入框的滑动组件 + +
+
+ +### 可设置 Step 的滑动组件 +
+
+ +```html + + +
+
+ +```html + +
+
+
+
+
+
+
+
+```
+:::
+
+### 指定容器
+
+:::demo
+
+```vue
+
+ 基本用法
+
+
+
+
+
+
+
+```
+:::
+
+
+### 指定滚动容器
+
+:::demo
+
+```vue
+
+ 指定容器
+
+
+
+
+
+
+```
+:::
+
+
+### API
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- |
+| zIndex | `number` | -- | 可选，指定包裹层的 z-index，用于浮动的时候控制 z 轴的叠放 | [基本用法](#基本用法) ||
+| container | `Element` | 父容器 | 可选，触发的容器，可不同于父容器 | [指定容器](#指定容器) ||
+| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](#基本用法) ||
+| scrollTarget | `Element` | document.documentElement | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [指定滚动容器](#指定滚动容器) ||
+
+
+### d-sticky 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| :---------: | :------: | :--------------------: | :---------: |
+| statusChange | `string` | 可选，状态变化的时候触发，值为变化后的状态值 | [基本用法](#基本用法) |
+
diff --git a/docs/en-US/components/switch/index.md b/docs/en-US/components/switch/index.md
new file mode 100644
index 00000000..5845385f
--- /dev/null
+++ b/docs/en-US/components/switch/index.md
@@ -0,0 +1,66 @@
+# Switch 开关
+
+开/关切换组件。
+
+### 何时使用
+
+当两种状态需要来回切换控制时，比如启用/禁用。
+
+### 基本用法
+
+
+
+
+
+ 指定滚动容器
++ +#### Small + +
+ +
+
+ +#### Middle + +
+ +
+ +
+
+ +#### Large + +
+ +
+ +
上面
+ 下面
+ 左面
+ 右面
+ MouseEnter delay 500ms
MouseLeave delay 1000ms
MouseEnter delay 500ms
+ +
MouseLeave delay 1000ms
+ Basic Usage
+ +:::demo + +```vue + +Dragdrop
+ +:::demo + +```vue + +
+ Upload
+
+
+
+```
+
+:::
+
+Disabled
+ +:::demo + +```vue + +Basic Usage
+ +:::demo + +```vue + +Upload Directory
+ +:::demo + +```vue + +Dragdrop
+ +:::demo + +```vue + +Disabled
+ +:::demo + +```vue + +
+
+
+
+
+```
+
+:::
+
+### Dynamic upload parameters
+
+Users can dynamically modify upload parameters through beforeUpload。
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | + {{ fileUploader.file.name }} + | + ++ preLoad + Uploading} + Uploaded + Upload Failed + | + +
+ |
+
| + {{ uploadedFile.name }} + | ++ Uploaded + | +
+ |
+
+ 自定义上传
+
+ | + {{ fileUploader.file.name }} + | + ++ preLoad + Uploading} + Uploaded + Upload Failed + | + +
+ |
+
| + {{ uploadedFile.name }} + | ++ Uploaded + | +
+ |
+
+
+
+
+
+
+ 将文件拖到此处，或
+ 点击上传
+
+ | + {{ fileUploader.file.name }} + | + ++ preLoad + Uploading + Uploaded + Upload Failed + | + +
+ |
+
| + {{ uploadedFile.name }} + | ++ Uploaded + | +
+ |
+