misc: update overview page.

This commit is contained in:
rabbitism 2022-12-13 15:20:56 +08:00
parent 1f6f1bb0f8
commit f1a15f47ee
3 changed files with 87 additions and 32 deletions

View File

@ -2,4 +2,13 @@
Avalonia Theme inspired by Semi Design
![Cover](./docs/cover.png)
> Semi.Avalonia is still in very early stage. Please don't use in production.
>
> Dark theme is not designed at all. Please don't use that.
![Cover](./docs/cover.png)
## Requirement
Avalonia V11

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -5,38 +5,84 @@
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel Margin="10" Spacing="5">
<TextBlock
Classes="H6" Text="Welcome to Semi Avalonia"
Classes="H4" Text="Welcome to Semi Avalonia" HorizontalAlignment="Center"
Theme="{StaticResource TitleTextBlock}" />
<Border Theme="{StaticResource CardBorder}">
<StackPanel Orientation="Horizontal">
<StackPanel>
<RadioButton>Option 1</RadioButton>
<RadioButton>Option 2</RadioButton>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">主要按钮</Button>
<Button Classes="Secondary">次要按钮</Button>
<Button Classes="Tertiary">第三按钮</Button>
<Button Classes="Warning">警告按钮</Button>
<Button Classes="Danger">危险按钮</Button>
<Button Classes="Primary" IsEnabled="False">禁用按钮</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
<Button Classes="Primary" IsEnabled="False" Theme="{DynamicResource SolidButton}">Danger</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<Label Theme="{StaticResource TagLabel}">Label</Label>
<Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
<Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
<Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 0 16 0">
<RadioButton Margin="0 0 8 0">Option 1</RadioButton>
<RadioButton>Option 2</RadioButton>
</StackPanel>
<Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Theme="{StaticResource ButtonRadioButton}" IsChecked="True">选项 1</RadioButton>
<RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
</StackPanel>
<Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
<RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
</StackPanel>
</Border>
</StackPanel>
</Border>
<Border Theme="{StaticResource CardBorder}">
<StackPanel Orientation="Horizontal">
<CheckBox>Avalonia</CheckBox>
<CheckBox>WPF</CheckBox>
</StackPanel>
</Border>
<Border Theme="{StaticResource CardBorder}">
<StackPanel Orientation="Horizontal">
<Button Classes="Primary">Primary</Button>
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
<Button Classes="Warning">Warning</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
</StackPanel>
</Border>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">Option 1</TextBlock>
<TextBlock Classes="Tertiary">Description 1</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="4" Theme="{StaticResource CardRadioButton}" IsChecked="True">
<StackPanel>
<TextBlock FontWeight="Bold">Option 2</TextBlock>
<TextBlock Classes="Tertiary">Description 2</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Margin="0 0 8 0 ">Avalonia</CheckBox>
<CheckBox Margin="0 0 8 0 " IsChecked="True">WPF</CheckBox>
<CheckBox IsThreeState="True" IsChecked="{x:Null}">UWP</CheckBox>
</StackPanel>
<TabControl>
<TabItem Header="Tab 1" >
<TextBlock Margin="8">Tab Content 1</TextBlock>
</TabItem>
<TabItem Header="Tab 2" ><TextBlock Margin="8">Tab Content 2</TextBlock></TabItem>
<TabItem Header="Tab 3" ><TextBlock Margin="8">Tab Content 3</TextBlock></TabItem>
</TabControl>
<Grid ColumnDefinitions="* * *">
<Border Theme="{StaticResource CardBorder}">
<TextBlock>Card</TextBlock>
</Border>
<Border Grid.Column="1" Classes="Hover" Theme="{StaticResource CardBorder}">
<TextBlock>Shadow on hover</TextBlock>
</Border>
<Border Grid.Column="2" Classes="Shadow" Theme="{StaticResource CardBorder}">
<TextBlock>Shadow</TextBlock>
</Border>
</Grid>
</StackPanel>
</UserControl>