tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor MudBlazor dialog forms to use MudStack for improved layout and spacing

pull/25380/head
maliming 5 months ago
parent
5bc145cdf2
commit
737dba1af2
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
3 changed files with 124 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      docs/en/framework/ui/blazor/forms-validation.md
  2. 154
      docs/en/tutorials/book-store/part-03.md
  3. 44
      docs/en/tutorials/book-store/part-09.md

34
docs/en/framework/ui/blazor/forms-validation.md
View File

@ -71,22 +71,24 @@ The most common pattern is wrapping inputs in a `<MudForm>` and binding the form
@using System.ComponentModel.DataAnnotations
<MudForm @ref="_form" @bind-IsValid="@_isValid" Model="@_model">
<MudTextField @bind-Value="_model.Name"
Label="Name"
Required="true"
RequiredError="Please enter the name." />
<MudTextField @bind-Value="_model.Email"
Label="Email"
Required="true"
Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" />
<MudButton OnClick="@SubmitAsync"
Disabled="@(!_isValid)"
Variant="Variant.Filled"
Color="Color.Primary">
Submit
</MudButton>
<MudStack Spacing="3">
<MudTextField @bind-Value="_model.Name"
Label="Name"
Required="true"
RequiredError="Please enter the name." />
<MudTextField @bind-Value="_model.Email"
Label="Email"
Required="true"
Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" />
<MudButton OnClick="@SubmitAsync"
Disabled="@(!_isValid)"
Variant="Variant.Filled"
Color="Color.Primary">
Submit
</MudButton>
</MudStack>
</MudForm>
@code {

154
docs/en/tutorials/book-store/part-03.md
View File

@ -1217,29 +1217,31 @@ This code requires a service; Inject the `AbpBlazorMessageLocalizerHelper<T>` at
Open the `Books.razor` and add the following code to the end of the page:
````razor
<MudDialog @ref="_createDialog">
<MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewBook"]</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewEntity">
<MudTextField @bind-Value="@NewEntity.Name"
Label="@L["Name"]"
For="@(() => NewEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@NewEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@NewEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@NewEntity.Name"
Label="@L["Name"]"
For="@(() => NewEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@NewEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@NewEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>
@ -1253,6 +1255,8 @@ Open the `Books.razor` and add the following code to the end of the page:
* The form uses `[Required]`/DataAnnotations for validation; messages are localized via the same `AbpResource` localization system.
* The `_createDialog` field, `CloseCreateDialogAsync`, `CreateFormRef` and `CreateEntityAsync` are all defined in `AbpMudCrudPageBase`. Check the [MudBlazor documentation](https://mudblazor.com/components/dialog) if you want to understand the `MudDialog` and other components.
* `MudDialog.Options` widens the dialog (`MaxWidth.Medium` + `FullWidth`) so the form fields are not cramped.
* `MudStack` with `Spacing="3"` keeps the inputs visually separated; without it MudBlazor inputs render flush against each other.
* `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant.
{{end}}
@ -1379,29 +1383,31 @@ We can now define a modal to edit the book. Add the following code to the end of
{{if BlazorUI == "MudBlazor"}}
````razor
<MudDialog @ref="_editDialog">
<MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingEntity">
<MudTextField @bind-Value="@EditingEntity.Name"
Label="@L["Name"]"
For="@(() => EditingEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@EditingEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@EditingEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@EditingEntity.Name"
Label="@L["Name"]"
For="@(() => EditingEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@EditingEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@EditingEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>
@ -1744,29 +1750,31 @@ Here's the complete code to create the book management CRUD page, that has been
</MudCardContent>
</MudCard>
<MudDialog @ref="_createDialog">
<MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewBook"]</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewEntity">
<MudTextField @bind-Value="@NewEntity.Name"
Label="@L["Name"]"
For="@(() => NewEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@NewEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@NewEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@NewEntity.Name"
Label="@L["Name"]"
For="@(() => NewEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@NewEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@NewEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>
@ -1777,29 +1785,31 @@ Here's the complete code to create the book management CRUD page, that has been
</DialogActions>
</MudDialog>
<MudDialog @ref="_editDialog">
<MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingEntity">
<MudTextField @bind-Value="@EditingEntity.Name"
Label="@L["Name"]"
For="@(() => EditingEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@EditingEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@EditingEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@EditingEntity.Name"
Label="@L["Name"]"
For="@(() => EditingEntity.Name)"
Required="true" />
<MudSelect T="BookType"
@bind-Value="@EditingEntity.Type"
Label="@L["Type"]">
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
{
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
}
</MudSelect>
<MudDatePicker @bind-Date="@EditingEntity.PublishDate"
Label="@L["PublishDate"]" />
<MudNumericField T="float"
@bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>

44
docs/en/tutorials/book-store/part-09.md
View File

@ -1083,21 +1083,23 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "B
</MudCardContent>
</MudCard>
<MudDialog @ref="CreateAuthorDialog">
<MudDialog @ref="CreateAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewAuthor"]</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewAuthor">
<MudTextField @bind-Value="@NewAuthor.Name"
Label="@L["Name"]"
For="@(() => NewAuthor.Name)"
Required="true" />
<MudDatePicker @bind-Date="@NewAuthorBirthDate"
Label="@L["BirthDate"]" />
<MudTextField @bind-Value="@NewAuthor.ShortBio"
Label="@L["ShortBio"]"
Lines="5" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@NewAuthor.Name"
Label="@L["Name"]"
For="@(() => NewAuthor.Name)"
Required="true" />
<MudDatePicker @bind-Date="@NewAuthorBirthDate"
Label="@L["BirthDate"]" />
<MudTextField @bind-Value="@NewAuthor.ShortBio"
Label="@L["ShortBio"]"
Lines="5" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>
@ -1108,21 +1110,23 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "B
</DialogActions>
</MudDialog>
<MudDialog @ref="EditAuthorDialog">
<MudDialog @ref="EditAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent>
<MudText Typo="Typo.h6">@EditingAuthor.Name</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingAuthor">
<MudTextField @bind-Value="@EditingAuthor.Name"
Label="@L["Name"]"
For="@(() => EditingAuthor.Name)"
Required="true" />
<MudDatePicker @bind-Date="@EditingAuthorBirthDate"
Label="@L["BirthDate"]" />
<MudTextField @bind-Value="@EditingAuthor.ShortBio"
Label="@L["ShortBio"]"
Lines="5" />
<MudStack Spacing="3">
<MudTextField @bind-Value="@EditingAuthor.Name"
Label="@L["Name"]"
For="@(() => EditingAuthor.Name)"
Required="true" />
<MudDatePicker @bind-Date="@EditingAuthorBirthDate"
Label="@L["BirthDate"]" />
<MudTextField @bind-Value="@EditingAuthor.ShortBio"
Label="@L["ShortBio"]"
Lines="5" />
</MudStack>
</MudForm>
</DialogContent>
<DialogActions>

Write Preview
Loading…
Cancel
Save