feat: intro page.

demo/Ursa.Demo/Pages/IntroductionDemo.axaml

@@ -10,6 +10,9 @@
     d:DesignHeight="800"
     d:DesignWidth="1600"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <vm:IntroductionDemoViewModel />
+    </Design.DataContext>
     <UserControl.Resources>
         <PathGeometry x:Key="InfoPath">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z</PathGeometry>
         <SolidColorBrush x:Key="MaskBackground" Opacity="0.2" Color="{DynamicResource SemiRed5Color}" />
@@ -74,7 +77,7 @@
                 Height="300"
                 Scale="0.2"
                 Background="{DynamicResource SemiGrey1Color}"
-                Source="../Assets/WORLD.png">
+                Source="../Assets/IRIHI.png">
                 <u:ImageViewer.Overlayer>
                     <Grid
                         HorizontalAlignment="Stretch"
@@ -113,6 +116,46 @@
                     OnContent="Show Mask"
                     OffContent="Show Mask" />
             </u:Divider>
+            <Grid ColumnDefinitions="*,Auto,*">
+                <StackPanel Grid.Column="0" Spacing="20">
+                    <u:IPv4Box HorizontalAlignment="Stretch" />
+                    <u:IPv4Box HorizontalAlignment="Stretch" InputMode="Fast" />
+                    <RepeatButton Command="{Binding ChangeAddress}" Content="Random" />
+                    <u:IPv4Box HorizontalAlignment="Stretch"
+                               ShowLeadingZero="True"
+                               IPAddress="{Binding Address}" />
+                    <u:IPv4Box HorizontalAlignment="Stretch" IsEnabled="False" />
+                </StackPanel>
+                <u:Timeline Grid.Column="1">
+                    <u:TimelineItem
+                        Content="ToDo"
+                        ItemType="Default"
+                        Time="2022-01-01" />
+                    <u:TimelineItem
+                        Content="Start"
+                        ItemType="Ongoing"
+                        Time="2022-01-02" />
+                    <u:TimelineItem
+                        Content="In between"
+                        ItemType="Success"
+                        Time="2022-01-03" />
+                    <u:TimelineItem
+                        Content="In between"
+                        ItemType="Warning"
+                        Time="2022-01-04" />
+                    <u:TimelineItem
+                        Content="Finished"
+                        ItemType="Error"
+                        Time="2022-01-05" />
+                </u:Timeline>
+                <StackPanel Grid.Column="2" Spacing="20">
+                    <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
+                    <u:ButtonGroup Classes="Primary" ItemsSource="{Binding ButtonGroupItems}" />
+                    <u:ButtonGroup Classes="Primary Borderless" ItemsSource="{Binding ButtonGroupItems}" />
+                    <u:ButtonGroup Classes="Primary Large" ItemsSource="{Binding ButtonGroupItems}" />
+                    <u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding ButtonGroupItems}" />
+                </StackPanel>
+            </Grid>
         </StackPanel>
 
         <StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
@@ -163,12 +206,12 @@
             </WrapPanel>
 
             <u:Divider>DualBadge</u:Divider>
-            <StackPanel Orientation="Horizontal">
+            <WrapPanel Orientation="Horizontal">
-                <StackPanel.Styles>
+                <WrapPanel.Styles>
                     <Style Selector="u|DualBadge">
                         <Setter Property="Margin" Value="4" />
                     </Style>
-                </StackPanel.Styles>
+                </WrapPanel.Styles>
 
                 <u:DualBadge Header="downloads">
                     <u:DualBadge.Icon>
@@ -197,27 +240,46 @@
                     </u:DualBadge.Icon>
                     2.4k
                 </u:DualBadge>
-            </StackPanel>
+                <u:DualBadge Classes="ForTheBadge" Header="downloads">
+                    <u:DualBadge.Icon>
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{StaticResource InfoPath}" />
+                    </u:DualBadge.Icon>
+                    2.4k
+                </u:DualBadge>
+            </WrapPanel>
 
             <u:Divider HorizontalContentAlignment="Left">
                 <ToggleSwitch
                     Name="s"
-                    OffContent="ButtonGroup"
+                    OffContent="Divider"
-                    OnContent="ButtonGroup"
+                    OnContent="Divider"
                     IsChecked="True" />
             </u:Divider>
             <u:LoadingContainer
                 IsLoading="{Binding #s.IsChecked}"
+                HorizontalContentAlignment="Stretch"
                 LoadingMessage="Loading...">
-                <StackPanel>
+                <StackPanel Spacing="20">
-                    <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
+                    <StackPanel Orientation="Horizontal">
-                    <u:ButtonGroup Classes="Primary" ItemsSource="{Binding ButtonGroupItems}" />
+                        <TextBlock Text="Windows" />
-                    <u:ButtonGroup Classes="Primary Borderless" ItemsSource="{Binding ButtonGroupItems}" />
+                        <u:Divider Margin="12,0" Orientation="Vertical" />
-                    <u:ButtonGroup Classes="Primary Large" ItemsSource="{Binding ButtonGroupItems}" />
+                        <TextBlock Text="macOS" />
-                    <u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding ButtonGroupItems}" />
+                        <u:Divider Orientation="Vertical" />
+                        <TextBlock Text="Linux" />
+                    </StackPanel>
+                    <Grid Height="100" Background="{DynamicResource SemiCyan4Color}">
+                        <u:Divider HorizontalContentAlignment="Stretch">Stretch</u:Divider>
+                    </Grid>
                 </StackPanel>
             </u:LoadingContainer>
+            <u:TagInput HorizontalAlignment="Stretch" />
+            <u:Pagination
+                PageSizeOptions="10, 20, 50, 100"
+                ShowPageSizeSelector="True"
+                TotalCount="600" />
         </StackPanel>
-
     </Grid>
 </UserControl>

demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs

@@ -1,9 +1,11 @@
+using System;
 using System.Collections.ObjectModel;
+using System.Net;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Ursa.Demo.ViewModels;
 
-public class IntroductionDemoViewModel : ObservableObject
+public partial class IntroductionDemoViewModel : ObservableObject
 {
     public ObservableCollection<MenuItemViewModel> MenuItems { get; set; } = new()
     {
@@ -43,5 +45,16 @@ public class IntroductionDemoViewModel : ObservableObject
         }
     };
 
-    public ObservableCollection<string> ButtonGroupItems { get; set; } = ["Ding", "Otter", "Husky", "Mr. 17", "Cass"];
+    public ObservableCollection<string> ButtonGroupItems { get; set; } = new()
+    {
+        "Avalonia", "WPF", "Xamarin"
+    };
+
+    [ObservableProperty] private IPAddress? _address;
+
+    public void ChangeAddress()
+    {
+        long l = Random.Shared.NextInt64(0x00000000FFFFFFFF);
+        Address = new IPAddress(l);
+    }
 }