chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updates to FormItem label and A11y (#395)

Browse Source 
* 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.
This commit is contained in:
Dong Bin
2024-09-11 18:47:42 +08:00
committed by GitHub
parent eb72a717c3
commit 60605de2c8
4 changed files with 146 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
demo/Ursa.Demo/Pages/FormDemo.axaml
View File

@@ -13,59 +13,42 @@
x:DataType="vm:FormDemoViewModel"
mc:Ignorable="d">
<ScrollViewer>
<StackPanel>
<Grid RowDefinitions="Auto, Auto" ColumnDefinitions="Auto, Auto">
<TextBlock Grid.Row="0" Grid.Column="0" Text="Label Position" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Label Alignment" VerticalAlignment="Center"></TextBlock>
<u:EnumSelector Grid.Row="0" Grid.Column="1"
Name="position"
EnumType="common:Position"
Value="{x:Static common:Position.Top}" />
<u:EnumSelector Grid.Row="1" Grid.Column="1"
Name="alignment"
EnumType="HorizontalAlignment"
Value="{x:Static HorizontalAlignment.Left}" />
</Grid>
<u:Form
DataContext="{Binding Model}"
LabelAlignment="{Binding #alignment.Value}"
LabelPosition="{Binding #position.Value}"
LabelWidth="*">
<u:FormGroup Header="Information">
<TextBox
Width="300"
u:FormItem.IsRequired="True"
u:FormItem.Label="Name"
Text="{Binding Name}" />
<TextBox
Width="300"
u:FormItem.Label="Email"
Text="{Binding Email}" />
<u:NumericDoubleUpDown Value="{Binding Number}" u:FormItem.Label="Number" Width="300"/>
<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:FormItem Label="Please select a Date">
<CalendarDatePicker SelectedDate="{Binding Date}" />
</u:FormItem>
<u:FormGroup Header="Education">
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.IsRequired="True"
u:FormItem.Label="Name"
Text="{Binding Name}" />
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.Label="Email"
u:FormItem.IsRequired="True"
Text="{Binding Email}" />
<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>
<u:FormItem Label="Click to Submit">
<Button Content="Button With Label" />
</u:FormItem>
<CheckBox Content="I Agree User Agreement" u:FormItem.NoLabel="True"></CheckBox>
<u:FormItem NoLabel="True">
<Button HorizontalAlignment="Left" Content="No Label" />
</u:FormItem>
<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>