CodeBeam.MudExtensions

Useful third party extension components for MudBlazor, from the community contributors.

TheMudSecondary

Utilities

• MudCssManager

Components

• MudAnimate
• MudBarcode
• MudChipField
• MudCodeInput
• MudColorProvider
• MudComboBox
• MudCsvMapper
• MudDateWheelPicker
• MudFontPicker
• MudGallery
• MudInputStyler
• MudLoading
• MudLoadingButton
• MudPage
• MudPasswordField
• MudPopup
• MudRangeSlider
• MudScrollbar
• MudSection
• MudSpeedDial
• MudSplitter
• MudStepper
• MudSwitchM3
• MudTeleport
• MudTextM3
• MudToggle
• MudTransferList
• MudWatch
• MudWheel

Extended Components

• MudListExtended
• MudSelectExtended
• MudTextFieldExtended

Playground

• Docs https://codebeam-mudextensions.pages.dev/
• Try MudExtensions https://trymudextensions.pages.dev/

Breaking Changes

Look at the Breaking Changes

API

https://codebeam-mudextensions.pages.dev/api

Supported MudBlazor Versions

MudExtensions	MudBlazor	.NET
6.0.0 - 6.0.3	6.0.16	.NET 6
6.0.4 - 6.0.12	6.0.17 - 6.0.18	.NET 6
6.1.0 - 6.1.4	6.1.0 - 6.1.2	.NET 6 & .NET 7
6.1.5 - 6.1.9	6.1.4 - 6.1.7	.NET 6 & .NET 7
6.2.0 - 6.2.5	6.1.8	.NET 6 & .NET 7
6.2.6 - 6.4.8	6.1.9 - 6.2.0	.NET 6 & .NET 7
6.4.9 - 6.5.x	6.2.1 - 6.9.0	.NET 6 & .NET 7

Installation

This extension uses MudBlazor features (need to set up MudBlazor if you didn't before), so only need to add this line described below:

Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml depending on whether you're running Server-Side or WASM.

<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />

Add the following to your HTML body section

<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>

Add the extension services into Program.cs

using MudExtensions.Services;
builder.Services.AddMudExtensions();

Adding namespace to _Imports.razor is not obligatory, but useful.

@using MudExtensions

Examples

Each example is recorded in the playground website.

MudAnimate

Animate.Types.mp4

MudCodeInput

20230121_134431.mp4

MudDateWheelPicker

20221026_210252.mp4

MudFontPicker

20221020_161423.mp4

MudGallery

20221023_111738.mp4

MudInputStyler

20221024_171842.mp4

MudPopup

20221031_122343.mp4

MudSpeedDial

20221009_125004.mp4

MudStepper

20221013_151108.mp4

MudWheel

20221015_123922.mp4

Contribution

Feel free to contribute.

Updating css / Compiling from scss

• If you update or create an new scss file you will need to compile the scss to css using excubo webcompiler during a solution rebuild.
• Install Nuget Package Excubo.WebCompiler for SCSS
  • From command line run: dotnet add package Excubo.WebCompiler
• If add a new scss file you will need to add define it in the MudExtensions.scs
• Uncomment this line
• The css will compile when you "rebuild" the solution
• Re-Comment the code you un commented in the previous step
• The css will compile on rebuild
• Re-Comment the code you un commented.

If adding a scss you will need to add define it in the MudExtensions.scs