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

240
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>
<u:IconButton <ScrollViewer>
Content="Hello World" <StackPanel Margin="20" Spacing="8" HorizontalAlignment="Left" Width="500">
IconPlacement="{Binding #placement.Value}" <Border Theme="{StaticResource CardBorder}">
IsLoading="{Binding #loading.IsChecked}" /> <StackPanel Spacing="8">
<u:IconButton <StackPanel Orientation="Horizontal" Spacing="8">
Content="Hello Panda" <u:IconButton Icon="🐼" />
IconPlacement="{Binding #placement.Value}" <u:IconButton Icon="{StaticResource SemiIconCamera}" />
IsLoading="{Binding #loading.IsChecked}"> <u:IconButton Icon="{StaticResource SemiIconCamera}" IsEnabled="False" />
<u:IconButton.Icon> </StackPanel>
<TextBlock <StackPanel Orientation="Horizontal" Spacing="8">
HorizontalAlignment="Center" <u:IconButton
FontSize="40" Icon="{StaticResource SemiIconCamera}" />
Text="🐼" /> <u:IconButton
</u:IconButton.Icon> Classes="Secondary"
</u:IconButton> Icon="{StaticResource SemiIconCamera}" />
<u:IconButton <u:IconButton
Content="GitHub" Classes="Warning"
IconPlacement="{Binding #placement.Value}" Icon="{StaticResource SemiIconCamera}" />
IsLoading="{Binding #loading.IsChecked}"> <u:IconButton
<u:IconButton.Icon> Classes="Danger"
<PathIcon Icon="{StaticResource SemiIconCamera}" />
Theme="{StaticResource InnerPathIcon}" </StackPanel>
Data="{StaticResource SemiIconGithubLogo}" /> <StackPanel Orientation="Horizontal" Spacing="8">
</u:IconButton.Icon> <u:IconButton
</u:IconButton> Theme="{StaticResource SolidIconButton}"
<u:IconButton Icon="{StaticResource SemiIconCamera}" />
Width="150" <u:IconButton
Content="GitHub" Icon="{StaticResource SemiIconCamera}" />
IconPlacement="{Binding #placement.Value}" <u:IconButton
IsLoading="{Binding #loading.IsChecked}"> Theme="{StaticResource BorderlessIconButton}"
<u:IconButton.Icon> Icon="{StaticResource SemiIconCamera}" />
<PathIcon <u:IconButton
Theme="{StaticResource InnerPathIcon}" Theme="{StaticResource OutlineIconButton}"
Data="{StaticResource SemiIconGithubLogo}" /> Icon="{StaticResource SemiIconCamera}" />
</u:IconButton.Icon> </StackPanel>
</u:IconButton> <StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton <u:IconButton
Width="150" Theme="{StaticResource SolidIconButton}"
Classes="Warning" Icon="{StaticResource SemiIconSidebar}"
Content="GitHub" Content="收起" />
IconPlacement="{Binding #placement.Value}" <u:IconButton
IsLoading="{Binding #loading.IsChecked}"> Theme="{StaticResource SolidIconButton}"
<u:IconButton.Icon> IconPlacement="Right"
<PathIcon Icon="{StaticResource SemiIconChevronDown}"
Theme="{StaticResource InnerPathIcon}" Content="展开选项" />
Data="{StaticResource SemiIconGithubLogo}" /> </StackPanel>
</u:IconButton.Icon> </StackPanel>
</u:IconButton> </Border>
<u:IconButton
Width="150" <Border Theme="{StaticResource CardBorder}">
Content="GitHub" <StackPanel Spacing="8">
IconPlacement="{Binding #placement.Value}" <StackPanel Orientation="Horizontal" Spacing="8">
IsLoading="{Binding #loading.IsChecked}" <TextBlock
Theme="{DynamicResource SolidIconButton}"> VerticalAlignment="Center"
<u:IconButton.Icon> Text="加载态"
<PathIcon FontWeight="Bold" />
Theme="{StaticResource InnerPathIcon}" <ToggleSwitch
Data="{StaticResource SemiIconGithubLogo}" /> Theme="{StaticResource SimpleToggleSwitch}"
</u:IconButton.Icon> IsChecked="{Binding IsLoading}" />
</u:IconButton> </StackPanel>
<u:IconButton <StackPanel Orientation="Horizontal" Spacing="8">
Width="150" <u:IconButton
Classes="Warning" IsLoading="{Binding IsLoading}"
Content="GitHub" Content="保存" />
IconPlacement="{Binding #placement.Value}" <u:IconButton
IsLoading="{Binding #loading.IsChecked}" Classes="Danger"
Theme="{DynamicResource SolidIconButton}"> Icon="{StaticResource SemiIconDelete}"
<u:IconButton.Icon> IsLoading="{Binding IsLoading}"
<PathIcon Content="删除" />
Theme="{StaticResource InnerPathIcon}" <u:IconButton
Data="{StaticResource SemiIconGithubLogo}" /> Width="200"
</u:IconButton.Icon> Theme="{StaticResource SolidIconButton}"
</u:IconButton> Classes="Warning"
<u:IconButton IsLoading="{Binding IsLoading}"
Classes="Danger" Content="撤销" />
IsLoading="{Binding #loading.IsChecked}" </StackPanel>
Theme="{DynamicResource SolidIconButton}"> </StackPanel>
<u:IconButton.Icon> </Border>
<TextBlock
HorizontalAlignment="Center" <Border Theme="{StaticResource CardBorder}">
FontSize="40" <StackPanel Spacing="8">
Text="🐼" /> <u:EnumSelector
</u:IconButton.Icon> Width="100"
</u:IconButton> EnumType="common:Position"
Value="{Binding SelectedPosition}" />
<u:IconButton <u:IconButton
IsLoading="{Binding #loading.IsChecked}" IconPlacement="{Binding SelectedPosition}"
Icon="🐼" Icon="{StaticResource SemiIconCamera}"
Content="Borderless" Content="Hello Camera" />
Theme="{DynamicResource BorderlessIconButton}"> <u:IconButton
</u:IconButton> IconPlacement="{Binding SelectedPosition}"
Icon="🐼"
<u:IconButton Content="Hello Panda" />
IsLoading="{Binding #loading.IsChecked}" <u:IconButton
Icon="🐼" IconPlacement="{Binding SelectedPosition}"
Content="Outline" Content="Hello Panda">
Theme="{DynamicResource OutlineIconButton}"> <u:IconButton.Icon>
</u:IconButton> <TextBlock
</StackPanel> FontSize="40"
</UserControl> HorizontalAlignment="Center"
Text="🐼" />
</u:IconButton.Icon>
</u:IconButton>
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Theme="{StaticResource SolidIconButton}"
Classes="Danger Large">
<u:IconButton.Icon>
<TextBlock FontSize="40" Text="🐼" />
</u:IconButton.Icon>
</u:IconButton>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Theme="{StaticResource SolidIconButton}"
Classes="Danger Large"
Icon="{StaticResource SemiIconCamera}" />
<u:IconButton
IconPlacement="{Binding SelectedPosition}"
Theme="{StaticResource SolidIconButton}"
Classes="Danger Large"
Icon="🐼" />
</StackPanel>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</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;
} }