feat: Button Outline theme & colors.

* add Outline Theme to Button.
* :disabled, Tertiary Classes Button color.
This commit is contained in:
Zhang Dian
2024-07-22 20:48:04 +08:00
parent d41d1ff9d4
commit 2b37df580f
12 changed files with 434 additions and 147 deletions

View File

@@ -17,7 +17,7 @@
<ToggleButton Classes="Success">Success</ToggleButton>
<ToggleButton Classes="Warning">Warning</ToggleButton>
<ToggleButton Classes="Danger">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Checked State" />
<StackPanel Orientation="Horizontal" Spacing="20">
@@ -28,18 +28,71 @@
<ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
<ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="True"
IsEnabled="False">
Disabled
</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Three State" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
<ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
<ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
<ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
<ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
<ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
<ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
<ToggleButton
Classes="Primary"
IsChecked="{x:Null}"
IsThreeState="True">
Primary
</ToggleButton>
<ToggleButton
Classes="Secondary"
IsChecked="{x:Null}"
IsThreeState="True">
Secondary
</ToggleButton>
<ToggleButton
Classes="Tertiary"
IsChecked="{x:Null}"
IsThreeState="True">
Tertiary
</ToggleButton>
<ToggleButton
Classes="Success"
IsChecked="{x:Null}"
IsThreeState="True">
Success
</ToggleButton>
<ToggleButton
Classes="Warning"
IsChecked="{x:Null}"
IsThreeState="True">
Warning
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsThreeState="True">
Danger
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True">
Disabled
</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Disabled State" />
<StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
<ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
<ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
<ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Size" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
<ToggleButton IsThreeState="True">Default</ToggleButton>
<ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
</StackPanel>
</StackPanel>
</UserControl>