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

feat: more precise selector.

Browse Source
This commit is contained in:
Zhang Dian
2024-02-26 18:13:08 +08:00
parent 8f4c727d5e
commit cb97373643
2 changed files with 91 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
demo/Ursa.Demo/Pages/BadgeDemo.axaml
View File

@@ -109,96 +109,96 @@
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Primary"> <u:Badge Header="URSA" Classes="Primary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Secondary"> <u:Badge Header="URSA" Classes="Secondary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Tertiary"> <u:Badge Header="URSA" Classes="Tertiary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Success"> <u:Badge Header="URSA" Classes="Success">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Warning"> <u:Badge Header="URSA" Classes="Warning">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Danger"> <u:Badge Header="URSA" Classes="Danger">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Light Primary"> <u:Badge Header="URSA" Classes="Light Primary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Secondary"> <u:Badge Header="URSA" Classes="Light Secondary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Tertiary"> <u:Badge Header="URSA" Classes="Light Tertiary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Success"> <u:Badge Header="URSA" Classes="Light Success">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Warning"> <u:Badge Header="URSA" Classes="Light Warning">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Danger"> <u:Badge Header="URSA" Classes="Light Danger">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Inverted Primary"> <u:Badge Header="URSA" Classes="Inverted Primary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Secondary"> <u:Badge Header="URSA" Classes="Inverted Secondary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Tertiary"> <u:Badge Header="URSA" Classes="Inverted Tertiary">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Success"> <u:Badge Header="URSA" Classes="Inverted Success">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Warning"> <u:Badge Header="URSA" Classes="Inverted Warning">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Danger"> <u:Badge Header="URSA" Classes="Inverted Danger">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
@@ -208,7 +208,7 @@
Classes="Primary" Classes="Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -216,7 +216,7 @@
Classes="Secondary" Classes="Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -224,7 +224,7 @@
Classes="Tertiary" Classes="Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -232,7 +232,7 @@
Classes="Success" Classes="Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -240,7 +240,7 @@
Classes="Warning" Classes="Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -248,7 +248,7 @@
Classes="Danger" Classes="Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Solid"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
@@ -258,7 +258,7 @@
Classes="Light Primary" Classes="Light Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -266,7 +266,7 @@
Classes="Light Secondary" Classes="Light Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -274,7 +274,7 @@
Classes="Light Tertiary" Classes="Light Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -282,7 +282,7 @@
Classes="Light Success" Classes="Light Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -290,7 +290,7 @@
Classes="Light Warning" Classes="Light Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -298,7 +298,7 @@
Classes="Light Danger" Classes="Light Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Light"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
@@ -309,7 +309,7 @@
Classes="Inverted Primary" Classes="Inverted Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -317,7 +317,7 @@
Classes="Inverted Secondary" Classes="Inverted Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -325,7 +325,7 @@
Classes="Inverted Tertiary" Classes="Inverted Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -333,7 +333,7 @@
Classes="Inverted Success" Classes="Inverted Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -341,7 +341,7 @@
Classes="Inverted Warning" Classes="Inverted Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
@@ -349,7 +349,7 @@
Classes="Inverted Danger" Classes="Inverted Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <Border Width="100" Height="50">
<TextBlock Text="■■■"/> <TextBlock Text="Inverted"/>
</Border> </Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>

80
src/Ursa.Themes.Semi/Controls/Badge.axaml
View File

@@ -33,7 +33,7 @@
VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{DynamicResource BadgeContentForeground}"/> Foreground="{DynamicResource BadgeContentForeground}" />
<Border <Border
Name="{x:Static u:Badge.PART_BadgeContainer}" Name="{x:Static u:Badge.PART_BadgeContainer}"
MinWidth="{DynamicResource BadgeMinWidth}" MinWidth="{DynamicResource BadgeMinWidth}"
@@ -83,7 +83,7 @@
VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{DynamicResource BadgeContentForeground}"/> Foreground="{DynamicResource BadgeContentForeground}" />
<Border <Border
Name="{x:Static u:Badge.PART_BadgeContainer}" Name="{x:Static u:Badge.PART_BadgeContainer}"
Width="{DynamicResource BadgeDotWidth}" Width="{DynamicResource BadgeDotWidth}"
@@ -118,69 +118,95 @@
<Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="VerticalAlignment" Value="Bottom" />
</Style> </Style>
<Style Selector="^.Primary"> <Style Selector="^.Primary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Secondary"> <Style Selector="^.Secondary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Tertiary"> <Style Selector="^.Tertiary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Success"> <Style Selector="^.Success /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Warning"> <Style Selector="^.Warning /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeWarningBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Danger"> <Style Selector="^.Danger /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeDangerBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
</Style> </Style>
<Style Selector="^.Light"> <Style Selector="^.Light">
<Style Selector="^.Primary"> <Style Selector="^.Primary">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
</Style>
</Style> </Style>
<Style Selector="^.Secondary"> <Style Selector="^.Secondary">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
</Style>
</Style> </Style>
<Style Selector="^.Tertiary"> <Style Selector="^.Tertiary">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
</Style>
</Style> </Style>
<Style Selector="^.Success"> <Style Selector="^.Success">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
</Style>
</Style> </Style>
<Style Selector="^.Warning"> <Style Selector="^.Warning">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
</Style>
</Style> </Style>
<Style Selector="^.Danger"> <Style Selector="^.Danger">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" /> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
</Style>
</Style> </Style>
</Style> </Style>
<Style Selector="^.Inverted"> <Style Selector="^.Inverted">
<Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" /> <Style Selector="^/template/ Border#PART_BadgeContainer">
<Style Selector="^.Primary"> <Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
</Style>
<Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
</Style> </Style>
<Style Selector="^.Secondary"> <Style Selector="^.Secondary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
</Style> </Style>
<Style Selector="^.Tertiary"> <Style Selector="^.Tertiary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
</Style> </Style>
<Style Selector="^.Success"> <Style Selector="^.Success /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
</Style> </Style>
<Style Selector="^.Warning"> <Style Selector="^.Warning /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
</Style> </Style>
<Style Selector="^.Danger"> <Style Selector="^.Danger /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
</Style> </Style>
</Style> </Style>