« MudBlazor » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 93 : | Ligne 93 : | ||
= [https://mudblazor.com/utilities CSS utilities] = | = [https://mudblazor.com/utilities CSS utilities] = | ||
== [https://mudblazor.com/utilities/spacing Spacing] == | == [https://mudblazor.com/utilities/spacing Spacing] == | ||
{| class="wikitable wtp wtmono1" | {| class="wikitable wtp wtmono1 wtmono2" | ||
! Code | ! Code | ||
! Description | ! Description | ||
Version du 12 juillet 2023 à 22:10
Links
Components
MessageBox
| Pages/MyPage.razor |
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnDeleteAsync" >Delete</MudButton>
<MudMessageBox @ref="deleteItemDialog" Title="Item deletion">
<MessageContent>
Are you sure you want to delete the selected item?
</MessageContent>
<YesButton>
<MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete</MudButton>
</YesButton>
</MudMessageBox>
|
| Pages/MyPage.razor.cs |
private async Task OnDeleteAsync()
{
var dialogOptions = new DialogOptions
{
CloseButton = true,
DisableBackdropClick = true // modal
};
var result = await deleteItemDialog.Show(dialogOptions);
if (result != true)
{
return;
}
|
SnackBar
| Pages/MyPage.razor.cs |
[Inject]
private ISnackbar snackbar { get; set; } = default!;
snackbar.Add("Success!!!", Severity.Success);
snackbar.Add($"Error!!!<br>Error message:<br>{operationStatus.ErrorMessage}", Severity.Error);
|
| Program.cs |
builder.Services.AddMudServices(config =>
{
config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomRight;
config.SnackbarConfiguration.PreventDuplicates = true;
config.SnackbarConfiguration.HideTransitionDuration = 100;
});
|
IconButton
|
<MudIconButton Icon="@Icons.Material.Filled.DeleteForever"
Size="Size.Small"
Color="Color.Error"
aria-label="delete"
OnClick="@(() => OnDeleteAsync(@context.Id))" />
|
Menu
|
|
<MudMenu
Icon="@Icons.Material.Filled.MoreVert"
Size="Size.Small"
AnchorOrigin="Origin.CenterLeft"
TransformOrigin="Origin.CenterRight">
<MudMenuItem>
<MudIconButton
Icon="@Icons.Material.Filled.DeleteForever"
Size="Size.Small"
Color="Color.Error"
aria-label="delete"
OnClick="@(() => OnDeleteAsync(@context.Id))" />
</MudMenuItem>
</MudMenu>
|
Icons
|
|
<MudIconButton Icon="@Icons.Material.Filled.Home" />
<MudIconButton Icon="@myIcon" />
@code
{
string myIcon = MudBlazor.Icons.Material.Filled.Home;
}
|
CSS utilities
Spacing
| Code | Description |
|---|---|
| m p | margin padding |
| t b r l | top bottom right left |
| x | left and right |
| y | top and bottom |
| a | all 4 sides |
| 0 1 n1 auto | 0 4px -4px auto |
Theme
| Shared/MainLayout.razor |
<MudThemeProvider IsDarkMode="true" Theme="customTheme" />
@code {
MudTheme customTheme = new MudTheme
{
LayoutProperties = new LayoutProperties
{
DrawerWidthLeft = "160px" // --mud-drawer-width-left 240px
}
};
}
|
Installation
New project
|
# install MudBlazor templates dotnet new install MudBlazor.Templates # help on new project dotnet new mudblazor --help # new server project named MudBlazor dotnet new mudblazor --host server --output MudBlazor |
Already existing project
|
|
dotnet add package MudBlazor |
| _Imports.razor |
@using MudBlazor |
| Pages/_Host.cshtml |
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <script src="_content/MudBlazor/MudBlazor.min.js"></script> |
| Program.cs |
builder.Services.AddMudServices(); |
| Shared/MainLayout.razor |
<MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/> |
