Files
Ursa.Avalonia/demo/Ursa.Demo/Pages/FormDemo.axaml
Dong Bin 60605de2c8 Updates to FormItem label and A11y (#395)
* feat: 1. add AccessKey support for form item.
2. Support label positioning for different content height.
3. polish demo.

* feat: add a transparent background for label.
2024-09-11 18:47:42 +08:00

56 lines
2.8 KiB
XML

<UserControl
x:Class="Ursa.Demo.Pages.FormDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="clr-namespace:Ursa.Demo.ViewModels;assembly=Ursa.Demo"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="vm:FormDemoViewModel"
mc:Ignorable="d">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Margin="24 0 0 0 ">
<u:Divider Content="Simple Form"/>
<u:Form LabelPosition="Left" LabelWidth="*">
<TextBox Width="300" u:FormItem.Label="Name" />
<TextBox Width="300" u:FormItem.Label="Email" />
<TextBox Width="300" u:FormItem.Label="Message" Classes="TextArea"/>
</u:Form>
<u:Divider Content="Form accessibility"/>
<u:Form LabelPosition="Left" LabelWidth="*">
<TextBox Width="300" u:FormItem.Label="_Name" />
<TextBox Width="300" u:FormItem.Label="_Email" />
<TextBox Width="300" u:FormItem.Label="_Message" Classes="TextArea"/>
</u:Form>
<u:Divider Content="Label on top"/>
<u:Form LabelPosition="Top" LabelWidth="*">
<TextBox Width="300" u:FormItem.Label="Name" />
<TextBox Width="300" u:FormItem.Label="Email" />
</u:Form>
<u:Divider Content="FormGroup"/>
<u:Form LabelPosition="Left" LabelWidth="*">
<u:FormGroup Header="Basic Information">
<TextBox Width="300" u:FormItem.Label="Name" />
<TextBox Width="300" u:FormItem.Label="Email" />
</u:FormGroup>
<u:FormGroup Header="Education Information">
<TextBox Width="300" u:FormItem.Label="Collage" />
<u:FormItem Label="Study Time">
<u:DateRangePicker Width="300"></u:DateRangePicker>
</u:FormItem>
</u:FormGroup>
<Button Content="Submit" Theme="{DynamicResource SolidButton}" u:FormItem.NoLabel="True" HorizontalAlignment="Stretch"/>
</u:Form>
<u:Divider Content="MVVM setup and validation" />
<u:Form LabelPosition="Left" LabelWidth="*" DataContext="{Binding Model}">
<TextBox Width="300" u:FormItem.Label="Name" Text="{Binding Name}"/>
<TextBox Width="300" u:FormItem.Label="Email" Text="{Binding Email}" />
</u:Form>
</StackPanel>
</ScrollViewer>
</UserControl>