DOCSEARCHbyAlgolia
Submit Docs

CodeBeam.MudExtensions Documentation

repository·dev·Indexed 20 days ago

https://github.com/codebeamorg/codebeam.mudblazor.extensions

A collection of third-party extension components and utilities for the MudBlazor framework. It provides utilities like MudCssManager and a wide range of components for animation, inputs, layout, and text styling, as well as extended versions of standard MudBlazor components such as MudListExtended and MudTextFieldExtended.

Tokens
1.4K
Snippets
5
Records
7
Agent score
20%

What's inside CodeBeam.MudExtensions

  1. Overview of MudExtensions components and utilities

    dev

    CodeBeam.MudExtensions provides a variety of utility classes and UI components designed to extend the capabilities of MudBlazor.

    Utilities

    • MudCssManager

    Components

    • Animation & Visuals: MudAnimate, MudColorProvider, MudGallery, MudLoading, MudLoadingButton, MudSpeedDial, MudScrollbar, MudSection, MudTeleport.
    • Inputs & Pickers: MudBarcode, MudChipField, MudCodeInput, MudCodeViewer, MudComboBox, MudDateTimePicker, MudDateWheelPicker, MudFontPicker, MudPasswordField, MudRangeSlider, MudSwitchM3, MudToggle, MudWheel.
    • Layout & Navigation: MudPopup, MudPage, MudSplitter, MudStepper, MudTransferList, MudWatch.
    • Text & Styling: MudInputStyler, MudTextM3.

    Extended Components

    These components provide enhanced functionality over standard MudBlazor components:

    • MudListExtended
    • MudSelectExtended
    • MudStepperExtended
    • MudTextFieldExtended

  2. Update CSS and JS asset paths in v 6.4.0

    dev

    Starting with version 6.4.0, the static asset paths for the library have changed. Update your index.html or App.razor to use the following paths to ensure styles and scripts load correctly.

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

  3. Install CodeBeam.MudExtensions

    dev

    To use CodeBeam.MudExtensions, you must first have MudBlazor set up in your project. Follow these steps to integrate the extensions:

    1. Add Static Assets: Add the CSS to your HTML <head> section and the JS to your HTML <body> section (e.g., in index.html, _Layout.cshtml, or _Host.cshtml).
    2. Register Services: Register the extension services in your Program.cs file.
    3. Add Namespace (Optional): Add the @using MudExtensions directive to your _Imports.razor for easier component access.
    <!-- 1. Add to <head> -->
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />

<!-- 2. Add to <body> -->
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>

<!-- 3. Register in Program.cs -->
using MudExtensions.Services;
builder.Services.AddMudExtensions();

<!-- 4. Optional: Add to _Imports.razor -->
@using MudExtensions

  4. Configure MudCodeViewer assets

    dev

    If you are using the MudCodeViewer component, you must install the CodeBeam.MudBlazor.Extensions.Code package and include the Prism.js assets in your HTML files.

    In the <head> section:

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

    In the <body> section:

    <script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>
    <!-- For MudCodeViewer component only -->
<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" rel="stylesheet" />
<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>

  6. Update MudStepper PreventStepChangeAsync signature in v 6.7.0

    dev

    In version 6.7.0, the PreventStepChangeAsync function on the MudStepper component has changed its signature to include a new parameter representing the target index. You must update your custom logic to accept this integer.

    Old signature: public Func<StepChangeDirection, Task<bool>> PreventStepChangeAsync

    New signature: public Func<StepChangeDirection, int, Task<bool>> PreventStepChangeAsync

    // The new signature requires the target index as the second parameter
MudStepper.PreventStepChangeAsync = async (direction, targetIndex) => 
{
    // Your logic here
    return false; // return true to prevent the change
};

  7. Supported MudBlazor and .NET versions

    dev

    Check the compatibility matrix to ensure your version of MudBlazor and .NET is supported by the version of MudExtensions you are using.

    MudExtensionsMudBlazor.NETSupport Status
    9.0.0 =>9.0.0 =>.NET 8, 9, 10Full
    8.0.0 =>8.0.0 =>.NET 8, 9Limited
    7.0.0 - 7.1.07.0.0 - 7.16.0.NET 7, 8Ended
    6.8.0 - 6.9.26.12.0 - 6.21.0.NET 6, 7, 8Ended
    .........Ended