Home
Softono
CodeBeam.MudBlazor.Extensions

CodeBeam.MudBlazor.Extensions

Open source MIT C#
580
Stars
100
Forks
99
Issues
19
Watchers
1 month
Last Commit

About CodeBeam.MudBlazor.Extensions

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

Platforms

Web Self-hosted Windows

Languages

C#

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 Discord codecov

Utilities

  • MudCssManager

Components

  • MudAnimate
  • MudBarcode
  • MudChipField
  • MudCodeInput
  • MudCodeViewer
  • MudColorProvider
  • MudComboBox
  • MudCsvMapper
  • MudDateTimePicker
  • 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://mudextensions.codebeam.org/api

Supported MudBlazor Versions

MudExtensions MudBlazor .NET Support
6.0.0 - 6.0.3 6.0.16 .NET 6 Ended
6.0.4 - 6.0.12 6.0.17 - 6.0.18 .NET 6 Ended
6.1.0 - 6.1.4 6.1.0 - 6.1.2 .NET 6 & 7 Ended
6.1.5 - 6.1.9 6.1.4 - 6.1.7 .NET 6 & 7 Ended
6.2.0 - 6.2.5 6.1.8 .NET 6 & 7 Ended
6.2.6 - 6.4.8 6.1.9 - 6.2.0 .NET 6 & 7 Ended
6.4.9 - 6.6.x 6.2.1 - 6.11.1 .NET 6 & 7 Ended
6.8.0 - 6.9.2 6.12.0 - 6.21.0 .NET 6 & 7 & 8 Ended
7.0.0 - 7.1.0 7.0.0 - 7.16.0 .NET 7 & 8 Ended
8.0.0 => 8.0.0 => .NET 8 & 9 Limited
9.0.0 => 9.0.0 => .NET 8 & 9 & 10 Full

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" />

// For MudCodeViewer component only (needs CodeBeam.MudBlazor.Extensions.Code package)
<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" rel="stylesheet" />

Add the following to your HTML body section

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

// For MudCodeViewer component only (needs CodeBeam.MudBlazor.Extensions.Code package)
<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.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

https://user-images.githubusercontent.com/78308169/194701300-e4ad517a-8fbb-4a5e-9407-a5a585157685.mp4

MudCodeInput

https://user-images.githubusercontent.com/78308169/213863531-fa817188-3194-4858-8642-ace98a324b32.mp4

MudDateWheelPicker

https://user-images.githubusercontent.com/78308169/198103805-56f9403b-dcdd-4e82-a02e-e53426d55ad5.mp4

MudFontPicker

https://user-images.githubusercontent.com/78308169/196959281-76d6e05b-8368-43a2-a562-658dbd4ea3a9.mp4

MudGallery

https://user-images.githubusercontent.com/78308169/197382396-6ff0a926-e52a-4554-b408-5736ebd539c9.mp4

MudInputStyler

https://user-images.githubusercontent.com/78308169/198103898-41a8eb8a-ba0a-4f06-adfe-ced24c76b4e5.mp4

MudPopup

https://user-images.githubusercontent.com/78308169/198975726-d2633c10-8059-4fc6-8e8a-ce9dd79ed018.mp4

MudSpeedDial

https://user-images.githubusercontent.com/78308169/194750397-e0dfd08c-c297-426f-bcd6-55ce2e7c4a25.mp4

MudStepper

https://user-images.githubusercontent.com/78308169/195593490-6fd8d5fe-0472-4b9b-8180-ef6b9d94bcbd.mp4

MudWheel

https://user-images.githubusercontent.com/78308169/195979884-7cf1698c-ce0a-400f-83a7-2accf6fff8c5.mp4

Contribution

Feel free to contribute.

Updating css / Compiling from scss

  • If you update or create an new scss file you will need to uncomment MudBlazor.SassCompiler line in CodeBeam.MudBlazor.Extensions.csproj otherwise added and changed scss file has no effect on project.