« MudBlazor » : différence entre les versions
Apparence
(35 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 199 : | Ligne 199 : | ||
Color="Color.Default" | Color="Color.Default" | ||
Class="purple-text text-lighten-3">Text</MudLink> | Class="purple-text text-lighten-3">Text</MudLink> | ||
</kode> | |||
== [https://mudblazor.com/components/list List] == | |||
<kode lang='razor'> | |||
<MudPaper MaxHeight="200px" Class="mt-1 overflow-y-auto border-solid border mud-border-error"> | |||
<MudList T="string" | |||
Dense="true" | |||
Class="mud-error-text"> | |||
@foreach (var error in Errors) | |||
{ | |||
<MudListItem Text="@error" Icon="@Icons.Material.Filled.ErrorOutline" IconColor="Color.Error" /> | |||
} | |||
</MudList> | |||
</MudPaper> | |||
@code { | |||
[Parameter] | |||
public IReadOnlyCollection<string> Errors { get; set; } = Array.Empty<string>(); | |||
} | |||
</kode> | </kode> | ||
Ligne 218 : | Ligne 237 : | ||
</MudMenu> | </MudMenu> | ||
</kode> | </kode> | ||
== [https://mudblazor.com/components/expansionpanels Expansion Panels] == | |||
<filebox fn='Pages/MyPage.razor'> | |||
<MudExpansionPanels MultiExpansion="true"> | |||
<MudExpansionPanel Text="Panel One"> | |||
Panel One Content | |||
</MudExpansionPanel> | |||
<MudExpansionPanel Text="Panel Two"> | |||
Panel Two Content | |||
</MudExpansionPanel> | |||
</MudExpansionPanels> | |||
</filebox> | |||
== [https://mudblazor.com/components/messagebox MessageBox] == | == [https://mudblazor.com/components/messagebox MessageBox] == | ||
Ligne 241 : | Ligne 272 : | ||
DisableBackdropClick = true // modal | DisableBackdropClick = true // modal | ||
}; | }; | ||
var result = await deleteItemDialog. | var result = await deleteItemDialog.ShowAsync(dialogOptions); | ||
if (result != true) | if (result != true) | ||
Ligne 325 : | Ligne 356 : | ||
=== [https://mudblazor.com/components/table#server-side-filtering,-sorting-and-pagination Server Side Filtering, Sorting and Pagination] === | === [https://mudblazor.com/components/table#server-side-filtering,-sorting-and-pagination Server Side Filtering, Sorting and Pagination] === | ||
<kode lang='razor' collapsed> | <kode lang='razor' collapsed> | ||
<MudTable | <MudTable @ref="table" | ||
ServerData="ServerReloadAsync" | |||
Hover="true" | |||
Loading="@isSearching" | |||
LoadingProgressColor="Color.Info" | |||
Class="flex-column"> | |||
<ToolBarContent> | <ToolBarContent> | ||
<MudFab | <MudFab Color="Color.Primary" | ||
StartIcon="@Icons.Material.Filled.Add" | |||
Size="Size.Small" | |||
Href="item/new" /> | |||
<MudTextField T="string" | |||
<MudTextField | ValueChanged="@(s => OnSearch(s))" | ||
Placeholder="Search" | |||
Adornment="Adornment.Start" | |||
AdornmentIcon="@Icons.Material.Filled.Search" | |||
IconSize="Size.Medium" | |||
Class="mt-0 mx-16"> | |||
</MudTextField> | </MudTextField> | ||
</ToolBarContent> | </ToolBarContent> | ||
Ligne 355 : | Ligne 383 : | ||
<MudTd DataLabel="Name" Style="text-align:right">@context.Name</MudTd> | <MudTd DataLabel="Name" Style="text-align:right">@context.Name</MudTd> | ||
<MudTd> | <MudTd> | ||
<MudMenu | <MudMenu Icon="@Icons.Material.Filled.MoreVert" | ||
Size="Size.Small" | |||
AnchorOrigin="Origin.CenterLeft" | |||
TransformOrigin="Origin.CenterRight"> | |||
<MudMenuItem> | <MudMenuItem> | ||
<MudIconButton | <MudIconButton Icon="@Icons.Material.Filled.Edit" | ||
Size="Size.Small" | |||
Color="Color.Primary" | |||
aria-label="edit" | |||
Href="@($"transaction/{context.Id}")" /> | |||
</MudMenuItem> | </MudMenuItem> | ||
<MudMenuItem> | <MudMenuItem> | ||
<MudIconButton | <MudIconButton Icon="@Icons.Material.Filled.DeleteForever" | ||
Size="Size.Small" | |||
Color="Color.Error" | |||
aria-label="delete" | |||
OnClick="@(() => OnDeleteAsync(context.Id))" /> | |||
</MudMenuItem> | </MudMenuItem> | ||
</MudMenu> | </MudMenu> | ||
Ligne 386 : | Ligne 411 : | ||
</LoadingContent> | </LoadingContent> | ||
<PagerContent> | <PagerContent> | ||
<MudTablePager | <MudTablePager PageSizeOptions="new int[] { 10 }" | ||
HorizontalAlignment="HorizontalAlignment.Left" | |||
HideRowsPerPage="true" /> | |||
</PagerContent> | </PagerContent> | ||
</MudTable> | </MudTable> | ||
Ligne 397 : | Ligne 421 : | ||
private bool isSearching; | private bool isSearching; | ||
private async Task<TableData<ItemResponse>> ServerReloadAsync(TableState state) | private async Task<TableData<ItemResponse>> ServerReloadAsync(TableState state, CancellationToken cancellationToken) | ||
{ | { | ||
ArgumentNullException.ThrowIfNull(state); | ArgumentNullException.ThrowIfNull(state); | ||
Ligne 591 : | Ligne 615 : | ||
{{info | Add the package {{boxx|FluentValidation}} to use it. }} | {{info | Add the package {{boxx|FluentValidation}} to use it. }} | ||
=== [https://mudblazor.com/components/textfield Text field] === | |||
<kode lang='razor'> | |||
<MudTextField @ref="searchTextField" | |||
T="string" | |||
ValueChanged="@(s => OnSearch(s))" | |||
Placeholder="Search" | |||
Adornment="Adornment.Start" | |||
AdornmentIcon="@Icons.Material.Filled.Search" | |||
IconSize="Size.Medium" | |||
Clearable="true" | |||
Class="mt-0 mx-16"> | |||
</kode> | |||
=== [https://mudblazor.com/components/radio Radio buttons] === | === [https://mudblazor.com/components/radio Radio buttons] === | ||
<kode lang='razor'> | <kode lang='razor'> | ||
<MudField Label="Type" Class="mt-2" Variant="Variant.Text" InnerPadding="false"> | <MudField Label="Type" Class="mt-2" Variant="Variant.Text" InnerPadding="false"> | ||
<MudRadioGroup @bind- | <MudRadioGroup @bind-Value="item.Type"> | ||
<MudRadio | <MudRadio Value="@("type1")" Color="Color.Primary">Type1</MudRadio> | ||
<MudRadio | <MudRadio Value="@("type2")" Color="Color.Primary">Type2</MudRadio> | ||
</MudRadioGroup> | </MudRadioGroup> | ||
</MudField> | </MudField> | ||
Ligne 614 : | Ligne 651 : | ||
=== [https://mudblazor.com/components/datepicker Date picker] === | === [https://mudblazor.com/components/datepicker Date picker] === | ||
<kode lang='razor'> | <kode lang='razor'> | ||
<MudDatePicker Label="Date" @bind-Date="item.Date" | <MudDatePicker Label="Date" | ||
@bind-Date="item.Date" | |||
Culture="@frCulture" /> | |||
@code { | @code { | ||
Ligne 623 : | Ligne 662 : | ||
=== [https://mudblazor.com/components/timepicker Time picker] === | === [https://mudblazor.com/components/timepicker Time picker] === | ||
<kode lang='razor'> | <kode lang='razor'> | ||
<MudTimePicker Label="Time" @bind-Time="item.Time" Culture="@frCulture" /> | <MudTimePicker Label="Time" | ||
@bind-Time="item.Time" | |||
Culture="@frCulture" /> | |||
@code { | |||
CultureInfo frCulture = CultureInfo.GetCultureInfo("fr-FR"); | |||
} | |||
</kode> | </kode> | ||
Ligne 686 : | Ligne 731 : | ||
<MudSelectItem Value="@item">@item.Description</MudSelectItem> | <MudSelectItem Value="@item">@item.Description</MudSelectItem> | ||
} | } | ||
</MudSelect> | |||
@* with static items *@ | |||
<MudSelect @bind-Value="@selectedItem" Label="Item"> | |||
<MudSelectItem Value="@("Item1")">Item1</MudSelectItem> | |||
<MudSelectItem Value="@("Item2")">Item2</MudSelectItem> | |||
</MudSelect> | </MudSelect> | ||
</kode> | </kode> | ||
Ligne 784 : | Ligne 835 : | ||
|- | |- | ||
| 0 1 n1 auto || 0 4px -4px auto | | 0 1 n1 auto || 0 4px -4px auto | ||
|- | |||
| xs sm md lg xl xxl || <600 960 1280 1920 2560 >2560 | |||
|} | |} | ||
<kode lang='html'> | |||
<MudPaper Class="pa-4 mr-16">padding on the 4 sides 16px</MudPaper> | |||
<MudPaper Class="mr-16">margin right 64px</MudPaper> | |||
<MudPaper Class="ma-1 ma-sm-4 ma-xl-16">margin 4px, 16px on screens from 600-1920px, 64px from 1920px/MudPaper> | |||
</kode> | |||
== [https://mudblazor.com/utilities/display Display] == | == [https://mudblazor.com/utilities/display Display] == | ||
Ligne 806 : | Ligne 865 : | ||
|- | |- | ||
| justify-center || justify-content: center; | | justify-center || justify-content: center; | ||
|- | |||
| justify-space-around || justify-content: space-around; | |||
|- | |||
| justify-end || justify-content: flex-end; | |||
|- | |||
| flex-wrap || flex-wrap: wrap; | |||
|} | |||
* [https://mudblazor.com/utilities/justify-content justify-content] | |||
== [https://mudblazor.com/utilities/position Position] == | |||
{| class="wikitable wtp wtmono1 wtmono2" | |||
! Code | |||
! Description | |||
|- | |||
| absolute || position: absolute; | |||
|} | |} | ||
Ligne 819 : | Ligne 893 : | ||
| mud-border-primary || | | mud-border-primary || | ||
|} | |} | ||
== [https://mudblazor.com/features/breakpoints Responsivity with Breakpoints] == | |||
<kode lang='razor'> | |||
@* hide the MudCard for screens < 600px *@ | |||
<MudHidden Breakpoint="Breakpoint.Xs" Invert="true"> | |||
<MudCard Class="pa-5"> | |||
<MudText>SM and Down</MudText> | |||
</MudCard> | |||
</MudHidden> | |||
</kode> | |||
== [https://mudblazor.com/utilities/cursor Cursor / Mouse] == | == [https://mudblazor.com/utilities/cursor Cursor / Mouse] == | ||
Ligne 885 : | Ligne 969 : | ||
</filebox> | </filebox> | ||
== CSS isolation == | == [[Blazor_ASP.NET_Core_7.0#CSS_isolation|CSS isolation]] == | ||
{{warn | | {{warn | | ||
* first tag of a component has to be an HTML tag, not a MudBlazor tag. | * first tag of a component has to be an HTML tag ({{boxx|<nowiki><div></nowiki>}}), not a MudBlazor tag. | ||
* use {{boxx|::deep}}}} | * use {{boxx|::deep .my-class}} when class is set on a MudBlazor component | ||
* you may need to refresh the browser cache | |||
}} | |||
<filebox fn='MyPage.razor'> | |||
<div> | |||
<MudText Typo="Typo.h1" id="title1">@name</MudText> | |||
<h2 id="title2">@name</h2> | |||
<div> | |||
</filebox> | |||
<filebox fn='MyPage.razor.css'> | |||
::deep title1 { } | |||
title2 { } | |||
</filebox> | |||
= Build component in the code-behind = | |||
<filebox fn='MyPage.razor'> | |||
<MudTd DataLabel="Type"> | |||
@GetIconFromType(context.Type) | |||
</MudTd> | |||
</filebox> | |||
<filebox fn='MyPage.razor.cs'> | |||
private static RenderFragment GetIconFromType(string type) | |||
=> builder => | |||
{ | |||
builder.OpenComponent<MudIcon>(0); | |||
builder.AddAttribute(1, "Title", type); | |||
builder.AddAttribute(2, "Icon", @Icons.Material.Filled.Money); | |||
builder.AddAttribute(3, "Color", type switch | |||
{ | |||
"deposit" => Color.Success, | |||
"withdrawal" => Color.Warning, | |||
"charge" => Color.Error, | |||
_ => throw new NotSupportedException($"The type '{type}' is not supported.") | |||
}); | |||
builder.CloseComponent(); | |||
}; | |||
</filebox> | |||
= [https://mudblazor.com/getting-started/installation Installation] = | = [https://mudblazor.com/getting-started/installation Installation] = | ||
Ligne 1 050 : | Ligne 1 173 : | ||
<filebox fn='Shared/MainLayout.razor'> | <filebox fn='Shared/MainLayout.razor'> | ||
<MudThemeProvider/> | <MudThemeProvider /> | ||
<MudDialogProvider/> | <MudPopoverProvider /> | ||
<MudSnackbarProvider/> | <MudDialogProvider /> | ||
<MudSnackbarProvider /> | |||
</filebox> | </filebox> |
Dernière version du 11 janvier 2025 à 17:22
Links
Layouts
Shared/MainLayout.razor |
@inherits LayoutComponentBase
<PageTitle>My Application</PageTitle>
<MudThemeProvider IsDarkMode="true" Theme="customTheme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div>
@*<MudAppBar>
My Application
</MudAppBar>*@
<MudLayout>
<MudDrawer Open="true">
<MudDrawerHeader Class="cursor-help mb-1 mx-auto">
<MudTooltip Text="@($"Version {AssemblyVersion}")"
Placement="Placement.Right"
Arrow="true"
Duration="1000">
<MudText Typo="Typo.h4" Color="Color.Primary">My Application</MudText>
</MudTooltip>
</MudDrawerHeader>
<NavMenu />
</MudDrawer>
<MudMainContent Class="py-2">
<MudContainer MaxWidth="MaxWidth.Large">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
</div>
|
Shared/MainLayout.razor.css |
::deep .mud-drawer-content {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
|
Shared/NavMenu.razor |
<div>
<MudNavMenu>
<MudNavLink Href="/"
Match="NavLinkMatch.All"
Icon="@Icons.Material.Filled.Home"
IconColor="Color.Primary">
Home
</MudNavLink>
<MudNavLink Href="/menu1"
Icon="@Icons.Material.Filled.Diversity1"
IconColor="Color.Secondary">
Menu 1
</MudNavLink>
</MudNavMenu>
</div>
|
Shared/NavMenu.razor.css |
::deep .mud-nav-item {
font-size: 0.9rem;
padding: 0 1rem 0.5rem;
}
::deep .mud-nav-item a {
height: 3rem;
border-radius: 4px;
display: flex;
align-items: center;
}
::deep .mud-nav-link:hover:not(.mud-nav-link-disabled) {
background-color: rgba(255,255,255,0.1); /* var(--mud-palette-action-default-hover); */
}
::deep .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
background-color: rgba(255,255,255,0.1);
color: inherit;
}
::deep .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
::deep .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
background-color: rgba(255,255,255,0.1);
}
|
Components
Button
<MudButton Variant="Variant.Filled"
StartIcon="@Icons.Material.Filled.Delete"
Color="Color.Error">Delete</MudButton>
<MudButton Href="https://github.com/MudBlazor/MudBlazor"
Target="_blank"
Variant="Variant.Filled"
EndIcon="@Icons.Custom.Brands.GitHub"
Color="Color.Primary">
Link
</MudButton>
<MudButton Disabled="@processing"
OnClick="Process"
Variant="Variant.Filled"
Color="Color.Primary">
@if (processing)
{
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
<MudText Class="ms-2">Processing</MudText>
}
else
{
<MudText>Click me</MudText>
}
</MudButton>
@code {
private bool processing = false;
async Task ProcessAsync()
{
processing = true;
await Task.Delay(2000);
processing = false;
}
}
|
Dialog
Pages/MyPage.razor.cs |
[Inject]
private IDialogService DialogService { get; set; }
private void OnDisplayDialog()
{
var dialogOptions = new DialogOptions() { CloseButton = true };
var parameters = new DialogParameters<MyDialog>
{
{ x => x.MyProperty, propertyValue }
};
DialogService.Show<MyDialog>("Title", parameters, dialogOptions);
|
Dialogs/MyDialog.razor |
<MudDialog>
<DialogContent>
</DialogContent>
<DialogActions>
<MudButton OnClick="Cancel">Cancel</MudButton>
<MudButton Color="Color.Success" Variant="Variant.Filled" OnClick="Submit">Ok</MudButton>
</DialogActions>
</MudDialog>
@code {
[Parameter]
MyDto MyProperty { get; set; }
[CascadingParameter]
MudDialogInstance MudDialog { get; set; }
void Submit() => MudDialog.Close(DialogResult.Ok(true));
void Cancel() => MudDialog.Cancel();
}
|
IconButton
<MudIconButton Icon="@Icons.Material.Filled.DeleteForever"
Size="Size.Small"
Color="Color.Error"
aria-label="delete"
OnClick="@(() => OnDeleteAsync(@context.Id))"
Href="@($"items/{context.Id}")" />
|
Image
<MudImage Src="images/MyImage.svg"
Alt="MyImage"
Width="200"
Elevation="10"
Class="rounded-lg" />
|
Link
<MudLink Href=""
Typo="Typo.h3"
Underline="Underline.None"
Color="Color.Default"
Class="purple-text text-lighten-3">Text</MudLink>
|
List
<MudPaper MaxHeight="200px" Class="mt-1 overflow-y-auto border-solid border mud-border-error">
<MudList T="string"
Dense="true"
Class="mud-error-text">
@foreach (var error in Errors)
{
<MudListItem Text="@error" Icon="@Icons.Material.Filled.ErrorOutline" IconColor="Color.Error" />
}
</MudList>
</MudPaper>
@code {
[Parameter]
public IReadOnlyCollection<string> Errors { get; set; } = Array.Empty<string>();
}
|
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>
|
Expansion Panels
Pages/MyPage.razor |
<MudExpansionPanels MultiExpansion="true">
<MudExpansionPanel Text="Panel One">
Panel One Content
</MudExpansionPanel>
<MudExpansionPanel Text="Panel Two">
Panel Two Content
</MudExpansionPanel>
</MudExpansionPanels>
|
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.ShowAsync(dialogOptions);
if (result != true)
{
return;
}
|
<MudNavMenu>
<MudNavLink Href=""
Match="NavLinkMatch.All"
Icon="@Icons.Material.Filled.Home"
IconColor="Color.Primary">
Home
</MudNavLink>
<MudNavLink Href="menu1"
Icon="@Icons.Material.Filled.Diversity1"
IconColor="Color.Secondary">
Menu 1
</MudNavLink>
</MudNavMenu>
|
Progress
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true" />
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Value="@progressValue" />
|
private double progressValue; // between 0 and 100
|
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;
});
|
Text
<MudText Typo="Typo.h6"
Align="Align.Center">
Title
</MudText>
|
Table
No validation in inline editing mode |
Sorting
|
Server Side Filtering, Sorting and Pagination
|
|
RowEditCommit and async method
|
|
Tabs
<MudTabs Elevation="2" Rounded="true" Centered="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
<MudTabPanel Text="Tab text 1">...</MudTabPanel>
<MudTabPanel Text="Tab text 2">...</MudTabPanel>
</MudTabs>
|
Tooltip
<MudTooltip Text="Delete" Placement="Placement.Right" Arrow="true" Duration="1000">
<MudIconButton Icon="@Icons.Material.Filled.Delete" />
</MudTooltip>
|
Form
Pages/ItemForm.razor |
@if (Item is not null)
{
<MudCard>
<MudForm @ref="@form" Model="@Item" Validation="@(itemViewModelValidator.ValidateValue)">
<MudCardContent>
<MudTextField
@bind-Value="Item.Name"
For="@(() => Item.Name)"
Label="Name"
DebounceInterval="500"
AutoFocus="true" />
</MudCardContent>
</MudForm>
<MudCardActions>
<MudButton
Variant="Variant.Filled"
Color="Color.Default"
Class="ml-auto mr-2"
OnClick="@CancelRequest">
Cancel
</MudButton>
<MudButton
Variant="Variant.Filled"
Color="Color.Primary"
Class="mr-4"
OnClick="@SubmitAsync">
Save
</MudButton>
</MudCardActions>
</MudCard>
}
|
Pages/ItemForm.razor.cs |
[Parameter]
public CreateUpdateItemQuery Item { get; set; } = default!;
[Parameter]
public EventCallback<bool> ValidationResult { get; set; }
[Parameter]
public EventCallback CancelRequest { get; set; }
private IForm form = default!;
private readonly CreateUpdateItemQueryValidator itemQueryValidator = new();
private Task SubmitAsync() => ValidationResult.InvokeAsync(form.IsValid);
|
Validators/CreateUpdateItemQueryValidator.cs |
Pages/CreateItem.razor |
<ItemForm
Item="@item"
ValidationResult="@(async (success) => await ValidationResultAsync(success))"
CancelRequest="@(() => NavigationManager.NavigateTo("item"))" />
|
Pages/CreateItem.razor.cs |
Add the package FluentValidation to use it. |
Text field
<MudTextField @ref="searchTextField"
T="string"
ValueChanged="@(s => OnSearch(s))"
Placeholder="Search"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
IconSize="Size.Medium"
Clearable="true"
Class="mt-0 mx-16">
|
Radio buttons
<MudField Label="Type" Class="mt-2" Variant="Variant.Text" InnerPadding="false">
<MudRadioGroup @bind-Value="item.Type">
<MudRadio Value="@("type1")" Color="Color.Primary">Type1</MudRadio>
<MudRadio Value="@("type2")" Color="Color.Primary">Type2</MudRadio>
</MudRadioGroup>
</MudField>
|
Numeric field
<MudNumericField
@bind-Value="item.Quantity"
Label="Quantity"
Variant="Variant.Text"
Min="1"
HideSpinButtons="true" />
|
Date picker
<MudDatePicker Label="Date"
@bind-Date="item.Date"
Culture="@frCulture" />
@code {
CultureInfo frCulture = CultureInfo.GetCultureInfo("fr-FR");
}
|
Time picker
<MudTimePicker Label="Time"
@bind-Time="item.Time"
Culture="@frCulture" />
@code {
CultureInfo frCulture = CultureInfo.GetCultureInfo("fr-FR");
}
|
Autocomplete list
<MudAutocomplete
T="MyNamespace.CurrencyResponse"
Label="Currency"
@bind-Value="item.Currency"
SearchFuncWithCancel="@SearchCurrenciesByCodeAsync"
ToStringFunc="@(x => x == null ? null : x.Code)"
Strict="false"
ShowProgressIndicator="true">
<BeforeItemsTemplate>
<MudText Class="px-4 py-1">3 characters min.</MudText>
</BeforeItemsTemplate>
<NoItemsTemplate>
<MudText Align="Align.Center" Class="px-4 py-1">
No matching currencies found
</MudText>
</NoItemsTemplate>
|
// call to the web API
private async Task<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(string value, CancellationToken cancellationToken)
=> await CurrencyClient.GetCurrenciesByCodeAsync(value, cancellationToken);
// cache all the currencies
private async Task<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(string value)
{
var currencies = await CurrencyClient.GetAllAsync();
// if text is null or empty, show complete list
return string.IsNullOrEmpty(value)
? (IEnumerable<CurrencyResponse>)currencies
: currencies.Where(x => x.Code.StartsWith(value, StringComparison.InvariantCultureIgnoreCase));
}
|
Select
@* with an enum *@
<MudSelect @bind-Value="logLevel" Label="Log level">
@foreach (LogLevel logLevel in Enum.GetValues(typeof(LogLevel)))
{
<MudSelectItem Value="@logLevel">@logLevel.ToString()</MudSelectItem>
}
</MudSelect>
@* with a list of items *@
<MudSelect
T="Namespace.Item"
@bind-Value="@selectedItem"
Label="Item"
AnchorOrigin="Origin.BottomCenter">
@foreach (var item in items)
{
<MudSelectItem Value="@item">@item.Description</MudSelectItem>
}
</MudSelect>
@* with static items *@
<MudSelect @bind-Value="@selectedItem" Label="Item">
<MudSelectItem Value="@("Item1")">Item1</MudSelectItem>
<MudSelectItem Value="@("Item2")">Item2</MudSelectItem>
</MudSelect>
|
private readonly List<Item> items = new();
private Item selectedItem = default!;
protected override async Task OnInitializedAsync()
{
// fetch items
var item = items.FirstOrDefault(x => x.Description == "best item");
if (item is not null)
{
selectedItem = item;
}
StateHasChanged();
}
|
File Upload
<MudFileUpload T="IReadOnlyList<IBrowserFile>"
Accept=".pdf, .csv"
AppendMultipleFiles
MaximumFileCount="@(int.MaxValue)"
FilesChanged="UploadFileAsync"
Class="mt-0">
<ActivatorContent>
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
StartIcon="@Icons.Material.Filled.UploadFile">
Load
</MudButton>
</ActivatorContent>
</MudFileUpload>
|
private async Task UploadFileContentAsync(IReadOnlyList<IBrowserFile> files)
{
var filesTooBig = files.Where(x => x.Size > 512000).ToArray();
errors.AddRange(filesTooBig.Select(GetFileTooBigErrorMessage));
var tasks = files
.Except(filesTooBig)
.Select(
async x => new
{
name = x.Name,
content = await GetFileContentAsync(x)
});
var fileContents = await Task.WhenAll(tasks);
static async Task<byte[]> GetFileContentAsync(IBrowserFile file)
{
using var stream = file.OpenReadStream();
using var memoryStream = new MemoryStream();
await stream.CopyToAsync(memoryStream);
return memoryStream.ToArray();
}
}
|
Icons
<MudIcon Icon="@Icons.Material.Filled.Sell" Title="Favorite" Color="Color.Primary" Size="Size.Small" />
<MudIconButton Icon="@Icons.Material.Filled.Home" />
<MudIconButton Icon="@myIcon" />
@code
{
string myIcon = MudBlazor.Icons.Material.Filled.Home;
}
|
CSS utilities
Margin Padding
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 |
xs sm md lg xl xxl | <600 960 1280 1920 2560 >2560 |
<MudPaper Class="pa-4 mr-16">padding on the 4 sides 16px</MudPaper>
<MudPaper Class="mr-16">margin right 64px</MudPaper>
<MudPaper Class="ma-1 ma-sm-4 ma-xl-16">margin 4px, 16px on screens from 600-1920px, 64px from 1920px/MudPaper>
|
Display
Class | Property |
---|---|
d-block | display: block; |
d-inline | display: inline; |
d-none | display: none; |
Flexbox
Class | Property |
---|---|
d-flex | display: flex; |
justify-center | justify-content: center; |
justify-space-around | justify-content: space-around; |
justify-end | justify-content: flex-end; |
flex-wrap | flex-wrap: wrap; |
Position
Code | Description |
---|---|
absolute | position: absolute; |
Border
Code | Description |
---|---|
border | border-width: 1px; |
border-solid | border-style: solid; |
mud-border-primary |
Responsivity with Breakpoints
@* hide the MudCard for screens < 600px *@
<MudHidden Breakpoint="Breakpoint.Xs" Invert="true">
<MudCard Class="pa-5">
<MudText>SM and Down</MudText>
</MudCard>
</MudHidden>
|
Cursor / Mouse
<MudPaper Class="cursor-pointer">Hand with finger raised</MudPaper>
<MudPaper Class="cursor-help">Question mark</MudPaper>
|
Colors
<MudPaper Color="Color.Primary">
Color enum
</MudPaper>
<MudPaper Class="mud-info mud-secondary-text">
CSS and theme colors. background: theme info blue; color: theme secondary pink
</MudPaper>
<!-- mud-theme-primary vs mud-primary -->
<MudPaper Style="@($"color:{theme.Palette.Dark}; background:{theme.Palette.Warning};")">
C# and theme colors
</MudPaper>
<MudPaper Class="blue lighten-4 red-text text-darken-4">
CSS and material colors background: blue lighten4; color: red darken4
</MudPaper>
<MudPaper Style="@($"color:{Colors.Blue.Lighten4}; background:{Colors.Red.Darken4};")">
C# and material colors
</MudPaper>
<span style="color: var(--mud-palette-warning);">C# and CSS colors</span>
@code {
private MudTheme theme = new MudTheme();
}
|
Theme
Shared/MainLayout.razor |
<MudThemeProvider IsDarkMode="true" Theme="customTheme" />
@code {
MudTheme customTheme = new MudTheme
{
PaletteDark = new PaletteDark
{
Background = "#222"
},
LayoutProperties = new LayoutProperties
{
DrawerWidthLeft = "160px" // --mud-drawer-width-left 240px
}
};
}
|
wwwroot/css/theme.css |
.mud-icon-default {
color: var(--mud-palette-primary);
}
|
CSS isolation
|
MyPage.razor |
<div>
<MudText Typo="Typo.h1" id="title1">@name</MudText>
<h2 id="title2">@name</h2>
<div>
|
MyPage.razor.css |
::deep title1 { } title2 { } |
Build component in the code-behind
MyPage.razor |
<MudTd DataLabel="Type">
@GetIconFromType(context.Type)
</MudTd>
|
MyPage.razor.cs |
private static RenderFragment GetIconFromType(string type)
=> builder =>
{
builder.OpenComponent<MudIcon>(0);
builder.AddAttribute(1, "Title", type);
builder.AddAttribute(2, "Icon", @Icons.Material.Filled.Money);
builder.AddAttribute(3, "Color", type switch
{
"deposit" => Color.Success,
"withdrawal" => Color.Warning,
"charge" => Color.Error,
_ => throw new NotSupportedException($"The type '{type}' is not supported.")
});
builder.CloseComponent();
};
|
Installation
New project from template
# 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
# --no-https is not available
|
Remove HTTPS
Program.cs |
// remove
// app.UseHttpsRedirection();
|
Properties/launchSettings.json |
{
"iisSettings": {
"iisExpress": {
"applicationUrl": "http://localhost:5000",
// "sslPort": 44393 // remove
}
},
"profiles": {
"MudBlazorThemeManager": {
"applicationUrl": "http://localhost:5000", // remove https url
|
.NET 7
By default the template set the project to .NET 6
MYproject.csproj |
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
|
.vscode/launch.json |
{
"configurations": [
{
"program": "${workspaceFolder}/bin/Debug/net7.0/MyProject.dll",
|
_Layout.cshtml
Remove _Layout.cshtml
_Host.cshtml |
Shared/MainLayout.razor |
Shared/MainLayout.razor.css |
Shared/NavMenu.razor.css |
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 />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
|