Merge pull request #210 from AuroraZiling/main

[Feat&Docs] SukiSideMenu `IsToggleButtonVisible` + 2 Docs
kikipoulet · Jun 3, 2024 · 801067d · 801067d
2 parents fce71f2 + 5af11b9
commit 801067d
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 2 deletions.
diff --git a/SukiUI/Controls/SukiSideMenu.axaml b/SukiUI/Controls/SukiSideMenu.axaml
@@ -13,9 +13,10 @@
                     <SplitView.Pane>
                         <Border>
                             <Grid Background="Transparent">
-                                <suki:GlassCard Name="Glass" IsAnimated="False"
+                                <suki:GlassCard Name="Glass"
                                                 BorderThickness="0"
-                                                CornerRadius="0" />
+                                                CornerRadius="0"
+                                                IsAnimated="False" />
                                 <DockPanel>
                                     <Button Name="PART_SidebarToggleButton"
                                             Margin="7"
@@ -80,6 +81,10 @@
                 </SplitView>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^[IsToggleButtonVisible=False] /template/ Button#PART_SidebarToggleButton">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
         <Style Selector="^[IsMenuExpanded=False] /template/ PathIcon#PART_ExpandIcon">
             <Setter Property="RenderTransform" Value="rotate(-180deg)" />
         </Style>

diff --git a/SukiUI/Controls/SukiSideMenu.axaml.cs b/SukiUI/Controls/SukiSideMenu.axaml.cs
@@ -15,6 +15,15 @@ namespace SukiUI.Controls;
 
 public class SukiSideMenu : SelectingItemsControl
 {
+    public static readonly StyledProperty<bool> IsToggleButtonVisibleProperty =
+        AvaloniaProperty.Register<SukiSideMenu, bool>(nameof(IsToggleButtonVisible), defaultValue: true);
+
+    public bool IsToggleButtonVisible
+    {
+        get => GetValue(IsToggleButtonVisibleProperty);
+        set => SetValue(IsToggleButtonVisibleProperty, value);
+    }
+
     public static readonly StyledProperty<bool> IsMenuExpandedProperty =
         AvaloniaProperty.Register<SukiSideMenu, bool>(nameof(IsMenuExpanded), defaultValue: true);
 

diff --git a/docs/docs/documentation/controls/layout/settingslayout.md b/docs/docs/documentation/controls/layout/settingslayout.md
@@ -0,0 +1,41 @@
+# Settings Layout
+
+You can present `settings` through a `SettingsLayout`, which will update with the width of the window.
+
+## Show
+
+<img src="/controls/layout/settingslayout.gif" />
+
+## Example
+
+```xml
+<suki:SettingsLayout>
+    <suki:SettingsLayout.Items>
+        <objectModel:ObservableCollection x:TypeArguments="suki:SettingsLayoutItem">
+            <suki:SettingsLayoutItem Header="Settings Part1">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+
+            <suki:SettingsLayoutItem Header="Settings Part 2">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+
+            <suki:SettingsLayoutItem Header="Settings Part 3">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+        </objectModel:ObservableCollection>
+    </suki:SettingsLayout.Items>
+</suki:SettingsLayout>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/Theming/ThemingView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/Theming/ThemingView.axaml)
+
+[API: Controls/SettingsLayout.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SettingsLayout.axaml.cs)
diff --git a/docs/docs/documentation/controls/layout/sukiwindow.md b/docs/docs/documentation/controls/layout/sukiwindow.md
@@ -0,0 +1,27 @@
+# SukiWindow
+
+In SukiUI, `SukiWindow` replaces `Window` as the basis for building apps.
+
+## Show
+
+<img src="/controls/layout/sukiwindow.webp" />
+
+## Example
+
+```xml
+<suki:SukiWindow>
+    <suki:SukiWindow.LogoContent>
+        <!-- Logo -->
+    </suki:SukiWindow.LogoContent>
+
+    <suki:SukiWindow.MenuItems>
+        <!-- Menu -->
+    </suki:SukiWindow.MenuItems>
+</suki:SukiWindow>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml)
+
+[API: Controls/SukiWindow.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiWindow.axaml.cs)
diff --git a/docs/docs/public/controls/layout/settingslayout.gif b/docs/docs/public/controls/layout/settingslayout.gif
diff --git a/docs/docs/public/controls/layout/sukiwindow.webp b/docs/docs/public/controls/layout/sukiwindow.webp
diff --git a/docs/docs/zh/documentation/controls/layout/settingslayout.md b/docs/docs/zh/documentation/controls/layout/settingslayout.md
@@ -0,0 +1,41 @@
+# Settings Layout
+
+可以通过 `SettingsLayout` 方便地呈现 App 的设置页。同时，它也会随着窗口宽度的变化而更新。
+
+## 展示
+
+<img src="/controls/layout/settingslayout.gif" />
+
+## 示例
+
+```xml
+<suki:SettingsLayout>
+    <suki:SettingsLayout.Items>
+        <objectModel:ObservableCollection x:TypeArguments="suki:SettingsLayoutItem">
+            <suki:SettingsLayoutItem Header="Settings Part1">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+
+            <suki:SettingsLayoutItem Header="Settings Part 2">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+
+            <suki:SettingsLayoutItem Header="Settings Part 3">
+                <suki:SettingsLayoutItem.Content>
+                    <Border Background="LightGray" Height="300" />
+                </suki:SettingsLayoutItem.Content>
+            </suki:SettingsLayoutItem>
+        </objectModel:ObservableCollection>
+    </suki:SettingsLayout.Items>
+</suki:SettingsLayout>
+```
+
+## 参阅
+
+[Demo: SukiUI.Demo/Features/Theming/ThemingView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/Theming/ThemingView.axaml)
+
+[API: Controls/SettingsLayout.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SettingsLayout.axaml.cs)
diff --git a/docs/docs/zh/documentation/controls/layout/sukiwindow.md b/docs/docs/zh/documentation/controls/layout/sukiwindow.md
@@ -0,0 +1,27 @@
+# SukiWindow
+
+在 SukiUI 中, `SukiWindow` 代替 `Window` 成为构建 App 的基础
+
+## 展示
+
+<img src="/controls/layout/sukiwindow.webp" />
+
+## 示例
+
+```xml
+<suki:SukiWindow>
+    <suki:SukiWindow.LogoContent>
+        <!-- Logo -->
+    </suki:SukiWindow.LogoContent>
+
+    <suki:SukiWindow.MenuItems>
+        <!-- Menu -->
+    </suki:SukiWindow.MenuItems>
+</suki:SukiWindow>
+```
+
+## 参阅
+
+[Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml)
+
+[API: Controls/SukiWindow.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiWindow.axaml.cs)