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
Unified 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 @using System.ComponentModel.DataAnnotations
<MudForm @ref="_form" @bind-IsValid="@_isValid" Model="@_model"> <MudForm @ref="_form" @bind-IsValid="@_isValid" Model="@_model">
<MudTextField @bind-Value="_model.Name" <MudStack Spacing="3">
Label="Name" <MudTextField @bind-Value="_model.Name"
Required="true" Label="Name"
RequiredError="Please enter the name." /> Required="true"
RequiredError="Please enter the name." />
<MudTextField @bind-Value="_model.Email"
Label="Email" <MudTextField @bind-Value="_model.Email"
Required="true" Label="Email"
Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" /> Required="true"
Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" />
<MudButton OnClick="@SubmitAsync"
Disabled="@(!_isValid)" <MudButton OnClick="@SubmitAsync"
Variant="Variant.Filled" Disabled="@(!_isValid)"
Color="Color.Primary"> Variant="Variant.Filled"
Submit Color="Color.Primary">
</MudButton> Submit
</MudButton>
</MudStack>
</MudForm> </MudForm>
@code { @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: Open the `Books.razor` and add the following code to the end of the page:
````razor ````razor
<MudDialog @ref="_createDialog"> <MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@L["NewBook"]</MudText> <MudText Typo="Typo.h6">@L["NewBook"]</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewEntity"> <MudForm @ref="@CreateFormRef" Model="@NewEntity">
<MudTextField @bind-Value="@NewEntity.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@NewEntity.Name"
For="@(() => NewEntity.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => NewEntity.Name)"
<MudSelect T="BookType" Required="true" />
@bind-Value="@NewEntity.Type" <MudSelect T="BookType"
Label="@L["Type"]"> @bind-Value="@NewEntity.Type"
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType))) Label="@L["Type"]">
{ @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem> {
} <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
</MudSelect> }
<MudDatePicker @bind-Date="@NewEntity.PublishDate" </MudSelect>
Label="@L["PublishDate"]" /> <MudDatePicker @bind-Date="@NewEntity.PublishDate"
<MudNumericField T="float" Label="@L["PublishDate"]" />
@bind-Value="@NewEntity.Price" <MudNumericField T="float"
Label="@L["Price"]" /> @bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <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 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. * 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. * `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}} {{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"}} {{if BlazorUI == "MudBlazor"}}
````razor ````razor
<MudDialog @ref="_editDialog"> <MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@EditingEntity.Name</MudText> <MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingEntity"> <MudForm @ref="@EditFormRef" Model="@EditingEntity">
<MudTextField @bind-Value="@EditingEntity.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@EditingEntity.Name"
For="@(() => EditingEntity.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => EditingEntity.Name)"
<MudSelect T="BookType" Required="true" />
@bind-Value="@EditingEntity.Type" <MudSelect T="BookType"
Label="@L["Type"]"> @bind-Value="@EditingEntity.Type"
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType))) Label="@L["Type"]">
{ @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem> {
} <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
</MudSelect> }
<MudDatePicker @bind-Date="@EditingEntity.PublishDate" </MudSelect>
Label="@L["PublishDate"]" /> <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
<MudNumericField T="float" Label="@L["PublishDate"]" />
@bind-Value="@EditingEntity.Price" <MudNumericField T="float"
Label="@L["Price"]" /> @bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -1744,29 +1750,31 @@ Here's the complete code to create the book management CRUD page, that has been
</MudCardContent> </MudCardContent>
</MudCard> </MudCard>
<MudDialog @ref="_createDialog"> <MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@L["NewBook"]</MudText> <MudText Typo="Typo.h6">@L["NewBook"]</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewEntity"> <MudForm @ref="@CreateFormRef" Model="@NewEntity">
<MudTextField @bind-Value="@NewEntity.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@NewEntity.Name"
For="@(() => NewEntity.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => NewEntity.Name)"
<MudSelect T="BookType" Required="true" />
@bind-Value="@NewEntity.Type" <MudSelect T="BookType"
Label="@L["Type"]"> @bind-Value="@NewEntity.Type"
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType))) Label="@L["Type"]">
{ @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem> {
} <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
</MudSelect> }
<MudDatePicker @bind-Date="@NewEntity.PublishDate" </MudSelect>
Label="@L["PublishDate"]" /> <MudDatePicker @bind-Date="@NewEntity.PublishDate"
<MudNumericField T="float" Label="@L["PublishDate"]" />
@bind-Value="@NewEntity.Price" <MudNumericField T="float"
Label="@L["Price"]" /> @bind-Value="@NewEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -1777,29 +1785,31 @@ Here's the complete code to create the book management CRUD page, that has been
</DialogActions> </DialogActions>
</MudDialog> </MudDialog>
<MudDialog @ref="_editDialog"> <MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@EditingEntity.Name</MudText> <MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingEntity"> <MudForm @ref="@EditFormRef" Model="@EditingEntity">
<MudTextField @bind-Value="@EditingEntity.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@EditingEntity.Name"
For="@(() => EditingEntity.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => EditingEntity.Name)"
<MudSelect T="BookType" Required="true" />
@bind-Value="@EditingEntity.Type" <MudSelect T="BookType"
Label="@L["Type"]"> @bind-Value="@EditingEntity.Type"
@foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType))) Label="@L["Type"]">
{ @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
<MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem> {
} <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
</MudSelect> }
<MudDatePicker @bind-Date="@EditingEntity.PublishDate" </MudSelect>
Label="@L["PublishDate"]" /> <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
<MudNumericField T="float" Label="@L["PublishDate"]" />
@bind-Value="@EditingEntity.Price" <MudNumericField T="float"
Label="@L["Price"]" /> @bind-Value="@EditingEntity.Price"
Label="@L["Price"]" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <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> </MudCardContent>
</MudCard> </MudCard>
<MudDialog @ref="CreateAuthorDialog"> <MudDialog @ref="CreateAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@L["NewAuthor"]</MudText> <MudText Typo="Typo.h6">@L["NewAuthor"]</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewAuthor"> <MudForm @ref="@CreateFormRef" Model="@NewAuthor">
<MudTextField @bind-Value="@NewAuthor.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@NewAuthor.Name"
For="@(() => NewAuthor.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => NewAuthor.Name)"
<MudDatePicker @bind-Date="@NewAuthorBirthDate" Required="true" />
Label="@L["BirthDate"]" /> <MudDatePicker @bind-Date="@NewAuthorBirthDate"
<MudTextField @bind-Value="@NewAuthor.ShortBio" Label="@L["BirthDate"]" />
Label="@L["ShortBio"]" <MudTextField @bind-Value="@NewAuthor.ShortBio"
Lines="5" /> Label="@L["ShortBio"]"
Lines="5" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -1108,21 +1110,23 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "B
</DialogActions> </DialogActions>
</MudDialog> </MudDialog>
<MudDialog @ref="EditAuthorDialog"> <MudDialog @ref="EditAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
<TitleContent> <TitleContent>
<MudText Typo="Typo.h6">@EditingAuthor.Name</MudText> <MudText Typo="Typo.h6">@EditingAuthor.Name</MudText>
</TitleContent> </TitleContent>
<DialogContent> <DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingAuthor"> <MudForm @ref="@EditFormRef" Model="@EditingAuthor">
<MudTextField @bind-Value="@EditingAuthor.Name" <MudStack Spacing="3">
Label="@L["Name"]" <MudTextField @bind-Value="@EditingAuthor.Name"
For="@(() => EditingAuthor.Name)" Label="@L["Name"]"
Required="true" /> For="@(() => EditingAuthor.Name)"
<MudDatePicker @bind-Date="@EditingAuthorBirthDate" Required="true" />
Label="@L["BirthDate"]" /> <MudDatePicker @bind-Date="@EditingAuthorBirthDate"
<MudTextField @bind-Value="@EditingAuthor.ShortBio" Label="@L["BirthDate"]" />
Label="@L["ShortBio"]" <MudTextField @bind-Value="@EditingAuthor.ShortBio"
Lines="5" /> Label="@L["ShortBio"]"
Lines="5" />
</MudStack>
</MudForm> </MudForm>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>

Write Preview
Loading…
Cancel
Save