zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update overview page and checkbox/radiobutton samples.

Browse Source
This commit is contained in:
rabbitism 2023-07-25 13:35:58 +08:00
parent 52f2b6503f
commit ead6e07b24
4 changed files with 149 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
View File

@ -47,126 +47,79 @@
IsThreeState="True" IsThreeState="True"
Theme="{StaticResource SimpleCheckBox}" /> Theme="{StaticResource SimpleCheckBox}" />
</StackPanel> </StackPanel>
<TextBlock Margin="0,16" Text="CardCheckBox" /> <TextBlock Text="CardCheckBox" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<CheckBox Width="300" Theme="{DynamicResource CardCheckBox}"> <StackPanel.Styles>
<StackPanel> <Style Selector="CheckBox">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <Setter Property="Width" Value="150" />
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <Setter Property="Margin" Value="8" />
</StackPanel> </Style>
</CheckBox> </StackPanel.Styles>
<CheckBox <CheckBox
Width="300" Content="Windows"
IsChecked="True" IsChecked="True"
Theme="{DynamicResource CardCheckBox}"> Theme="{DynamicResource CardCheckBox}" />
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox <CheckBox
Width="300" Content="macOS"
IsChecked="True"
IsEnabled="False"
Theme="{DynamicResource CardCheckBox}" />
<CheckBox
Content="Linux"
IsChecked="True"
Theme="{DynamicResource CardCheckBox}" />
<CheckBox
Content="iOS"
IsChecked="{x:Null}" IsChecked="{x:Null}"
IsThreeState="True" IsThreeState="True"
Theme="{DynamicResource CardCheckBox}"> Theme="{DynamicResource CardCheckBox}" />
<StackPanel> <CheckBox
<TextBlock FontWeight="Bold">复选框标题</TextBlock> Content="Android"
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> IsChecked="{x:Null}"
</StackPanel> IsThreeState="True"
</CheckBox> Theme="{DynamicResource CardCheckBox}" />
<CheckBox
Content="Wasm"
IsChecked="False"
IsThreeState="True"
Theme="{DynamicResource CardCheckBox}" />
</StackPanel> </StackPanel>
<TextBlock Text="PureCardCheckBox" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<StackPanel.Styles>
<Style Selector="CheckBox">
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="8" />
</Style>
</StackPanel.Styles>
<CheckBox <CheckBox
Width="300" Content="Windows"
IsEnabled="False" IsChecked="True"
Theme="{DynamicResource CardCheckBox}"> Theme="{DynamicResource PureCardCheckBox}" />
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox <CheckBox
Width="300" Content="macOS"
IsChecked="True" IsChecked="True"
IsEnabled="False" IsEnabled="False"
Theme="{DynamicResource CardCheckBox}"> Theme="{DynamicResource PureCardCheckBox}" />
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox <CheckBox
Width="300" Content="Linux"
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True"
Theme="{DynamicResource CardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
</StackPanel>
<TextBlock Margin="0,16" Text="PureCardCheckBox" />
<StackPanel Orientation="Horizontal">
<CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="True" IsChecked="True"
Theme="{DynamicResource PureCardCheckBox}"> Theme="{DynamicResource PureCardCheckBox}" />
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox <CheckBox
Width="300" Content="iOS"
IsChecked="{x:Null}" IsChecked="{x:Null}"
IsEnabled="True"
IsThreeState="True" IsThreeState="True"
Theme="{DynamicResource PureCardCheckBox}"> Theme="{DynamicResource PureCardCheckBox}" />
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox <CheckBox
Width="300" Content="Android"
IsEnabled="False"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="True"
IsEnabled="False"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="{x:Null}" IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True" IsThreeState="True"
Theme="{DynamicResource PureCardCheckBox}"> Theme="{DynamicResource PureCardCheckBox}" />
<StackPanel> <CheckBox
<TextBlock FontWeight="Bold">复选框标题</TextBlock> Content="Wasm"
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> IsChecked="False"
</StackPanel> IsThreeState="True"
</CheckBox> Theme="{DynamicResource PureCardCheckBox}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>

60
demo/Semi.Avalonia.Demo/Pages/Overview.axaml
View File

@ -4,6 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml" xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1000" d:DesignHeight="1000"
d:DesignWidth="1920" d:DesignWidth="1920"
@ -335,18 +336,53 @@
Classes="H5" Classes="H5"
Text="Start to install" Text="Start to install"
Theme="{DynamicResource TitleTextBlock}" /> Theme="{DynamicResource TitleTextBlock}" />
<TextBlock Text="Install via nuget: " /> <TabControl Padding="8">
<Border Margin="0,16" Classes="CodeBlock"> <TabItem Header="Main">
<SelectableTextBlock FontFamily="Consolas" Text="dotnet add package Semi.Avalonia --version 0.1.0-preview8" /> <StackPanel>
</Border> <TextBlock Text="Install via nuget: " />
<TextBlock Text="Reference styles: " /> <Border Margin="0,16" Classes="CodeBlock">
<Border Margin="0,16" Classes="CodeBlock"> <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
<StackPanel> </Border>
<SelectableTextBlock FontFamily="Consolas" Text="&lt;Application.Styles&gt;" /> <TextBlock Text="Reference styles: " />
<SelectableTextBlock FontFamily="Consolas" Text=" &lt;StyleInclude Source=&quot;avares://Semi.Avalonia/Themes/Index.axaml&quot; /&gt;" /> <Border Margin="0,16" Classes="CodeBlock">
<SelectableTextBlock FontFamily="Consolas" Text="&lt;/Application.Styles&gt;" /> <SelectableTextBlock
</StackPanel> FontFamily="Consolas"
</Border> Text="{Binding $parent[local:Overview].MainStyle}"
TextWrapping="Wrap" />
</Border>
</StackPanel>
</TabItem>
<TabItem Header="DataGrid">
<StackPanel>
<TextBlock Text="Install via nuget: " />
<Border Margin="0,16" Classes="CodeBlock">
<SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
</Border>
<TextBlock Text="Reference styles: " />
<Border Margin="0,16" Classes="CodeBlock">
<SelectableTextBlock
FontFamily="Consolas"
Text="{Binding $parent[local:Overview].DataGridStyle}"
TextWrapping="Wrap" />
</Border>
</StackPanel>
</TabItem>
<TabItem Header="ColorPicker">
<StackPanel>
<TextBlock Text="Install via nuget: " />
<Border Margin="0,16" Classes="CodeBlock">
<SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
</Border>
<TextBlock Text="Reference styles: " />
<Border Margin="0,16" Classes="CodeBlock">
<SelectableTextBlock
FontFamily="Consolas"
Text="{Binding $parent[local:Overview].ColorPickerStyle}"
TextWrapping="Wrap" />
</Border>
</StackPanel>
</TabItem>
</TabControl>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>

24
demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
View File

@ -12,4 +12,28 @@ public partial class Overview : UserControl
{ {
InitializeComponent(); InitializeComponent();
} }
public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.0.0";
public string MainStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
</Application.Styles>
""";
public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.0.0";
public string DataGridStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
</Application.Styles>
""";
public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.0.0";
public string ColorPickerStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
</Application.Styles>
""";
} }

75
demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
View File

@ -107,81 +107,54 @@
</StackPanel> </StackPanel>
<TextBlock Text="Radio Button as Card" /> <TextBlock Text="Radio Button as Card" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton <RadioButton
Width="300" Width="300"
Content="Avalonia"
IsChecked="True" IsChecked="True"
Theme="{DynamicResource CardRadioButton}"> Theme="{DynamicResource CardRadioButton}" />
<StackPanel> <RadioButton
<TextBlock FontWeight="Bold">单选框标题</TextBlock> Width="300"
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> Content="WPF"
</StackPanel> IsChecked="True"
</RadioButton> Theme="{DynamicResource CardRadioButton}" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton <RadioButton
Width="300" Width="300"
Content="Avalonia"
IsEnabled="False" IsEnabled="False"
Theme="{DynamicResource CardRadioButton}"> Theme="{DynamicResource CardRadioButton}" />
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton <RadioButton
Width="300" Width="300"
Content="WPF"
IsChecked="True" IsChecked="True"
IsEnabled="False" IsEnabled="False"
Theme="{DynamicResource CardRadioButton}"> Theme="{DynamicResource CardRadioButton}" />
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel> </StackPanel>
<TextBlock Text="Radio Button as Pure Card" /> <TextBlock Text="Radio Button as Pure Card" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton <RadioButton
Width="300" Width="300"
Content="Avalonia"
IsChecked="True" IsChecked="True"
Theme="{DynamicResource PureCardRadioButton}"> Theme="{DynamicResource PureCardRadioButton}" />
<StackPanel> <RadioButton
<TextBlock FontWeight="Bold">单选框标题</TextBlock> Width="300"
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> Content="WPF"
</StackPanel> Theme="{DynamicResource PureCardRadioButton}" />
</RadioButton>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton <RadioButton
Width="300" Width="300"
IsEnabled="False" Content="Avalonia"
Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton
Width="300"
IsChecked="True" IsChecked="True"
IsEnabled="False" IsEnabled="False"
Theme="{DynamicResource PureCardRadioButton}"> Theme="{DynamicResource PureCardRadioButton}" />
<StackPanel> <RadioButton
<TextBlock FontWeight="Bold">单选框标题</TextBlock> Width="300"
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> Content="WPF"
</StackPanel> IsEnabled="False"
</RadioButton> Theme="{DynamicResource PureCardRadioButton}" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>