feat(Space): add Space component with customizable spacing and showcase

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,

controlgallery/AtomUIGallery/ShowCases/ShowCaseRegister.cs

@@ -71,6 +71,7 @@ public sealed class ShowCaseViewModule : IViewModule
         locator.Map<UploadViewModel, UploadShowCase>(() => new UploadShowCase());
         locator.Map<TransferViewModel, TransferShowCase>(() => new TransferShowCase());
         locator.Map<FormViewModel, FormShowCase>(() => new FormShowCase());
+        locator.Map<SpaceViewModel, SpaceShowCase>(() => new SpaceShowCase());
         locator.Map<NumberUpDownViewModel, NumberUpDownShowCase>(() => new NumberUpDownShowCase());
         locator.Map<ListViewModel, ListShowCase>(() => new ListShowCase());
         locator.Map<TreeViewViewModel, TreeViewShowCase>(() => new TreeViewShowCase());

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;
+    }
+}

controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml

@@ -0,0 +1,440 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="AtomUIGallery.ShowCases.Views.SpaceShowCase"
+             xmlns:atom="https://atomui.net"
+             xmlns:antdicons="https://atomui.net/icons/antdesign"
+             xmlns:gallery="https://atomui.net/oss-controls/gallery"
+             xmlns:viewModels="clr-namespace:AtomUIGallery.ShowCases.ViewModels"
+             x:DataType="viewModels:SpaceViewModel">
+    <gallery:ShowCasePanel>
+        <gallery:ShowCasePanel.Styles>
+            <Style Selector="Border.align-box">
+                <Setter Property="BorderThickness" Value="1" />
+                <Setter Property="BorderBrush" Value="#1677FF" />
+                <Setter Property="CornerRadius" Value="0" />
+                <Setter Property="Padding" Value="{atom:SharedTokenResource PaddingXXS}" />
+            </Style>
+            <Style Selector="Border.align-block-item">
+                <Setter Property="Background" Value="{atom:SharedTokenResource ColorBgLayout}" />
+                <Setter Property="Padding" Value="{atom:SharedTokenResource PaddingXXS}" />
+                <Setter Property="Height" Value="70" />
+                <Setter Property="Width" Value="50" />
+            </Style>
+        </gallery:ShowCasePanel.Styles>
+        <gallery:ShowCaseItem Description="Crowded components horizontal spacing."
+                              Title="Basic" IsOccupyEntireRow="True">
+            <StackPanel Orientation="Horizontal" Spacing="10">
+                <atom:TextBlock VerticalAlignment="Center">Space:</atom:TextBlock>
+                <atom:Space>
+                    <atom:Button ButtonType="Primary">Button</atom:Button>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider UploadOutlined}">Click to Upload</atom:Button>
+                    <atom:PopupConfirm
+                        Title="Delete the task"
+                        ConfirmContent="Are you sure to delete this task?"
+                        OkText="Ok"
+                        CancelText="Cancel"
+                        Placement="Top"
+                        IsShowArrow="True">
+                        <atom:Button ButtonType="Default" IsDanger="True">Confirm</atom:Button>
+                    </atom:PopupConfirm>
+                </atom:Space>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Description="Crowded components vertical spacing."
+                              Title="Vertical Space" IsOccupyEntireRow="True">
+            <atom:Space Orientation="Vertical" HorizontalAlignment="Stretch" Height="300">
+                <atom:Card Header="Card" SizeType="Middle" HorizontalAlignment="Stretch">
+                    <StackPanel Orientation="Vertical" Spacing="10">
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                    </StackPanel>
+                </atom:Card>
+        
+                <atom:Card Header="Card" SizeType="Middle" HorizontalAlignment="Stretch">
+                    <StackPanel Orientation="Vertical" Spacing="10">
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                    </StackPanel>
+                </atom:Card>
+        
+                <atom:Card Header="Card" SizeType="Middle" HorizontalAlignment="Stretch">
+                    <StackPanel Orientation="Vertical" Spacing="10">
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                        <atom:TextBlock>Card content</atom:TextBlock>
+                    </StackPanel>
+                </atom:Card>
+            </atom:Space>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Title="Space Size"
+                              IsOccupyEntireRow="True"
+                              Description="Use size to set the spacing, Three sizes are preset: small, middle, large. You can also customize the spacing. If size is not set, the spacing is small." >
+            <StackPanel Orientation="Vertical" Spacing="15">
+                <StackPanel Orientation="Horizontal" Spacing="10">
+                    <atom:RadioButton Tag="{x:Static atom:CustomizableSizeType.Small}"
+                                      IsCheckedChanged="HandleSizeTypeChanged"
+                                      IsChecked="True">
+                        Small
+                    </atom:RadioButton>
+                    <atom:RadioButton Tag="{x:Static atom:CustomizableSizeType.Middle}"
+                                      IsCheckedChanged="HandleSizeTypeChanged">
+                        Middle
+                    </atom:RadioButton>
+                    <atom:RadioButton Tag="{x:Static atom:CustomizableSizeType.Large}"
+                                      IsCheckedChanged="HandleSizeTypeChanged">
+                        Large
+                    </atom:RadioButton>
+                    <atom:RadioButton Tag="{x:Static atom:CustomizableSizeType.Custom}"
+                                      IsCheckedChanged="HandleSizeTypeChanged">
+                        Custom
+                    </atom:RadioButton>
+                </StackPanel>
+                <atom:Slider Name="CustomSizeSlider"
+                             Minimum="0" Maximum="100"
+                             Value="{Binding CustomSpacingValue, Mode=TwoWay}"
+                             IsVisible="False"/>
+                <atom:Space Orientation="Horizontal" SizeType="{Binding SizeType}"
+                            LineSpacing="{Binding #CustomSizeSlider.Value, Priority=Template}"
+                            ItemSpacing="{Binding #CustomSizeSlider.Value, Priority=Template}">
+                    <atom:Button ButtonType="Primary">Primary</atom:Button>
+                    <atom:Button>Default</atom:Button>
+                    <atom:Button ButtonType="Dashed">Dashed</atom:Button>
+                    <atom:Button ButtonType="Link">Link</atom:Button>
+                </atom:Space>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Title="Align"
+                              Description="Config item align."
+                              IsOccupyEntireRow="True">
+            <StackPanel Orientation="Horizontal" Spacing="10">
+                <Border Classes="align-box">
+                    <atom:Space ItemsAlignment="Start" Orientation="Horizontal">
+                        <atom:TextBlock>center</atom:TextBlock>
+                        <atom:Button ButtonType="Primary">Primary</atom:Button>
+                        <Border Classes="align-block-item">
+                            <atom:TextBlock VerticalAlignment="Center">Block</atom:TextBlock>
+                        </Border>
+                    </atom:Space>
+                </Border>
+        
+                <Border Classes="align-box">
+                    <atom:Space ItemsAlignment="Center" Orientation="Horizontal">
+                        <atom:TextBlock>center</atom:TextBlock>
+                        <atom:Button ButtonType="Primary">Primary</atom:Button>
+                        <Border Classes="align-block-item">
+                            <atom:TextBlock VerticalAlignment="Center">Block</atom:TextBlock>
+                        </Border>
+                    </atom:Space>
+                </Border>
+        
+                <Border Classes="align-box">
+                    <atom:Space ItemsAlignment="End" Orientation="Horizontal">
+                        <atom:TextBlock>center</atom:TextBlock>
+                        <atom:Button ButtonType="Primary">Primary</atom:Button>
+                        <Border Classes="align-block-item">
+                            <atom:TextBlock VerticalAlignment="Center">Block</atom:TextBlock>
+                        </Border>
+                    </atom:Space>
+                </Border>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Title="Align"
+                              Description="Auto wrap line."
+                              IsOccupyEntireRow="True">
+            <atom:Space Orientation="Horizontal" ItemSpacing="8" LineSpacing="16">
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+                <atom:Button>Button</atom:Button>
+            </atom:Space>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Title="Split"
+                              Description="Crowded components split."
+                              IsOccupyEntireRow="True">
+            <atom:Space Orientation="Horizontal" ItemsAlignment="Center">
+                <atom:Space.SplitTemplate>
+                    <Template>
+                        <atom:Separator Orientation="Vertical"/>
+                    </Template>
+                </atom:Space.SplitTemplate>
+                <atom:HyperLinkTextBlock>Link</atom:HyperLinkTextBlock>
+                <atom:HyperLinkTextBlock>Link</atom:HyperLinkTextBlock>
+                <atom:HyperLinkTextBlock>Link</atom:HyperLinkTextBlock>
+            </atom:Space>
+        </gallery:ShowCaseItem>
+        
+        <gallery:ShowCaseItem Title="Compact Mode for form component"
+                              Description="Compact Mode for form component."
+                              IsOccupyEntireRow="True">
+            <StackPanel Spacing="10">
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit Text="0571" atom:CompactSpace.ItemSize="2*"/>
+                    <atom:LineEdit Text="26888888" atom:CompactSpace.ItemSize="3*"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch" SizeType="Small">
+                    <atom:LineEdit Text="https://atomui.net" atom:CompactSpace.ItemSize="4*"/>
+                    <atom:Button ButtonType="Primary">Submit</atom:Button>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit Text="https://atomui.net" atom:CompactSpace.ItemSize="4*"/>
+                    <atom:Button ButtonType="Primary">Submit</atom:Button>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit Text="git@github.com:AtomUI/AtomUI.git" atom:CompactSpace.ItemSize="4*"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider CopyOutlined}" atom:ToolTip.Tip="copy git url"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select IsAllowClear="True" DefaultValues="Zhejiang">
+                        <atom:SelectOption Header="Zhejiang" Content="Zhejiang" />
+                        <atom:SelectOption Header="Jiangsu" Content="Jiangsu" />
+                    </atom:Select>
+                    <atom:LineEdit Text="Xihu District, Hangzhou" atom:CompactSpace.ItemSize="4*"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="4*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select  IsAllowClear="True" DefaultValues="Zhejiang" Mode="Multiple" atom:CompactSpace.ItemSize="4*">
+                        <atom:SelectOption Header="Zhejiang" Content="Zhejiang" />
+                        <atom:SelectOption Header="Jiangsu" Content="Jiangsu" />
+                    </atom:Select>
+                    <atom:LineEdit Text="Xihu District, Hangzhou" atom:CompactSpace.ItemSize="4*"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="4*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:SearchEdit Text="0571" atom:CompactSpace.ItemSize="3*"/>
+                    <atom:SearchEdit Text="26888888" atom:CompactSpace.ItemSize="5*"/>
+                    <atom:SearchEdit Text="+1" atom:CompactSpace.ItemSize="2*"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="4*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select DefaultValues="Option1">
+                        <atom:SelectOption Header="Option1" Content="Option1" />
+                        <atom:SelectOption Header="Option2" Content="Option2" />
+                    </atom:Select>
+                    <atom:LineEdit Text="input content" atom:CompactSpace.ItemSize="5*"/>
+                    <atom:NumericUpDown Value="12" atom:CompactSpace.ItemSize="80"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit Text="input content" atom:CompactSpace.ItemSize="5*"/>
+                    <atom:DatePicker atom:CompactSpace.ItemSize="5*"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:RangeDatePicker atom:CompactSpace.ItemSize="7*"/>
+                    <atom:LineEdit Text="input content" atom:CompactSpace.ItemSize="3*"/>
+                    <atom:Button ButtonType="Primary">查询</atom:Button>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select DefaultValues="Option1-1">
+                        <atom:SelectOption Header="Option1-1" Content="Option1-1" />
+                        <atom:SelectOption Header="Option2-1" Content="Option2-1" />
+                    </atom:Select>
+                    <atom:Select DefaultValues="Option2-1">
+                        <atom:SelectOption Header="Option2-1" Content="Option2-1" />
+                        <atom:SelectOption Header="Option2-2" Content="Option2-2" />
+                    </atom:Select>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select DefaultValues="1">
+                        <atom:SelectOption Header="Between" Content="1" />
+                        <atom:SelectOption Header="Except" Content="2" />
+                    </atom:Select>
+                    <atom:LineEdit atom:CompactSpace.ItemSize="100" PlaceholderText="Minimum"/>
+                    <atom:LineEdit PlaceholderText="~" IsEnabled="False"/>
+                    <atom:LineEdit atom:CompactSpace.ItemSize="100" PlaceholderText="Maximum"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Select DefaultValues="Sign Up">
+                        <atom:SelectOption Header="Sign Up" Content="Sign Up" />
+                        <atom:SelectOption Header="Sign In" Content="Sign In" />
+                    </atom:Select>
+                    <atom:AutoComplete PlaceholderText="Email">
+                        <atom:AutoCompleteOption Header="text 1" Content="text 1"/>
+                        <atom:AutoCompleteOption Header="text 2" Content="text 2"/>
+                    </atom:AutoComplete>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:TimePicker atom:CompactSpace.ItemSize="7*" PlaceholderText="Select Time"/>
+                    <atom:Cascader atom:CompactSpace.ItemSize="7*" PlaceholderText="Select Address">
+                        <atom:CascaderOption Header="Zhejiang" Value="zhejiang">
+                            <atom:CascaderOption Header="Hangzhou" Value="hangzhou">
+                                <atom:CascaderOption Header="West Lake" Value="xihu" />
+                                <atom:CascaderOption Header="Lingyin shi" Value="lingyinshi" />
+                            </atom:CascaderOption>
+                        </atom:CascaderOption>
+                        <atom:CascaderOption Header="Jiangsu" Value="jiangsu">
+                            <atom:CascaderOption Header="Nanjing" Value="nanjing">
+                                <atom:CascaderOption Header="Zhong Hua Men" Value="zhonghuamen" />
+                            </atom:CascaderOption>
+                        </atom:CascaderOption>
+                    </atom:Cascader>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:RangeTimePicker PlaceholderText="Start time" SecondaryPlaceholderText="End time" />
+                    <atom:TreeSelect atom:CompactSpace.ItemSize="7*"
+                                     IsAllowClear="True"
+                                     IsFilterEnabled="True"
+                                     IsDefaultExpandAll="True"
+                                     PlaceholderText="Please select">
+                        <atom:TreeItemNode Header="parent 1" Value="parent 1">
+                            <atom:TreeItemNode Header="parent 1-0" Value="parent 1-0">
+                                <atom:TreeItemNode Header="leaf1" Value="leaf1"/>
+                                <atom:TreeItemNode Header="leaf2" Value="leaf2"/>
+                            </atom:TreeItemNode>
+                            <atom:TreeItemNode Header="parent 1-1" Value="parent 1-1">
+                                <atom:TreeItemNode Header="leaf3" Value="leaf3"/>
+                            </atom:TreeItemNode>
+                        </atom:TreeItemNode>
+                    </atom:TreeSelect>
+                    <atom:Button ButtonType="Primary">Submit</atom:Button>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="5*" />
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit PlaceholderText="input here"/>
+                    <atom:CompactSpaceAddOn Content="$"/>
+                    <atom:NumericUpDown PlaceholderText="another input" atom:CompactSpace.ItemSize="1*"/>
+                    <atom:NumericUpDown PlaceholderText="another input" atom:CompactSpace.ItemSize="1*"/>
+                    <atom:CompactSpaceAddOn Content="$"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="*" />
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:LineEdit PlaceholderText="input here"/>
+                    <atom:ColorPicker DefaultValue="#1677ff"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="*" />
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Button ButtonType="Primary">Button</atom:Button>
+                    <atom:LineEdit PlaceholderText="input here"/>
+                    <atom:CompactSpaceAddOn Content="$"/>
+                    <atom:CompactSpaceFiller atom:CompactSpace.ItemSize="*" />
+                </atom:CompactSpace>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+
+        <gallery:ShowCaseItem Title="Button Compact Mode"
+                              Description="Button component compact example."
+                              IsOccupyEntireRow="True">
+            <StackPanel Spacing="10">
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider LikeOutlined}" atom:ToolTip.Tip="Like"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider CommentOutlined}" atom:ToolTip.Tip="Comment"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider StarOutlined}" atom:ToolTip.Tip="Star"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider HeartOutlined}" atom:ToolTip.Tip="Heart"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider ShareAltOutlined}" atom:ToolTip.Tip="Share"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider DownloadOutlined}" atom:ToolTip.Tip="Download"/>
+                    <atom:DropdownButton TriggerType="Click"
+                                         Placement="BottomEdgeAlignedRight"
+                                         IsShowOpenIndicator="False"
+                                         Icon="{antdicons:AntDesignIconProvider EllipsisOutlined}">
+                        <atom:DropdownButton.DropdownFlyout>
+                            <atom:MenuFlyout>
+                                <atom:MenuItem Header="Report"
+                                               Icon="{antdicons:AntDesignIconProvider Kind=WarningOutlined}" />
+                                <atom:MenuItem Header="Mail"
+                                               Icon="{antdicons:AntDesignIconProvider Kind=MailOutlined}" />
+                                <atom:MenuItem Header="Mobile"
+                                               Icon="{antdicons:AntDesignIconProvider Kind=MobileOutlined}" />
+                            </atom:MenuFlyout>
+                        </atom:DropdownButton.DropdownFlyout>
+                    </atom:DropdownButton>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Button ButtonType="Primary">Button 1</atom:Button>
+                    <atom:Button ButtonType="Primary">Button 2</atom:Button>
+                    <atom:Button ButtonType="Primary">Button 3</atom:Button>
+                    <atom:Button ButtonType="Primary">Button 4</atom:Button>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider DownloadOutlined}" IsEnabled="False" atom:ToolTip.Tip="Tooltip"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider DownloadOutlined}" atom:ToolTip.Tip="Tooltip"/>
+                </atom:CompactSpace>
+        
+                <atom:CompactSpace Orientation="Horizontal" HorizontalAlignment="Stretch">
+                    <atom:Button ButtonType="Default">Button 1</atom:Button>
+                    <atom:Button ButtonType="Default">Button 2</atom:Button>
+                    <atom:Button ButtonType="Default">Button 3</atom:Button>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider DownloadOutlined}" IsEnabled="False" atom:ToolTip.Tip="Tooltip"/>
+                    <atom:Button Icon="{antdicons:AntDesignIconProvider DownloadOutlined}" atom:ToolTip.Tip="Tooltip"/>
+                    <atom:Button ButtonType="Primary">Button 4</atom:Button>
+                    <atom:DropdownButton TriggerType="Click"
+                                         Placement="BottomEdgeAlignedRight"
+                                         IsShowOpenIndicator="False"
+                                         ButtonType="Primary"
+                                         Icon="{antdicons:AntDesignIconProvider EllipsisOutlined}">
+                        <atom:DropdownButton.DropdownFlyout>
+                            <atom:MenuFlyout>
+                                <atom:MenuItem Header="1st item"/>
+                                <atom:MenuItem Header="2nd item"/>
+                                <atom:MenuItem Header="3rd item"/>
+                            </atom:MenuFlyout>
+                        </atom:DropdownButton.DropdownFlyout>
+                    </atom:DropdownButton>
+                </atom:CompactSpace>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+
+        <gallery:ShowCaseItem Title="Vertical Compact Mode"
+                              Description="Vertical Mode for Space.Compact, support Button only."
+                              IsOccupyEntireRow="True">
+            <StackPanel Spacing="10" Orientation="Horizontal">
+                <atom:CompactSpace Orientation="Vertical">
+                    <atom:Button ButtonType="Default">Button 1</atom:Button>
+                    <atom:Button ButtonType="Default">Button 2</atom:Button>
+                    <atom:Button ButtonType="Default">Button 3</atom:Button>
+                </atom:CompactSpace>
+                
+                <atom:CompactSpace Orientation="Vertical">
+                    <atom:Button ButtonType="Dashed">Button 1</atom:Button>
+                    <atom:Button ButtonType="Dashed">Button 2</atom:Button>
+                    <atom:Button ButtonType="Dashed">Button 3</atom:Button>
+                </atom:CompactSpace>
+                
+                <atom:CompactSpace Orientation="Vertical">
+                    <atom:Button ButtonType="Primary">Button 1</atom:Button>
+                    <atom:Button ButtonType="Primary">Button 2</atom:Button>
+                    <atom:Button ButtonType="Primary">Button 3</atom:Button>
+                </atom:CompactSpace>
+            </StackPanel>
+        </gallery:ShowCaseItem>
+    </gallery:ShowCasePanel>
+</UserControl>

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<SpaceViewModel>
+{
+    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;
+                    }
+                }
+            }
+        }
+    }
+}

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";

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 按钮微调器";

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));

controlgallery/AtomUIGallery/Workspace/Views/CaseNavigation.axaml

@@ -35,6 +35,8 @@
                               ItemKey="{x:Static viewmodels:GridViewModel.ID}" />
             <atom:NavMenuNode Header="{gallery:CaseNavigationLangResource Layout_Splitter}"
                               ItemKey="{x:Static viewmodels:SplitterViewModel.ID}" />
+            <atom:NavMenuNode Header="{gallery:CaseNavigationLangResource Layout_Space}"
+                              ItemKey="{x:Static viewmodels:SpaceViewModel.ID}" />
         </atom:NavMenuNode>
 
         <atom:NavMenuNode Header="{gallery:CaseNavigationLangResource Navigation}"