MgLibrary 0.2607.2.2

Memgroups Blazor Library

A comprehensive, high-performance Blazor component library built with .NET 10 and Tailwind CSS.

Features

• 80+ Components: A wide range of UI components from basic buttons to advanced data grids and charts.
• Tailwind CSS Integration: Fully styled using Tailwind CSS for a modern, responsive look.
• Modern .NET: Leveraging the latest features of .NET 10 and Blazor.
• Highly Customizable: Easy to theme and adapt to your application's design.

Component Categories

• Inputs & Editors: MgInput, MgFileUpload, MgSlider, MgCheckbox, MgDatePicker, MgAutoComplete, MgRichTextEditor, etc.
• Modals & Feedback: MgToaster, MgConfirmDialog, MgAlert, MgTooltip, MgDialog, etc.
• Data & Grids: MgDataGrid with sorting, filtering, and custom templates.
• Charts: MgLineChart, MgPieChart, MgBarChart.
• Containers & Layout: MgCard, MgTabs, MgAccordion, MgSplitter, etc.
• Navigation: MgMenu, MgToolbar, MgNavLinks.
• Advanced Components: MgScheduler, MgTimeline, MgJViewer (JSON Viewer).

Installation

1. Install the NuGet Package

dotnet add package MgLibrary

2. Add Styles and Scripts

Add the following lines to your index.html (Blazor WebAssembly) or App.razor / _Host.cshtml (Blazor Server):

<link href="_content/MgLibrary/css/mglibrary.min.css" rel="stylesheet" />
<script src="_content/MgLibrary/js/mglibrary.min.js"></script>

3. Register Services

In your Program.cs, add the following line:

builder.Services.AddMgServices();

Usage

To use the components, add the following namespaces to your _Imports.razor:

@using MgLibrary
@using MgLibrary.Buttons
@using MgLibrary.Modals
@using MgLibrary.Inputs
@using MgLibrary.Charts
@using MgLibrary.DataContainers.DataGrid
@* Add other namespaces as needed *@

Then you can use any component in your Razor pages:

<MgButton Variant="MgEnums.MgButtonVariant.Filled" OnClick="HandleClick">
    Click Me
</MgButton>

Theming

MgLibrary is designed to be highly customizable, whether you prefer C# or CSS.

1. C# Inheritance (Fully supported via NuGet)

Even when using the library as a NuGet package, you can create a new theme by inheriting from the public MgTheme class in your project.

public class MyCustomTheme : MgTheme
{
    public MyCustomTheme()
    {
        Primary = "#FF5722";
        IsGlass = true; // Enable glass effect
    }
}

2. Inline Overrides & Built-in Themes

For quick tweaks or using built-in themes, use the MgThemeProvider parameters.

@* Using a built-in theme *@
<MgThemeProvider Theme="new MgOfficeGlassTheme()"> ... </MgThemeProvider>

@* Using inline overrides (supports bool like IsGlass) *@
<MgThemeProvider ThemeOverrides="@(new Dictionary<string, string> { ["Primary"] = "#E91E63", ["IsGlass"] = "true" })">
    ...
</MgThemeProvider>

3. CSS-Only Themes (via ThemeClass)

If you prefer to define themes entirely in CSS, you can use the ThemeClass parameter. This is ideal for consumers who don't want to write C# theme code.

Your CSS:

.my-royal-theme {
    --mg-primary: #FFD700;
    --mg-surface: rgba(255, 255, 255, 0.8);
}
.my-royal-theme[data-theme="dark"] {
    --mg-primary: #DAA520;
}

Usage:

<MgThemeProvider ThemeClass="my-royal-theme" SuppressInternalStyles="true">
    <App />
</MgThemeProvider>

You can also use built-in CSS themes by applying their classes:

<MgThemeProvider ThemeClass="mg-theme-office-glass" SuppressInternalStyles="true">
    ...
</MgThemeProvider>

Built-in Themes

The library comes with several built-in themes (both C# classes and CSS classes):

• MgTheme / (Default)
• MgDarkTheme
• MgForestTheme / .mg-theme-forest
• MgOfficeGlassTheme / .mg-theme-office-glass
• MgOfficeGlassDarkTheme

Glass Effect

When using a Glass theme, the library automatically applies backdrop-filter: blur to surfaces. You can also manually apply the glass effect to any element using the mg-glass utility class.

<div class="bg-mg-surface mg-glass">
    Content with glass effect
</div>

License

This project is licensed under the MIT License.