From 6881846a6ce03edd73222df97febbbca8debce65 Mon Sep 17 00:00:00 2001 From: chinboy Date: Sat, 9 May 2026 15:57:18 +0800 Subject: [PATCH] feat(Space): add Space component with customizable spacing and showcase --- .../LanguageResourceConst.g.cs | 1 + .../ShowCases/ShowCaseRegister.cs | 1 + .../ViewModels/Layout/SpaceViewModel.cs | 35 ++ .../Views/Layout/SpaceShowCase.axaml | 440 ++++++++++++++++++ .../Views/Layout/SpaceShowCase.axaml.cs | 50 ++ .../Localization/CaseNavigationLang/en_US.cs | 1 + .../Localization/CaseNavigationLang/zh_CN.cs | 1 + .../ViewModels/CaseNavigationViewModel.cs | 1 + .../Workspace/Views/CaseNavigation.axaml | 2 + 9 files changed, 532 insertions(+) create mode 100644 controlgallery/AtomUIGallery/ShowCases/ViewModels/Layout/SpaceViewModel.cs create mode 100644 controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml create mode 100644 controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml.cs diff --git a/controlgallery/AtomUIGallery/GeneratedFiles/AtomUI.Generator/AtomUI.Generator.LanguageGenerator/LanguageResourceConst.g.cs b/controlgallery/AtomUIGallery/GeneratedFiles/AtomUI.Generator/AtomUI.Generator.LanguageGenerator/LanguageResourceConst.g.cs index e13ed0291..1f8a0ba5f 100644 --- a/controlgallery/AtomUIGallery/GeneratedFiles/AtomUI.Generator/AtomUI.Generator.LanguageGenerator/LanguageResourceConst.g.cs +++ b/controlgallery/AtomUIGallery/GeneratedFiles/AtomUI.Generator/AtomUI.Generator.LanguageGenerator/LanguageResourceConst.g.cs @@ -70,6 +70,7 @@ namespace AtomUIGallery.Localization Layout, Layout_FlexPanel, Layout_Grid, + Layout_Space, Layout_Splitter, Navigation, Navigation_Breadcrumb, diff --git a/controlgallery/AtomUIGallery/ShowCases/ShowCaseRegister.cs b/controlgallery/AtomUIGallery/ShowCases/ShowCaseRegister.cs index 29b9dc234..e3b258a13 100644 --- a/controlgallery/AtomUIGallery/ShowCases/ShowCaseRegister.cs +++ b/controlgallery/AtomUIGallery/ShowCases/ShowCaseRegister.cs @@ -71,6 +71,7 @@ public sealed class ShowCaseViewModule : IViewModule locator.Map(() => new UploadShowCase()); locator.Map(() => new TransferShowCase()); locator.Map(() => new FormShowCase()); + locator.Map(() => new SpaceShowCase()); locator.Map(() => new NumberUpDownShowCase()); locator.Map(() => new ListShowCase()); locator.Map(() => new TreeViewShowCase()); diff --git a/controlgallery/AtomUIGallery/ShowCases/ViewModels/Layout/SpaceViewModel.cs b/controlgallery/AtomUIGallery/ShowCases/ViewModels/Layout/SpaceViewModel.cs new file mode 100644 index 000000000..ed6851f93 --- /dev/null +++ b/controlgallery/AtomUIGallery/ShowCases/ViewModels/Layout/SpaceViewModel.cs @@ -0,0 +1,35 @@ +using AtomUI; +using AtomUI.Controls; +using ReactiveUI; + +namespace AtomUIGallery.ShowCases.ViewModels; + +public class SpaceViewModel : ReactiveObject, IRoutableViewModel +{ + public static EntityKey ID = "SpaceShowCase"; + + public IScreen HostScreen { get; } + + public string? UrlPathSegment => ID.ToString(); + + private CustomizableSizeType _sizeType; + + public CustomizableSizeType SizeType + { + get => _sizeType; + set => this.RaiseAndSetIfChanged(ref _sizeType, value); + } + + private double _customSpacingValue; + + public double CustomSpacingValue + { + get => _customSpacingValue; + set => this.RaiseAndSetIfChanged(ref _customSpacingValue, value); + } + + public SpaceViewModel(IScreen screen) + { + HostScreen = screen; + } +} diff --git a/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml b/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml new file mode 100644 index 000000000..a0f6d1ac2 --- /dev/null +++ b/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml @@ -0,0 +1,440 @@ + + + + + + + + + Space: + + Button + Click to Upload + + Confirm + + + + + + + + + + Card content + Card content + + + + + + Card content + Card content + + + + + + Card content + Card content + + + + + + + + + + Small + + + Middle + + + Large + + + Custom + + + + + Primary + Default + Dashed + Link + + + + + + + + + center + Primary + + Block + + + + + + + center + Primary + + Block + + + + + + + center + Primary + + Block + + + + + + + + + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + Button + + + + + + + + + Link + Link + Link + + + + + + + + + + + + + + Submit + + + + + + Submit + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 查询 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Submit + + + + + + + + + + + + + + + + + + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Button 1 + Button 2 + Button 3 + Button 4 + + + + + + Button 1 + Button 2 + Button 3 + + + Button 4 + + + + + + + + + + + + + + + + + Button 1 + Button 2 + Button 3 + + + + Button 1 + Button 2 + Button 3 + + + + Button 1 + Button 2 + Button 3 + + + + + \ No newline at end of file diff --git a/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml.cs b/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml.cs new file mode 100644 index 000000000..1c7a37cdb --- /dev/null +++ b/controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml.cs @@ -0,0 +1,50 @@ +using AtomUI; +using AtomUI.Desktop.Controls; +using AtomUIGallery.ShowCases.ViewModels; +using Avalonia.Interactivity; +using ReactiveUI; +using ReactiveUI.Avalonia; + +namespace AtomUIGallery.ShowCases.Views; + +public partial class SpaceShowCase : ReactiveUserControl +{ + public SpaceShowCase() + { + this.WhenActivated(disposables => + { + if (DataContext is SpaceViewModel vm) + { + vm.SizeType = CustomizableSizeType.Small; + } + }); + InitializeComponent(); + } + + private void HandleSizeTypeChanged(object sender, RoutedEventArgs e) + { + if (sender is RadioButton radioButton) + { + if (radioButton.IsChecked == true) + { + var sizeType = (CustomizableSizeType)radioButton.Tag!; + if (DataContext is SpaceViewModel vm) + { + vm.SizeType = sizeType; + } + + if (CustomSizeSlider != null) + { + if (sizeType == CustomizableSizeType.Custom) + { + CustomSizeSlider.IsVisible = true; + } + else + { + CustomSizeSlider.IsVisible = false; + } + } + } + } + } +} diff --git a/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/en_US.cs b/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/en_US.cs index ad3300843..8620ef55d 100644 --- a/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/en_US.cs +++ b/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/en_US.cs @@ -19,6 +19,7 @@ internal class en_US : LanguageProvider public const string Layout_FlexPanel = "FlexPanel"; public const string Layout_Grid = "Grid"; public const string Layout_Splitter = "Splitter"; + public const string Layout_Space = "Space"; public const string Navigation = "Navigation"; public const string Navigation_Breadcrumb = "Breadcrumb"; public const string Navigation_ButtonSpinner = "ButtonSpinner"; diff --git a/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/zh_CN.cs b/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/zh_CN.cs index 2b765aac6..d33e076c8 100644 --- a/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/zh_CN.cs +++ b/controlgallery/AtomUIGallery/Workspace/Localization/CaseNavigationLang/zh_CN.cs @@ -19,6 +19,7 @@ internal class zh_CN : LanguageProvider public const string Layout_FlexPanel = "FlexPanel 弹性布局"; public const string Layout_Grid = "Grid 栅格"; public const string Layout_Splitter = "Splitter 分割面板"; + public const string Layout_Space = "Space 间距"; public const string Navigation = "导航"; public const string Navigation_Breadcrumb = "Breadcrumb 面包屑"; public const string Navigation_ButtonSpinner = "ButtonSpinner 按钮微调器"; diff --git a/controlgallery/AtomUIGallery/Workspace/ViewModels/CaseNavigationViewModel.cs b/controlgallery/AtomUIGallery/Workspace/ViewModels/CaseNavigationViewModel.cs index 2c6a7878b..d3388ec44 100644 --- a/controlgallery/AtomUIGallery/Workspace/ViewModels/CaseNavigationViewModel.cs +++ b/controlgallery/AtomUIGallery/Workspace/ViewModels/CaseNavigationViewModel.cs @@ -116,6 +116,7 @@ public class CaseNavigationViewModel : ReactiveObject, IActivatableViewModel _showCaseViewModelFactories.Add(UploadViewModel.ID, () => new UploadViewModel(HostScreen)); _showCaseViewModelFactories.Add(TransferViewModel.ID, () => new TransferViewModel(HostScreen)); _showCaseViewModelFactories.Add(FormViewModel.ID, () => new FormViewModel(HostScreen)); + _showCaseViewModelFactories.Add(SpaceViewModel.ID, () => new SpaceViewModel(HostScreen)); _showCaseViewModelFactories.Add(NumberUpDownViewModel.ID, () => new NumberUpDownViewModel(HostScreen)); _showCaseViewModelFactories.Add(ListViewModel.ID, () => new ListViewModel(HostScreen)); _showCaseViewModelFactories.Add(TreeViewViewModel.ID, () => new TreeViewViewModel(HostScreen)); diff --git a/controlgallery/AtomUIGallery/Workspace/Views/CaseNavigation.axaml b/controlgallery/AtomUIGallery/Workspace/Views/CaseNavigation.axaml index 62a32a9c6..47cef2bb9 100644 --- a/controlgallery/AtomUIGallery/Workspace/Views/CaseNavigation.axaml +++ b/controlgallery/AtomUIGallery/Workspace/Views/CaseNavigation.axaml @@ -35,6 +35,8 @@ ItemKey="{x:Static viewmodels:GridViewModel.ID}" /> +