/CodeBeam.MudBlazor.Extensions

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

Primary LanguageC#MIT LicenseMIT

CodeBeam.MudExtensions

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

TheMudSecondary

GitHub Repo stars GitHub last commit Contributors NuGet version NuGet downloads

Utilities

  • MudCssManager

Components

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

Extended Components

  • MudListExtended
  • MudSelectExtended
  • MudStepperExtended
  • MudTextFieldExtended

Playground

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 & 7
6.1.5 - 6.1.9 6.1.4 - 6.1.7 .NET 6 & 7
6.2.0 - 6.2.5 6.1.8 .NET 6 & 7
6.2.6 - 6.4.8 6.1.9 - 6.2.0 .NET 6 & 7
6.4.9 - 6.6.x 6.2.1 - 6.11.1 .NET 6 & 7
6.8.0 => 6.12.0 => .NET 6 & 7 & 8
7.0.0 => 7.3.0 => .NET 7 & 8

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