diff --git a/README-zh_CN.md b/README-zh_CN.md
index 08be080..2be3a72 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -21,8 +21,8 @@ vuesax-ts 是一个 vue 组件库,它基于 [vuesax-next](https://github.com/l
## 💪🏼 贡献
-我们目前正在努力重构和测试 vuesax-next 中的所有组件以及相关文档,我们希望您能加入我们!🌟无论您是经验丰富的开发人员还是有胸怀抱负的新人,我们都欢迎任何有兴趣为 vuesax-ts 做出贡献的人。
+我们目前正在努力重构和测试 vuesax-next 中的所有组件以及相关文档,我们希望你能加入我们!🌟无论你是经验丰富的开发人员还是有胸怀抱负的新人,我们都欢迎任何有兴趣为 vuesax-ts 做出贡献的人。
-那么,您该如何参与呢?🤔 直接访问我的 GitHub 主页联系我即可。🚀 如果您有任何宝贵的建议或意见,请随时在 GitHub issue 中提出!🙌🏼 我们非常欢迎反馈意见,并将积极处理。
+那么,你该如何参与呢?🤔 直接访问我的 GitHub 主页联系我即可。🚀 如果你有任何宝贵的建议或意见,请随时在 GitHub issue 中提出!🙌🏼 我们非常欢迎反馈意见,并将积极处理。
让我们共同努力,让 vuesax-ts 成为更好的组件库!
diff --git a/packages/docs/docs/.vitepress/docs/documentation/components/sidebar.md b/packages/docs/docs/.vitepress/docs/documentation/components/sidebar.md
index cd222e4..c4588b5 100644
--- a/packages/docs/docs/.vitepress/docs/documentation/components/sidebar.md
+++ b/packages/docs/docs/.vitepress/docs/documentation/components/sidebar.md
@@ -27,12 +27,12 @@ props :
- name: absolute
type: Boolean
values: true | false
- description: Determine if the component is of absolute position.
+ description: Determine if the sidebar is of absolute position.
default: "false"
- name: relative
type: Boolean
values: true | false
- description: Determine if the component is of relative position.
+ description: Determine if the sidebar is of relative position.
default: "false"
- name: shadow
type: Boolean
@@ -42,7 +42,7 @@ props :
- name: collapsed
type: Boolean
values: true | false
- description: Determines if the sidebar is collapsed at a width of 50px.
+ description: Determines whether the sidebar width is collapsed.
default: "false"
usageUrl: sidebar#collapse
- name: hoverExpand
@@ -68,7 +68,7 @@ props :
values: true | false
description: Determines if the component is positioned to the right.
default: "false"
- usageUrl: sidebar#no-line
+ usageUrl: sidebar#right
- name: SidebarItem:id
type: String
values: String
@@ -96,7 +96,7 @@ slots :
description: Add the elements below the logo and above the items.
- name: SidebarGroup#title
type: slot
- description: title element in sidebar group.
+ description: Title element in sidebar group.
usageUrl: sidebar#group
- name: SidebarItem#icon
type: slot
@@ -113,7 +113,7 @@ slots :
## Default
-Add a sidebar menu with the `VsSidebar` component, there are two subcomponents VsSidebar-item and `VsSidebarGroup`
+Add a sidebar menu with the `VsSidebar` component, there are two subcomponents `VsSidebarItem` and `VsSidebarGroup`
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/avatar.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/avatar.md
index cf3e984..43640f0 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/avatar.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/avatar.md
@@ -30,9 +30,9 @@
使用 `badge` 属性或插槽为组件添加徽章
-您还可以使用 `badge-color` 属性改变徽章的颜色,用`success`(成功)或`danger`(危险)等颜色来表示断开或连接的用户状态。
+你还可以使用 `badge-color` 属性改变徽章的颜色,用`success`(成功)或`danger`(危险)等颜色来表示断开或连接的用户状态。
-有时您需要在聊天环境中使用头像,为此您可以添加 `writing` 属性,该属性可添加书写动画
+有时你需要在聊天环境中使用头像,为此你可以添加 `writing` 属性,该属性可添加书写动画
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/button.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/button.md
index 922434a..1934d58 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/button.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/button.md
@@ -240,7 +240,7 @@ You can create an animation to the component by adding the ``#"animate" `and the
## Social
-在项目中使用社交工具的颜色非常常见,无论是登录按钮还是分享按钮,因此 Vuesax 可让您轻松搜索每种颜色,只需输入名称即可改变组件的整体风格。
+在项目中使用社交工具的颜色非常常见,无论是登录按钮还是分享按钮,因此 Vuesax 可让你轻松搜索每种颜色,只需输入名称即可改变组件的整体风格。
支持的颜色: (`facebook`, `twitter`, `youtube`, `pinterest`, `linkedin`, `snapchat`, `whatsapp`, `tumblr`, `reddit`, `spotify`, `amazon`, `medium`, `vimeo`, `skype`, `dribbble`, `slack`, `yahoo`, `twitch`, `discord`, `telegram`, `google-plus`, `messenger`)
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/checkbox.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/checkbox.md
index 15783d6..4837f42 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/checkbox.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/checkbox.md
@@ -62,7 +62,7 @@
## Indeterminate
-在某些情况下,如果你有多个复选框,而只需要一个复选框来管理所有其他复选框,这时您可以使用 `indeterminate` 属性,为复选框添加不同的样式。
+在某些情况下,如果你有多个复选框,而只需要一个复选框来管理所有其他复选框,这时你可以使用 `indeterminate` 属性,为复选框添加不同的样式。
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/loading.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/loading.md
index 3b0e541..b09f51f 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/loading.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/loading.md
@@ -92,7 +92,7 @@ props :
## Background
-您可以使用属性 `background` 更改加载背景颜色
+你可以使用属性 `background` 更改加载背景颜色
@@ -108,7 +108,7 @@ props :
## Percent
-您可以使用 `percent` 属性添加百分比字符串,如果需要更改该值,请使用加载实例中的 `changePercent` 函数。
+你可以使用 `percent` 属性添加百分比字符串,如果需要更改该值,请使用加载实例中的 `changePercent` 函数。
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/notification.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/notification.md
index 30869c9..014dfc9 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/notification.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/notification.md
@@ -123,7 +123,7 @@ Allowed values are:
## Sticky
-您可以使用 `sticky` 属性为粘贴组件的最近角添加样式,该属性是一个 `boolean` po,其值只能是 `true` 。
+你可以使用 `sticky` 属性为粘贴组件的最近角添加样式,该属性是一个 `boolean` po,其值只能是 `true` 。
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/pagination.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/pagination.md
index 93d27c5..e42c0e2 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/pagination.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/pagination.md
@@ -174,7 +174,7 @@ Change the style of the entire component by removing the margin between the butt
## Slot
-你可能需要自定义分页,为此您可以使用箭头之间的默认插槽,并替换页面上的项目
+你可能需要自定义分页,为此你可以使用箭头之间的默认插槽,并替换页面上的项目
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/sidebar.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/sidebar.md
new file mode 100644
index 0000000..7d2a41d
--- /dev/null
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/sidebar.md
@@ -0,0 +1,188 @@
+---
+prev: Sidebar
+next: Card
+props :
+ - name: color
+ type: String
+ values: Vuesax Colors | RGB | HEX
+ description: 修改侧边栏字体颜色
+ default: primary
+ usageUrl: sidebar#color
+ - name: activeColor
+ type: String
+ values: Vuesax Colors | RGB | HEX
+ description: 修改侧边栏激活项字体颜色
+ default: primary
+ usageUrl: sidebar#color
+ - name: background
+ type: String
+ values: Vuesax Colors | RGB | HEX
+ description: 修改侧边栏激活项背景颜色
+ default: white
+ usageUrl: sidebar#color
+ - name: v-model
+ type: String
+ values: String
+ description: 确定当前激活的项目
+ - name: absolute
+ type: Boolean
+ values: true | false
+ description: 确定侧边栏是否为绝对定位
+ default: "false"
+ - name: relative
+ type: Boolean
+ values: true | false
+ description: 确定侧边栏是否为相对定位
+ default: "false"
+ - name: shadow
+ type: Boolean
+ values: true | false
+ description: 为侧边栏添加阴影
+ default: "true"
+ - name: collapsed
+ type: Boolean
+ values: true | false
+ description: 确定边栏宽度是否折叠
+ default: "false"
+ usageUrl: sidebar#collapse
+ - name: hoverExpand
+ type: Boolean
+ values: true | false
+ description: 当鼠标悬停在侧边栏上时,展开菜单;当鼠标移出时,折叠菜单
+ default: "false"
+ usageUrl: sidebar#hover-expand
+ - name: square
+ type: Boolean
+ values: true | false
+ description: 将边框半径改为 0,将侧边栏设置为正方形
+ default: "false"
+ usageUrl: sidebar#square
+ - name: noLine
+ type: Boolean
+ values: true | false
+ description: Delete the active line in the sidebar.
+ default: "false"
+ usageUrl: sidebar#no-line
+ - name: right
+ type: Boolean
+ values: true | false
+ description: 删除侧边栏激活项的横线
+ default: "false"
+ usageUrl: sidebar#right
+ - name: SidebarItem:id
+ type: String
+ values: String
+ description: 该 id 用于更改父组件 v-model 的值,从而根据用户交互确定活动状态。
+ usageUrl: sidebar#default
+ - name: SidebarItem:href
+ type: String
+ values: url
+ description: 使用提供的网址生成一个新标签页
+ usageUrl: sidebar#default
+ - name: SidebarItem:target
+ type: String
+ values: _blank
+ description: 确定该标签页是新标签页还是替换当前标签页
+slots :
+ - name: logo
+ type: slot
+ description: 在侧边栏顶部添加元素
+ - name: footer
+ type: slot
+ description: 在侧边栏底部添加元素
+ usageUrl: sidebar#default
+ - name: header
+ type: slot
+ description: 在 logo 下方选项上方添加元素。
+ - name: SidebarGroup#title
+ type: slot
+ description: 侧边栏组中的标题元素
+ usageUrl: sidebar#group
+ - name: SidebarItem#icon
+ type: slot
+ description: 用于放置图标元素
+ usageUrl: sidebar#default
+ - name: SidebarItem#arrow
+ type: slot
+ description: 用于放置自定义箭头图标元素
+---
+
+# Sidebar 侧边栏
+
+
+
+## Default
+
+使用 `VsSidebar` 组件添加侧边栏菜单,其中有两个子组件 `VsSidebarItem` 和`VsSidebarGroup`
+
+
+
+
+
+## Group
+
+你可以使用 `VsSidebarGroup` 子组件对项目进行分组和隐藏。
+
+
+
+
+
+## Collapse
+
+你可以使用 `collapsed` 属性使边栏宽度为 `50px`,并只显示图标。
+
+
+
+
+
+## Hover Expand
+
+你可以使用属性 `hoverExpand` 添加用鼠标展开或折叠侧边栏的功能。
+
+
+
+
+
+## Color
+
+你可以使用 `color` 更改侧边栏的字体颜色,使用 `activeColor` 更改侧边栏中激活项的颜色,使用 `background` 更改侧边栏的背景。
+
+
+
+
+
+## Visible
+
+你可以使用 `visible` 属性定义侧边栏是可见还是隐藏,默认情况下该属性为 `true`
+
+
+
+
+
+## Position Right
+
+你可以使用 `right` 属性将侧边栏更改为右侧布局
+
+
+
+
+
+## Square
+
+你可以使用 `square` 属性,删除 `border-radius` 边框半径,使侧边栏变成正方形。
+
+
+
+
+
+## No Line
+
+你可以使用 `noLine` 属性移除侧边栏的激活效果线
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/table.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/table.md
index da9fb83..0355672 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/table.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/table.md
@@ -152,7 +152,7 @@ slots :
## Search and sort
-您可以使用 `#header` 插槽和 `sort` 属性来实现表格搜索和表格排序。
+你可以使用 `#header` 插槽和 `sort` 属性来实现表格搜索和表格排序。
diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/tooltip.md b/packages/docs/docs/.vitepress/docs/zh/documentation/components/tooltip.md
index ac928d6..f49ef0e 100644
--- a/packages/docs/docs/.vitepress/docs/zh/documentation/components/tooltip.md
+++ b/packages/docs/docs/.vitepress/docs/zh/documentation/components/tooltip.md
@@ -166,7 +166,7 @@ slots :
## No Arrow
-在某些情况下,您可能需要从文字提示中移除箭头,为此您可以使用 `not-arrow` 属性
+在某些情况下,你可能需要从文字提示中移除箭头,为此你可以使用 `not-arrow` 属性
@@ -182,7 +182,7 @@ slots :
## Content
-你创建文字提示组件的方式让您可以自由添加任何内容,并在其中添加各种组件。
+你创建文字提示组件的方式让你可以自由添加任何内容,并在其中添加各种组件。
diff --git a/packages/docs/docs/.vitepress/docs/zh/guide/introduction.md b/packages/docs/docs/.vitepress/docs/zh/guide/introduction.md
index 1f38dba..f3ee9e4 100644
--- a/packages/docs/docs/.vitepress/docs/zh/guide/introduction.md
+++ b/packages/docs/docs/.vitepress/docs/zh/guide/introduction.md
@@ -14,9 +14,9 @@ vuesax-ts 是一个组件库,用于更新和增强 [vuesax-next](https://githu
## 为什么需要 Vuesax?
-Vuesax是一个相对较新的框架,它拥有令人耳目一新的设计和最新的趋势,Vuesax基于vuejs,这意味着我们与世界上最流行的javascript框架之一携手合作,并拥有一个庞大的社区,您将获得所有的帮助和文档来创建和制作您的项目。
+Vuesax是一个相对较新的框架,它拥有令人耳目一新的设计和最新的趋势,Vuesax基于vuejs,这意味着我们与世界上最流行的javascript框架之一携手合作,并拥有一个庞大的社区,你将获得所有的帮助和文档来创建和制作你的项目。
-与许多框架不同,Vuesax 是从零开始设计的,我们不拘泥于任何设计路线,这一点非常重要,因为您的项目将是独一无二的,与其他项目截然不同。
+与许多框架不同,Vuesax 是从零开始设计的,我们不拘泥于任何设计路线,这一点非常重要,因为你的项目将是独一无二的,与其他项目截然不同。
我们专注于快速、轻松地创建项目,提供漂亮的视觉效果,但同时不忘开发人员的个性化和独立性。
@@ -34,16 +34,16 @@ Markdown 文件,提高可持续性。
## How It Works
-Vuesax 是一个用户界面组件框架,您可以在您的应用程序或项目中使用这些组件,从而节省大量时间和工作。
+Vuesax 是一个用户界面组件框架,你可以在你的应用程序或项目中使用这些组件,从而节省大量时间和工作。
## 特性
-模块化:您可以按需使用所有 vuesax 组件,也可以只使用其中一个,从而节省了不必要的代码,减轻了整个框架的重量。
+模块化:你可以按需使用所有 vuesax 组件,也可以只使用其中一个,从而节省了不必要的代码,减轻了整个框架的重量。
-快速创建:使用 vuesax 可以快速创建网络应用程序,因为所有困难的工作都已为您完成,只需添加一个组件,您的项目中就已经有了一个美观且功能强大的元素。
+快速创建:使用 vuesax 可以快速创建网络应用程序,因为所有困难的工作都已为你完成,只需添加一个组件,你的项目中就已经有了一个美观且功能强大的元素。
-轻松上手:您无需成为 vuejs 或 javascript 专家,即可在您的项目中实施 vuesax 或其组件
+轻松上手:你无需成为 vuejs 或 javascript 专家,即可在你的项目中实施 vuesax 或其组件
-独特的设计:您的项目是独一无二的吗?Vuesax知道它是独一无二的,因此它也是独一无二的,这样你就不会与其他项目一样,所有东西都是一样的。
+独特的设计:你的项目是独一无二的吗?Vuesax知道它是独一无二的,因此它也是独一无二的,这样你就不会与其他项目一样,所有东西都是一样的。
独特的组件:vuesax 中的一些组件在其他框架中是找不到的,因为我们拥有独特的设计,因此可以自由地创造新的用户体验。