docs: add sidebar zh doc

oil-oil · Sep 11, 2023 · 90a9fdd · 90a9fdd
1 parent b01afba
commit 90a9fdd
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 26 deletions.
diff --git 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
@@ -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`
 
 </card>
 

diff --git 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` 属性，该属性可添加书写动画
 
 </card>
 

diff --git 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
@@ -62,7 +62,7 @@
 
 ## Indeterminate
 
-在某些情况下，如果你有多个复选框，而只需要一个复选框来管理所有其他复选框，这时您可以使用 `indeterminate` 属性，为复选框添加不同的样式。
+在某些情况下，如果你有多个复选框，而只需要一个复选框来管理所有其他复选框，这时你可以使用 `indeterminate` 属性，为复选框添加不同的样式。
 
 </card>
 

diff --git 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` 更改加载背景颜色
 
 </card>
 
@@ -108,7 +108,7 @@ props :
 
 ## Percent
 
-您可以使用 `percent` 属性添加百分比字符串，如果需要更改该值，请使用加载实例中的 `changePercent` 函数。
+你可以使用 `percent` 属性添加百分比字符串，如果需要更改该值，请使用加载实例中的 `changePercent` 函数。
 
 </card>
 

diff --git 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` 。
 
 </card>
 

diff --git 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
 
-你可能需要自定义分页，为此您可以使用箭头之间的默认插槽，并替换页面上的项目
+你可能需要自定义分页，为此你可以使用箭头之间的默认插槽，并替换页面上的项目
 
 </card>
 

diff --git a/packages/docs/docs/.vitepress/docs/zh/documentation/components/sidebar.md 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 侧边栏
+
+<card>
+
+## Default
+
+使用 `VsSidebar` 组件添加侧边栏菜单，其中有两个子组件 `VsSidebarItem` 和`VsSidebarGroup`
+
+</card>
+
+<card subtitle="Group">
+
+## Group
+
+你可以使用 `VsSidebarGroup` 子组件对项目进行分组和隐藏。
+
+</card>
+
+<card subtitle="Collapsed">
+
+## Collapse
+
+你可以使用 `collapsed` 属性使边栏宽度为 `50px`，并只显示图标。
+
+</card>
+
+<card subtitle="HoverExpand">
+
+## Hover Expand
+
+你可以使用属性 `hoverExpand` 添加用鼠标展开或折叠侧边栏的功能。
+
+</card>
+
+<card subtitle="Color">
+
+## Color
+
+你可以使用 `color` 更改侧边栏的字体颜色，使用 `activeColor` 更改侧边栏中激活项的颜色，使用 `background` 更改侧边栏的背景。
+
+</card>
+
+<card subtitle="Visible">
+
+## Visible
+
+你可以使用 `visible` 属性定义侧边栏是可见还是隐藏，默认情况下该属性为 `true`
+
+</card>
+
+<card subtitle="Right">
+
+## Position Right
+
+你可以使用 `right` 属性将侧边栏更改为右侧布局
+
+</card>
+
+<card subtitle="Square">
+
+## Square
+
+你可以使用 `square` 属性，删除 `border-radius` 边框半径，使侧边栏变成正方形。
+
+</card>
+
+<card subtitle="NoLine">
+
+## No Line
+
+你可以使用 `noLine` 属性移除侧边栏的激活效果线
+
+</card>
+
+<script setup>
+import Api from "../../../theme/global-components/template/API.tsx"
+</script>
+
+<Api/>
diff --git 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` 属性来实现表格搜索和表格排序。
 
 </card>
 

diff --git 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` 属性
 
 </card>
 
@@ -182,7 +182,7 @@ slots :
 
 ## Content
 
-你创建文字提示组件的方式让您可以自由添加任何内容，并在其中添加各种组件。
+你创建文字提示组件的方式让你可以自由添加任何内容，并在其中添加各种组件。
 
 </card>
 

diff --git 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 中的一些组件在其他框架中是找不到的，因为我们拥有独特的设计，因此可以自由地创造新的用户体验。