Merge pull request #202 from AuroraZiling/main

[Documentation] search support & 3 controls docs
kikipoulet · May 28, 2024 · e149a3e · e149a3e
2 parents e5affe2 + eef8804
commit e149a3e
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 3 deletions.
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -3,4 +3,5 @@ node_modules
 cache
 temp
 dist
-pnpm-lock.yaml
+pnpm-lock.yaml
+helper
diff --git a/docs/docs/.vitepress/config/shared.mts b/docs/docs/.vitepress/config/shared.mts
@@ -12,6 +12,29 @@ export const shared = defineConfig({
     logo: { src: '/suki.webp', width: 24, height: 24 },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/kikipoulet/SukiUI' }
-    ]
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          zh: {
+            translations: {
+              button: {
+                buttonText: '搜索文档',
+                buttonAriaLabel: '搜索文档'
+              },
+              modal: {
+                noResultsText: '无法找到相关结果',
+                resetButtonTitle: '清除查询条件',
+                footer: {
+                  selectText: '选择',
+                  navigateText: '切换'
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 })
diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md
@@ -0,0 +1,34 @@
+# Glass Card
+
+A simple Card control that can present any control inside.
+
+You can adjust whether the `GlassCard` is opaque or not and with or without interactive effects.
+
+## Show
+
+- Normal
+
+<img src="/controls/layout/glasscard-1.webp" height="300px" width="300px"/>
+
+- Opaque
+
+<img src="/controls/layout/glasscard-2.webp" height="300px" width="300px"/>
+
+- Interactive
+
+<img src="/controls/layout/glasscard-3.webp" height="300px" width="300px"/>
+
+## Example
+
+```xml
+<GlassCard>
+    <!-- Content -->
+</GlassCard>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml)
+
+
+[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)
diff --git a/docs/docs/documentation/controls/layout/tabcontrol.md b/docs/docs/documentation/controls/layout/tabcontrol.md
@@ -0,0 +1,28 @@
+# Tab Control
+
+`TabControl` provides the user with a collection of tabs that can be used to display several contents.
+
+::: tip
+`TabStripPlacement` property is available
+:::
+
+## Show
+
+<img src="/controls/layout/tabcontrol.webp"/>
+
+## Example
+
+```xml
+<TabControl>
+    <TabItem Header="Tab 1">
+        <!-- Content -->
+    </TabItem>
+    <TabItem Header="Tab 2">
+        <!-- Content -->
+    </TabItem>
+</TabControl>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/TabControl/TabControlView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TabControl/TabControlView.axaml)
diff --git a/docs/docs/documentation/controls/navigation/sidemenu.md b/docs/docs/documentation/controls/navigation/sidemenu.md
@@ -1,3 +1,39 @@
 # SukiSideMenu
 
-`SukiSideMenu` is the main navigation control used in SukiUI, similar to `NavigationView` in other libraries.
+`SukiSideMenu` is the main navigation control used in SukiUI, similar to `NavigationView` in other libraries.
+
+## Show
+
+<img src="/controls/navigation/sukisidemenu.webp" height="200px" width="200px"/>
+
+## Example
+
+```xml
+<suki:SukiSideMenu>
+    <suki:SukiSideMenu.Items>
+        <suki:SukiSideMenuItem Header="Statistics">
+            <suki:SukiSideMenuItem.Icon>
+                <!-- Icon -->
+            </suki:SukiSideMenuItem.Icon>
+            <suki:SukiSideMenuItem.PageContent>
+                <!-- Page Content -->
+            </suki:SukiSideMenuItem.PageContent>
+        </suki:SukiSideMenuItem>
+    </suki:SukiSideMenu.Items>
+
+    <suki:SukiSideMenu.HeaderContent>
+        <!-- Header Content -->
+    </suki:SukiSideMenu.HeaderContent>
+
+    <suki:SukiSideMenu.FooterContent>
+        <!-- Footer Content -->
+    </suki:SukiSideMenu.FooterContent>
+</suki:SukiSideMenu>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml)
+
+
+[API: Controls/SukiSideMenu.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiSideMenu.axaml.cs)
diff --git a/docs/docs/public/controls/layout/glasscard-1.webp b/docs/docs/public/controls/layout/glasscard-1.webp
diff --git a/docs/docs/public/controls/layout/glasscard-2.webp b/docs/docs/public/controls/layout/glasscard-2.webp
diff --git a/docs/docs/public/controls/layout/glasscard-3.webp b/docs/docs/public/controls/layout/glasscard-3.webp
diff --git a/docs/docs/public/controls/layout/tabcontrol.webp b/docs/docs/public/controls/layout/tabcontrol.webp
diff --git a/docs/docs/public/controls/navigation/sukisidemenu.webp b/docs/docs/public/controls/navigation/sukisidemenu.webp
diff --git a/docs/docs/zh/documentation/controls/layout/glasscard.md b/docs/docs/zh/documentation/controls/layout/glasscard.md
@@ -0,0 +1,34 @@
+# Glass Card
+
+一个简单的卡片式控件，可以往里面塞各种内容
+
+`GlassCard` 的透明和交互效果是可以开关的
+
+## 展示
+
+- 普通
+
+<img src="/controls/layout/glasscard-1.webp" height="300px" width="300px"/>
+
+- 不透明
+
+<img src="/controls/layout/glasscard-2.webp" height="300px" width="300px"/>
+
+- 有交互效果
+
+<img src="/controls/layout/glasscard-3.webp" height="300px" width="300px"/>
+
+## 示例
+
+```xml
+<GlassCard>
+    <!-- Content -->
+</GlassCard>
+```
+
+## 参阅
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml)
+
+
+[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)
diff --git a/docs/docs/zh/documentation/controls/layout/tabcontrol.md b/docs/docs/zh/documentation/controls/layout/tabcontrol.md
@@ -0,0 +1,28 @@
+# Tab Control
+
+`TabControl` 可以通过切换 `TabItem` 以展现多种内容
+
+::: tip
+`TabStripPlacement` 属性是可用的
+:::
+
+## 展示
+
+<img src="/controls/layout/tabcontrol.webp"/>
+
+## 示例
+
+```xml
+<TabControl>
+    <TabItem Header="Tab 1">
+        <!-- Content -->
+    </TabItem>
+    <TabItem Header="Tab 2">
+        <!-- Content -->
+    </TabItem>
+</TabControl>
+```
+
+## 参阅
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/TabControl/TabControlView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TabControl/TabControlView.axaml)
diff --git a/docs/docs/zh/documentation/controls/navigation/sidemenu.md b/docs/docs/zh/documentation/controls/navigation/sidemenu.md
@@ -0,0 +1,39 @@
+# SukiSideMenu
+
+`SukiSideMenu` 是 SukiUI 主要的导航控件，类似其他库中的 `NavigationView`
+
+## 展示
+
+<img src="/controls/navigation/sukisidemenu.webp" height="200px" width="200px"/>
+
+## 示例
+
+```xml
+<suki:SukiSideMenu>
+    <suki:SukiSideMenu.Items>
+        <suki:SukiSideMenuItem Header="Statistics">
+            <suki:SukiSideMenuItem.Icon>
+                <!-- Icon -->
+            </suki:SukiSideMenuItem.Icon>
+            <suki:SukiSideMenuItem.PageContent>
+                <!-- Page Content -->
+            </suki:SukiSideMenuItem.PageContent>
+        </suki:SukiSideMenuItem>
+    </suki:SukiSideMenu.Items>
+
+    <suki:SukiSideMenu.HeaderContent>
+        <!-- Header Content -->
+    </suki:SukiSideMenu.HeaderContent>
+
+    <suki:SukiSideMenu.FooterContent>
+        <!-- Footer Content -->
+    </suki:SukiSideMenu.FooterContent>
+</suki:SukiSideMenu>
+```
+
+## 参阅
+
+[Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml)
+
+
+[API: Controls/SukiSideMenu.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiSideMenu.axaml.cs)