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