chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: redesign IconButtonDemo.

Browse Source
This commit is contained in:
Zhang Dian
2025-01-24 21:46:45 +08:00
committed by Dong Bin
parent 663bfe70ce
commit 841e0748f2
2 changed files with 139 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
demo/Ursa.Demo/Pages/IconButtonDemo.axaml
View File

@@ -2,113 +2,143 @@
x:Class="Ursa.Demo.Pages.IconButtonDemo" x:Class="Ursa.Demo.Pages.IconButtonDemo"
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa"
d:DesignHeight="450" xmlns:vm="clr-namespace:Ursa.Demo.ViewModels"
xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
d:DesignHeight="NaN"
d:DesignWidth="800" d:DesignWidth="800"
x:DataType="vm:IconButtonDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="16"> <Design.DataContext>
<ToggleSwitch Name="loading" Content="Toggle Loading" /> <vm:IconButtonDemoViewModel />
<u:EnumSelector Name="placement" EnumType="{x:Type common:Position}" /> </Design.DataContext>
<ScrollViewer>
<StackPanel Margin="20" Spacing="8" HorizontalAlignment="Left" Width="500">
<Border Theme="{StaticResource CardBorder}">
<StackPanel Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton Icon="🐼" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton <u:IconButton
Content="Hello World" Icon="{StaticResource SemiIconCamera}" />
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}" />
<u:IconButton <u:IconButton
Content="Hello Panda" Classes="Secondary"
IconPlacement="{Binding #placement.Value}" Icon="{StaticResource SemiIconCamera}" />
IsLoading="{Binding #loading.IsChecked}">
<u:IconButton.Icon>
<TextBlock
HorizontalAlignment="Center"
FontSize="40"
Text="🐼" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton <u:IconButton
Content="GitHub"
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}">
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton
Width="150"
Content="GitHub"
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}">
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton
Width="150"
Classes="Warning" Classes="Warning"
Content="GitHub" Icon="{StaticResource SemiIconCamera}" />
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}">
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton
Width="150"
Content="GitHub"
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}"
Theme="{DynamicResource SolidIconButton}">
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton
Width="150"
Classes="Warning"
Content="GitHub"
IconPlacement="{Binding #placement.Value}"
IsLoading="{Binding #loading.IsChecked}"
Theme="{DynamicResource SolidIconButton}">
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton <u:IconButton
Classes="Danger" Classes="Danger"
IsLoading="{Binding #loading.IsChecked}" Icon="{StaticResource SemiIconCamera}" />
Theme="{DynamicResource SolidIconButton}"> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton
Theme="{StaticResource SolidIconButton}"
Icon="{StaticResource SemiIconCamera}" />
<u:IconButton
Icon="{StaticResource SemiIconCamera}" />
<u:IconButton
Theme="{StaticResource BorderlessIconButton}"
Icon="{StaticResource SemiIconCamera}" />
<u:IconButton
Theme="{StaticResource OutlineIconButton}"
Icon="{StaticResource SemiIconCamera}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton
Theme="{StaticResource SolidIconButton}"
Icon="{StaticResource SemiIconSidebar}"
Content="收起" />
<u:IconButton
Theme="{StaticResource SolidIconButton}"
IconPlacement="Right"
Icon="{StaticResource SemiIconChevronDown}"
Content="展开选项" />
</StackPanel>
</StackPanel>
</Border>
<Border Theme="{StaticResource CardBorder}">
<StackPanel Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock
VerticalAlignment="Center"
Text="加载态"
FontWeight="Bold" />
<ToggleSwitch
Theme="{StaticResource SimpleToggleSwitch}"
IsChecked="{Binding IsLoading}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton
IsLoading="{Binding IsLoading}"
Content="保存" />
<u:IconButton
Classes="Danger"
Icon="{StaticResource SemiIconDelete}"
IsLoading="{Binding IsLoading}"
Content="删除" />
<u:IconButton
Width="200"
Theme="{StaticResource SolidIconButton}"
Classes="Warning"
IsLoading="{Binding IsLoading}"
Content="撤销" />
</StackPanel>
</StackPanel>
</Border>
<Border Theme="{StaticResource CardBorder}">
<StackPanel Spacing="8">
<u:EnumSelector
Width="100"
EnumType="common:Position"
Value="{Binding SelectedPosition}" />
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Icon="{StaticResource SemiIconCamera}"
Content="Hello Camera" />
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Icon="🐼"
Content="Hello Panda" />
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Content="Hello Panda">
<u:IconButton.Icon> <u:IconButton.Icon>
<TextBlock <TextBlock
HorizontalAlignment="Center"
FontSize="40" FontSize="40"
HorizontalAlignment="Center"
Text="🐼" /> Text="🐼" />
</u:IconButton.Icon> </u:IconButton.Icon>
</u:IconButton> </u:IconButton>
<u:IconButton <u:IconButton
IsLoading="{Binding #loading.IsChecked}" IconPlacement="{Binding SelectedPosition}"
Icon="🐼" Theme="{StaticResource SolidIconButton}"
Content="Borderless" Classes="Danger Large">
Theme="{DynamicResource BorderlessIconButton}"> <u:IconButton.Icon>
<TextBlock FontSize="40" Text="🐼" />
</u:IconButton.Icon>
</u:IconButton> </u:IconButton>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton <u:IconButton
IsLoading="{Binding #loading.IsChecked}" IconPlacement="{Binding SelectedPosition}"
Icon="🐼" Theme="{StaticResource SolidIconButton}"
Content="Outline" Classes="Danger Large"
Theme="{DynamicResource OutlineIconButton}"> Icon="{StaticResource SemiIconCamera}" />
</u:IconButton> <u:IconButton
IconPlacement="{Binding SelectedPosition}"
Theme="{StaticResource SolidIconButton}"
Classes="Danger Large"
Icon="🐼" />
</StackPanel> </StackPanel>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</UserControl> </UserControl>

5
demo/Ursa.Demo/ViewModels/IconButtonDemoViewModel.cs
View File

@@ -1,7 +1,10 @@
using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.ComponentModel;
using Ursa.Common;
namespace Ursa.Demo.ViewModels; namespace Ursa.Demo.ViewModels;
public class IconButtonDemoViewModel : ObservableObject public partial class IconButtonDemoViewModel : ObservableObject
{ {
[ObservableProperty] private bool _isLoading;
[ObservableProperty] private Position _selectedPosition;
} }