MudBlazor.Extensions
1.7.89-prev-2406281250-main
See the version list below for details.
dotnet add package MudBlazor.Extensions --version 1.7.89-prev-2406281250-main
NuGet\Install-Package MudBlazor.Extensions -Version 1.7.89-prev-2406281250-main
<PackageReference Include="MudBlazor.Extensions" Version="1.7.89-prev-2406281250-main" />
paket add MudBlazor.Extensions --version 1.7.89-prev-2406281250-main
#r "nuget: MudBlazor.Extensions, 1.7.89-prev-2406281250-main"
// Install MudBlazor.Extensions as a Cake Addin #addin nuget:?package=MudBlazor.Extensions&version=1.7.89-prev-2406281250-main&prerelease // Install MudBlazor.Extensions as a Cake Tool #tool nuget:?package=MudBlazor.Extensions&version=1.7.89-prev-2406281250-main&prerelease
MudBlazor.Extensions
The MudBlazor.Extensions is a convenient package that extends the capabilities of the MudBlazor component library. This guide will demonstrate the setup process for your project, along with detailed explanations of the components, extensions, and functionalities provided. It's important to note that this package requires a MudBlazor project and the referenced MudBlazor package. For further information and assistance, please visit the official MudBlazor documentation at MudBlazor and MudBlazor/Templates.
Demos
Try Online
Table of Contents
Installation
The installation process is straightforward. All you need to do is add the MudBlazor.Extensions
NuGet package to your Blazor project. You can do this using the following code:
<PackageReference Include="MudBlazor.Extensions" Version="*" />
Setting Up MudBlazor.Extensions
Setting up MudBlazor.Extensions involves three steps:
- Update the
_Imports.razor
with the following lines:
@using MudBlazor.Extensions
@using MudBlazor.Extensions.Components
@using MudBlazor.Extensions.Components.ObjectEdit
- Register MudBlazor.Extensions in your
Startup.cs
in theConfigureServices
method.
// use this to add MudServices and the MudBlazor.Extensions
builder.Services.AddMudServicesWithExtensions();
// or this to add only the MudBlazor.Extensions but please ensure that this is added after mud servicdes are added. That means after `AddMudServices`
builder.Services.AddMudExtensions();
- (Optional) Define default dialogOptions.
builder.Services.AddMudServicesWithExtensions(c =>
{
c.WithDefaultDialogOptions(ex =>
{
ex.Position = DialogPosition.BottomRight;
});
});
if your are running on Blazor Server side, you should also use the MudBlazorExtensionMiddleware
you can do this in your startup or program.cs by adding the following line on your WebApplication:
app.UseMudExtensions();
(Optional) if you have problems with automatic loaded styles you can also load the styles manually by adding the following line to your index.html
or _Host.cshtml
<link id="mudex-styles" href="_content/MudBlazor.Extensions/mudBlazorExtensions.min.css" rel="stylesheet">
If you have loaded styles manually you should disable the automatic loading of the styles in the AddMudExtensions
or AddMudServicesWithExtensions
method. You can do this by adding the following line to your Startup.cs
in the ConfigureServices
method.
builder.Services.AddMudServicesWithExtensions(c => c.WithoutAutomaticCssLoading());
Showcase Videos
<details> <summary>Expand videos</summary>
Showcase
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/39e06d88-a947-43cd-9151-a7cf96bcd849
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/3c77b8bf-6198-4385-b452-f25cc2852e0a
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/ce9bdf86-aaf9-4f04-b861-bd57698bb7f5
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/6b054bdc-a413-437c-8dbb-ded4e242d2a7
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/57f39cec-c3e9-43aa-8bfe-260d9aa05f63
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/c6a0e47d-2ed6-4a4e-b2b8-f4963274c9f8
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/3fc658d7-7fa2-487e-98d2-91860e00374a
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/aa266253-f1ac-450d-bd7b-510d2b99e3c0
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/cf4ff772-953e-4462-90fc-b32249083fb8
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/79bccec3-9e04-4901-a7d2-a08c9cef031c
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/8963eaaa-0f96-4c76-8e3c-c945920b2c23
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/cd5bab33-75cd-442d-a156-f43cc3a1c78c
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/8545a70c-1ce2-4683-8f1e-40a69efe462b
https://github.com/fgilde/MudBlazor.Extensions/assets/11070717/5c736020-94ba-431a-94f7-8e437530978e
</details>
Components
This section introduces you to the various components provided by the MudBlazor.Extensions.
MudExObjectEdit
The MudExObjectEdit
is a robust component that allows for object editing and automatically generates the corresponding UI. This component supports automatic validation for DataAnnotation Validations or fluent registered validations for your model.
To use MudExObjectEdit
, you can simply use the MudExObjectEditForm
and pass your model to it as shown below:
<MudExObjectEditForm OnValidSubmit="@OnSubmit" Value="@MyModel"></MudExObjectEditForm>
You can also utilize the MudExObjectEditDialog
to edit your model in a dialog. The easiest way to do this is by using the extension method EditObject
on the IDialogService
.
dialogService.EditObject(User, "Dialog Title", dialogOptionsEx);
MudExStructuredDataEditor
The MudExStructuredDataEditor
is a component that allows object editing and automatically generates the corresponding UI based on structured data like json, xml or yaml.
This component supports all the same as MudExObjectEditForm.
To use MudExStructuredDataEditor
, you can simply bind your data string shown as bellow:
<MudExStructuredDataEditor @bind-Data="_dataString"></MudExStructuredDataEditor>
You can also utilize the MudExStructuredDataEditor
to edit your data in a dialog. The easiest way to do this is by using the extension method EditStructuredDataString
on the IDialogService
.
dialogService.EditStructuredDataString(_dataType, _dataString, $"Auto Generated Editor for {_dataType}", ((_,_) => Task.FromResult("")));
You can find a running Sample here
MudExFileDisplay
The MudExFileDisplay
component is designed to display file contents, such as a preview before uploading or for referenced files.
This component can automatically handle URLs or streams and deliver the best possible display.
Additionally, you can implement IMudExFileDisplay
in your own component to register a custom file display.
This is excacly what MudExFileDisplayZip
does, which is used by MudExFileDisplay
to display zip files or what MudExFileDisplayMarkdown
does to display markdown files.
Example of using MudExFileDisplay
:
<MudExFileDisplay FileName="NameOfYourFile.pdf" ContentType="application/pdf" Url="@Url"></MudExFileDisplay>
MudExFileDisplayZip
This component can be automatically utilized by MudExFileDisplay
, but can also be used manually if necessary.
Note: If you're using the ContentStream it should not be closed or disposed.
<MudExFileDisplayZip AllowDownload="@AllowDownload" RootFolderName="@FileName" ContentStream="@ContentStream" Url="@Url"></MudExFileDisplayZip>
MudExFileDisplayDialog
A small dialog for the MudExFileDisplay
Component. It can be used with static helpers as shown below:
await MudExFileDisplayDialog.Show(_dialogService, dataUrl, request.FileName, request.ContentType, ex => ex.JsRuntime = _jsRuntime);
It can be used directly with an IBrowserFile:
IBrowserFile file = File;
await MudExFileDisplayDialog.Show(_dialogService, file, ex => ex.JsRuntime = _jsRuntime);
Or it can be used manually with the MudBlazor dialogService:
var parameters = new DialogParameters
{
{nameof(Icon), BrowserFileExtensions.IconForFile(contentType)},
{nameof(Url), url},
{nameof(ContentType), contentType}
};
await dialogService.ShowEx<MudExFileDisplayDialog>(title, parameters, optionsEx);
MudExUploadEdit
MudExUploadEdit
is a versatile file upload component with a wide range of features such as MIME and extension whitelisting/blacklisting, folder upload, drag and drop, copy and paste, renaming, and integration with Dropbox, Google Drive, and OneDrive.
Extensions
Resizable or Draggable Dialogs
You can make your dialogs resizable or draggable using the following code snippet:
var options = new DialogOptionsEx { Resizeable = true, DragMode = MudDialogDragMode.Simple, CloseButton = true, FullWidth = true };
var dialog = await _dialogService.ShowEx<YourMudDialog>("Your Dialog Title", parameters, options);
Adding a Maximize Button
You can add a maximize button to your dialogs with the following code:
var options = new DialogOptionsEx { MaximizeButton = true, CloseButton = true };
var dialog = await _dialogService.ShowEx<YourMudDialog>("Your Dialog Title", parameters, options);
Adding Custom Buttons
To add custom buttons to your dialog, first define the callback methods as JSInvokable
in your component code:
[JSInvokable]
public void AlarmClick()
{
// OnAlarmButton Click
}
[JSInvokable]
public void ColorLensClick()
{
// OnColorLensButton Click
}
Next, define your custom buttons:
var buttons = new[]
{
new MudDialogButton( DotNetObjectReference.Create(this as object), nameof(AlarmClick)) {Icon = Icons.Material.Filled.Alarm},
new MudDialogButton( DotNetObjectReference.Create(this as object), nameof(ColorLensClick)) {Icon = Icons.Material.Filled.ColorLens},
};
Finally, add your custom buttons to the dialog:
var options = new DialogOptionsEx { MaximizeButton = true, CloseButton = true, Buttons = buttons };
var dialog = await _dialogService.ShowEx<YourMudDialog>("Your Dialog Title", parameters, options);
Your dialog can now look like this:
Using Animation to Show Dialog
You can use animation to display your dialog. This is done by setting the Animation
property of DialogOptionsEx
.
var options = new DialogOptionsEx {
MaximizeButton = true,
CloseButton = true,
Buttons = buttons,
Position = DialogPosition.CenterRight,
Animation = AnimationType.SlideIn,
AnimationDuration = TimeSpan.FromMilliseconds(500),
FullHeight = true
};
var dialog = await _dialogService.ShowEx<YourMudDialog>("Your Dialog Title", parameters, options);
When you animate a dialog with dialogServiceEx, it's recommended to add the class mud-ex-dialog-initial
to your dialog to ensure no visibility before animation.
<MudDialog Class="mud-ex-dialog-initial">
NOTE: All animations can be used on other components as well. Currently, the following animations are supported:
SlideIn,FadeIn,Scale,Slide,Fade,Zoom,Roll,JackInTheBox,Hinge,Rotate,Bounce,Back,Jello,Wobble,Tada,Swing,HeadShake,Shake,RubberBand,Pulse,Flip,FlipX,FlipY
.
Using Extension Method with an Action<YourDialog>
Instead of using DialogParameters
, you can call the extension method with an Action<YourDialog>
await dialogService.ShowEx<SampleDialog>("Simple Dialog", dialog => { dialog.ContentMessage = "Hello"; },options);
Conclusion
This README file provides an overview of the MudBlazor.Extensions library, which is designed to simplify and enhance the development process in Blazor using MudBlazor. The library contains a variety of components, extensions, and features that aim to reduce the time and effort required to build intricate UIs. For additional information or help, visit the official MudBlazor website or MudBlazor GitHub repository.
We hope you find this library helpful and encourage you to provide any feedback or contribute to its development.
License
MudBlazor.Extensions is released under the MIT License. See the bundled LICENSE file for details.
Change Log
Latest Changes:
- 1.7.88 > Dialogs now supporting a can close event to allow canceling the close event see sample
- 1.7.88 > Add new Components MudExTreeView.
- 1.7.88 > Update MudBlazor to 6.20.0
- 1.7.88 > New Component
MudExFileDisplayExcel
to support preview of Excel files in MudExFileDisplay and MudExUploadEdit . - 1.7.88 > MudExUploadEdit now supports recording audio.
- 1.7.88 > New Component MudExGravatar.
- 1.7.88 > Dialogs now supporting CustomSize and CustomPostion to allow more flexibility.
- 1.7.88 > New service IDialogEventService to allow handling of dialog events
- 1.7.88 > Dialog supports now a CloseAnimation
- 1.7.88 > New Service ISpeechRecognitionService to allow easy speech to text conversion or audio recording without any UI
- 1.7.88 > New Component MudExSpeechToTextButton to allow easy speech to text conversion or audio recording
- 1.7.87 > Small minor BugFixes
- 1.7.87 > Improve key navigation in MudExSelect and MudExList
- 1.7.87 > Update MudBlazor to 6.19.1
- 1.7.86 > Update MudBlazor to 6.18.0
Full change log can be found here
Planned Features
Notice this is just a first preview version. There are some features planned like
- Dragging with snap behaviour
If you like this package, please star it on GitHub and share it with your friends If not, you can give a star anyway and let me know what I can improve to make it better for you.
Links
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- AuralizeBlazor (>= 1.0.2)
- Blazored.FluentValidation (>= 2.2.0)
- BlazorJS (>= 2.1.6)
- BlazorParameterCastingMagic (>= 1.2.23060811)
- BuildBundlerMinifier (>= 3.2.449)
- ExcelDataReader (>= 3.6.0)
- ExcelDataReader.DataSet (>= 3.6.0)
- Microsoft.AspNetCore.StaticFiles (>= 2.2.0)
- MudBlazor (>= 6.20.0)
- MudBlazor.Markdown (>= 1.0.2)
- Nextended.Blazor (>= 7.0.38)
- Nextended.Core (>= 7.0.54)
- OneOf (>= 3.0.271)
- SharpCompress (>= 0.37.2)
- SixLabors.ImageSharp (>= 3.1.4)
-
net7.0
- AuralizeBlazor (>= 1.0.2)
- Blazored.FluentValidation (>= 2.2.0)
- BlazorJS (>= 2.1.6)
- BlazorParameterCastingMagic (>= 1.2.23060811)
- BuildBundlerMinifier (>= 3.2.449)
- ExcelDataReader (>= 3.6.0)
- ExcelDataReader.DataSet (>= 3.6.0)
- Microsoft.AspNetCore.StaticFiles (>= 2.2.0)
- MudBlazor (>= 6.20.0)
- MudBlazor.Markdown (>= 1.0.2)
- Nextended.Blazor (>= 7.0.38)
- Nextended.Core (>= 7.0.54)
- OneOf (>= 3.0.271)
- SharpCompress (>= 0.37.2)
- SixLabors.ImageSharp (>= 3.1.4)
-
net8.0
- AuralizeBlazor (>= 1.0.2)
- Blazored.FluentValidation (>= 2.2.0)
- BlazorJS (>= 2.1.6)
- BlazorParameterCastingMagic (>= 1.2.23060811)
- BuildBundlerMinifier (>= 3.2.449)
- ExcelDataReader (>= 3.6.0)
- ExcelDataReader.DataSet (>= 3.6.0)
- Microsoft.AspNetCore.StaticFiles (>= 2.2.0)
- MudBlazor (>= 6.20.0)
- MudBlazor.Markdown (>= 1.0.2)
- Nextended.Blazor (>= 7.0.38)
- Nextended.Core (>= 7.0.54)
- OneOf (>= 3.0.271)
- SharpCompress (>= 0.37.2)
- SixLabors.ImageSharp (>= 3.1.4)
NuGet packages (4)
Showing the top 4 NuGet packages that depend on MudBlazor.Extensions:
Package | Downloads |
---|---|
MudExRichTextEditor
MudExRichTextEditor is a custom reusable control that allows us to easily consume Quill combining in a MudBlazor project. |
|
Corsinvest.AppHero.Core.MudBlazorUI
Package Description |
|
AonBlzrDevOps
Package Description |
|
MudExObjectEdit.CodeGatorAdapter
This is a small package to combine CG.Blazor.Forms with the MudExObjectEdit from MudBlazor.Extensions |
GitHub repositories (2)
Showing the top 2 popular GitHub repositories that depend on MudBlazor.Extensions:
Repository | Stars |
---|---|
DragoQCC/HardHatC2
A C# Command & Control framework
|
|
fgilde/MudBlazor.Extensions
MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com
|