MudBlazor.Extensions 1.2.7

MudBlazor.Extensions

MudBlazor.Extensions is a small extension for MudBlazor from https://mudblazor.com/

Using

Using is as easy it can be Sure you need a MudBlazor project and the referenced package to MudBlazor for more informations and help see https://mudblazor.com/ and https://github.com/MudBlazor/Templates

Add the nuget Package MudBlazor.Extensions to your blazor project

Now you can start using it. However if you want to use the Extensions components as well you should change your _Imports.razor and add this entries.

@using MudBlazor.Extensions
@using MudBlazor.Extensions.Components

Components

MudExFileDisplay

A Component to display file contents for example as preview before uploading or for referenced files. This components automatically tries to display as best as possible and can handle urls or streams directly. You can use it like this

 <MudExFileDisplay FileName="NameOfYourFile.pdf" ContentType="application/pdf" Url="@Url"></MudExFileDisplay>

MudExFileDisplayZip

This component is also automatically used by MudExFileDisplay but can also used manually if you need to.

<MudExFileDisplayZip AllowDownload="@AllowDownload" RootFolderName="@FileName" ContentStream="@ContentStream" Url="@Url"></MudExFileDisplayZip>

MudExFileDisplayDialog

A small dialog for the MudExFileDisplay Component. Can be used with static helpers to show like this

 await MudExFileDisplayDialog.Show(_dialogService, dataUrl, request.FileName, request.ContentType, ex => ex.JsRuntime = _jsRuntime);

Can be used directly with an IBrowserFile

 IBrowserFile file = File;
 await MudExFileDisplayDialog.Show(_dialogService, file, ex => ex.JsRuntime = _jsRuntime);

Can also be used completely manually with MudBlazor dialogService

var parameters = new DialogParameters
{
    {nameof(Icon), BrowserFileExtensions.IconForFile(contentType)},
    {nameof(Url), url},
    {nameof(ContentType), contentType}
};
await dialogService.ShowEx<MudExFileDisplayDialog>(title, parameters, optionsEx);

(Planned)

One of the next planned Component is an Multi upload component with Features like duplicate check, max size, specific allowed content types, max items, zip auto extract and many more. The current State looks like this

<br> <a href="https://github.com/fgilde/MudBlazor.Extensions/blob/main/MudBlazor.Extensions/Screenshots/UploadEdit.mkv?raw=true" target="_blank">Download Video</a>

Extensions

Make dialogs resizeable or draggable

       var options = new DialogOptionsEx { Resizeable = true, DragMode = MudDialogDragMode.Simple, CloseButton = true,  FullWidth = true };
       var dialog = await _dialogService.ShowEx<YourMudDialog>("your dialog title", parameters, options);

Add Maximize Button

       var options = new DialogOptionsEx { MaximizeButton = true, CloseButton = true};
       var dialog = await _dialogService.ShowEx<YourMudDialog>("your Dialog title", parameters, options);

Add Custom Buttons

First in your component code you need to define the callback methods as JSInvokable

        [JSInvokable]
        public void AlarmClick()
        {
           // OnAlarmButton Click
        }

        [JSInvokable]
        public void ColorLensClick()
        {
           // OnColorLensButton Click
        }

Then define your custom buttons

          var buttons = new[]
            {
                new MudDialogButton( DotNetObjectReference.Create(this as object), nameof(AlarmClick)) {Icon = Icons.Filled.Alarm},
                new MudDialogButton( DotNetObjectReference.Create(this as object), nameof(ColorLensClick)) {Icon = Icons.Filled.ColorLens},
            };

       var options = new DialogOptionsEx { MaximizeButton = true, CloseButton = true, Buttons = buttons};
       var dialog = await _dialogService.ShowEx<YourMudDialog>("your dialog title", parameters, options);

Now a dialog can look like this

Use animation to show dialog

       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);

If you animate a dialog with dialogServiceEx, you should add the class mud-ex-dialog-initial to your dialog to ensure no visibility before animation. Currently you can use following animations: SlideIn,FadeIn,Scale,Slide,Fade,Zoom,Roll,JackInTheBox,Hinge,Rotate,Bounce,Back,Jello,Wobble,Tada,Swing,HeadShake,Shake,RubberBand,Pulse,Flip,FlipX,FlipY

    <MudDialog Class="mud-ex-dialog-initial">

BETA (Work still in progress): All animations can currently also used on other components for example in this popover. <MudPopover Style="@(IsOpen $"animation: {new [] {AnimationType.FadeIn, AnimationType.SlideIn}.GetAnimationCssStyle(TimeSpan.FromSeconds(1))}" : "")">Popover content</MudPopover>

Change Log

• 1.2.6 Add New Animationtypes for dialog or manual using
• 1.2.4 Add Components MudExFileDisplay MudExFileDisplayZip and MudExFileDisplayDialog
• 1.2.2 Animations can be combined
• 1.2.2 Add animation fade
• 1.2.2 Improved animations for dialogs
• 1.2.0 Slide in animations for dialogs.
• 1.1.2 New option FullHeight for dialogs

Planned Features

Notice this is just a first preview version. There are some features planned like

• Multi upload component with preview and more
• Dragging with snap behaviour
• Automatic generation for a dialog to edit given model

Links

Github Repository | Nuget Package