### Complete Blazor Server Setup with MudBlazor.Extensions

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/getting-started/setup.md

Example Program.cs for Blazor Server showing service registration and middleware setup.

```csharp
using MudBlazor.Extensions;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Register MudBlazor and MudBlazor.Extensions
builder.Services.AddMudServicesWithExtensions();

var app = builder.Build();

// Configure the HTTP request pipeline
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// Add MudEx middleware
app.Use(MudExWebApp.MudExMiddleware);

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

--------------------------------

### Complete Blazor WebAssembly Setup with MudBlazor.Extensions

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/getting-started/setup.md

Example Program.cs for Blazor WebAssembly demonstrating service registration with custom dialog options.

```csharp
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using MudBlazor.Extensions;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Register MudBlazor and MudBlazor.Extensions
builder.Services.AddMudServicesWithExtensions(c =>
{
    c.WithDefaultDialogOptions(ex =>
    {
        ex.CloseButton = true;
        ex.MaxWidth = MaxWidth.Medium;
    });
});

await builder.Build().RunAsync();
```

--------------------------------

### Install MkDocs Dependencies

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/README.md

Install the necessary Python packages for building the documentation locally. Ensure Python 3.x and pip are installed.

```bash
pip install mkdocs mkdocs-material mkdocs-material-extensions pymdown-extensions
```

--------------------------------

### Theming Support Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/index.md

MudBlazor.Extensions components automatically adapt to the MudBlazor theme. This example shows setting a primary color for the upload component.

```razor
<MudExUploadEdit Color="Color.Primary" />
```

--------------------------------

### Complete MudExUploadEdit Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/upload-edit.md

A comprehensive example of the MudExUploadEdit component, showcasing various configuration options including multiple file selection, size and extension restrictions, drag-and-drop, cloud integration, and custom error messages. It also includes file size formatting and an upload function.

```razor
@page "/upload-demo"
@using Microsoft.AspNetCore.Components.Forms

<MudText Typo="Typo.h4" Class="mb-4">File Upload Demo</MudText>

<MudExUploadEdit @bind-Files="@selectedFiles"
                 Label="Upload Documents"
                 HelperText="Upload PDF, Word, or Excel files (max 10 MB)"
                 AllowMultiple="true"
                 MaxFileSize="10485760"
                 Extensions="@allowedExtensions"
                 ExtensionRestrictionType="RestrictionType.WhiteList"
                 AllowPreview="true"
                 AllowRename="true"
                 AllowDropBox="true"
                 AllowGoogleDrive="true"
                 ButtonVariant="Variant.Filled"
                 ButtonColor="Color.Primary"
                 TextErrorMaxFileSize="File size must not exceed 10 MB"
                 TextErrorExtensionNotAllowed="Only PDF, Word, and Excel files are allowed" />

<MudText Class="mt-4">Selected Files: @selectedFiles.Count</MudText>

@if (selectedFiles.Any())
{
    <MudList>
        @foreach (var file in selectedFiles)
        {
            <MudListItem Icon="@Icons.Material.Filled.InsertDriveFile">
                <MudText>@file.Name</MudText>
                <MudText Typo="Typo.caption">@FormatFileSize(file.Size)</MudText>
            </MudListItem>
        }
    </MudList>

    <MudButton Variant="Variant.Filled" 
               Color="Color.Primary" 
               OnClick="@UploadFiles">
        Upload Files
    </MudButton>
}

@code {
    private List<IBrowserFile> selectedFiles = new();
    
    private string[] allowedExtensions = new[] 
    { 
        ".pdf", ".doc", ".docx", ".xls", ".xlsx" 
    };

    private async Task UploadFiles()
    {
        foreach (var file in selectedFiles)
        {
            try
            {
                // Read file content
                using var stream = file.OpenReadStream(maxAllowedSize: 10485760);
                using var ms = new MemoryStream();
                await stream.CopyToAsync(ms);
                
                // Process file (save to server, database, etc.)
                Console.WriteLine($"Uploaded: {file.Name}");
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error uploading {file.Name}: {ex.Message}");
            }
        }
    }

    private string FormatFileSize(long bytes)
    {
        string[] sizes = { "B", "KB", "MB", "GB" };
        double len = bytes;
        int order = 0;
        while (len >= 1024 && order < sizes.Length - 1)
        {
            order++;
            len = len / 1024;
        }
        return $"{len:0.##} {sizes[order]}";
    }
}
```

--------------------------------

### MudExStyleBuilder - Usage Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExStyleBuilder.md

Demonstrates a basic usage scenario for the MudExStyleBuilder.

```APIDOC
## MudExStyleBuilder - Usage Example

### Description
This example shows how to initialize `MudExStyleBuilder` from an object, add a color style, and then retrieve the final style string.

### Example

```csharp
var styleBuilder = MudExStyleBuilder.FromObject(new { width = 100, height = 200 });
styleBuilder.WithColor("red");
string style = styleBuilder.ToString(); // Result: "width: 100px; height: 200px; color: red;"
```
```

--------------------------------

### Dialog Service Integration Examples

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/index.md

Examples of using the dialog service to invoke MudBlazor.Extensions dialogs for editing objects and displaying files.

```csharp
await dialogService.EditObject(myObject, "Edit Object");
await MudExFileDisplayDialog.Show(dialogService, file);
```

--------------------------------

### MudExSelect with Groups Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExSelect demonstrating grouping of options.

```razor
<MudExSelect @bind-Value="@selectedCountry" Label="Country">
    <MudExSelectItemGroup Text="North America">
        <MudExSelectItem Value="US">United States</MudExSelectItem>
        <MudExSelectItem Value="CA">Canada</MudExSelectItem>
    </MudExSelectItemGroup>
    <MudExSelectItemGroup Text="Europe">
        <MudExSelectItem Value="UK">United Kingdom</MudExSelectItem>
        <MudExSelectItem Value="DE">Germany</MudExSelectItem>
    </MudExSelectItemGroup>
</MudExSelect>
```

--------------------------------

### MudExCheckBox with Features

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExCheckBox demonstrating label, color, and required attributes.

```razor
@code {
    private bool isChecked = false;
}

<MudExCheckBox @bind-Checked="@isChecked" 
               Label="I agree to the terms and conditions"
               Color="Color.Primary"
               Required="true" />
```

--------------------------------

### MudExInput Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExInput for creating custom inputs with adornments and helper text.

```razor
<MudExInput @bind-Value="@value" 
            Label="Custom Input"
            HelperText="Enter a value"
            Adornment="Adornment.Start"
            AdornmentIcon="@Icons.Material.Filled.Search" />
```

--------------------------------

### Basic MudExSlideBar Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/other-components.md

Illustrates the basic setup for MudExSlideBar, controlling its open state and position.

```razor
<MudExSlideBar @bind-Open="@isOpen" Position="SlideBarPosition.Left">
    <MudText>Slide bar content</MudText>
</MudExSlideBar>
```

--------------------------------

### Complete MudExObjectEditDialog Configuration

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/object-edit.md

Example demonstrating comprehensive configuration for MudExObjectEditDialog, including layout, basic fields, conditional properties, custom rendering, and group modes.

```csharp
public class UserEditConfiguration : IObjectMetaConfiguration<User>
{
    public Task ConfigureAsync(ObjectEditMeta<User> meta)
    {
        // Layout
        meta.WrapEachInMudItem(i => i.xs = 6);

        // Basic fields
        meta.Property(m => m.FirstName)
            .WithLabel("First Name")
            .WithHelperText("Enter your first name")
            .WrapInMudItem(i => i.xs = 6);

        meta.Property(m => m.LastName)
            .WithLabel("Last Name")
            .WrapInMudItem(i => i.xs = 6);

        // Email with conditional readonly
        meta.Property(m => m.Email)
            .WithGroup("Contact Information")
            .WithAttributesIf(m => m.IsVerified,
                new KeyValuePair<string, object>("ReadOnly", true))
            .WrapInMudItem(i => i.xs = 12);

        // Conditional visibility
        meta.Property(m => m.AdminNotes)
            .WithGroup("Admin")
            .IgnoreIf(m => !m.IsAdmin);

        // Custom component
        meta.Property(m => m.Bio)
            .WithGroup("Profile")
            .RenderWith(e => e.Value, ConfigureEditor());

        // Set group mode
        meta.WithGroupMode(ObjectEditGroupMode.Tabs);

        return Task.CompletedTask;
    }

    private Action<MudTextField<string>> ConfigureEditor()
    {
        return editor =>
        {
            editor.Lines = 5;
            editor.Variant = Variant.Outlined;
        };
    }
}
```

--------------------------------

### MudExChipSelect Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExChipSelect allowing custom values and multi-selection.

```razor
@code {
    private HashSet<string> selectedTags = new();
    private List<string> availableTags = new() 
    { 
        "C#", "Blazor", "ASP.NET", "JavaScript", "TypeScript"
    };
}

<MudExChipSelect @bind-SelectedValues="@selectedTags"
                 Items="@availableTags"
                 Label="Select Technologies"
                 AllowCustomValues="true"
                 MultiSelection="true" />
```

--------------------------------

### MudExColorEdit Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExColorEdit with alpha channel and presets enabled.

```razor
@code {
    private MudExColor color = MudExColor.Primary;
}

<MudExColorEdit @bind-Value="@color"
                Label="Theme Color"
                ShowAlpha="true"
                ShowPresets="true" />
```

--------------------------------

### Start Speech Recording with Options

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/ISpeechRecognitionService.md

Initiates an asynchronous speech recording session using specified options and a callback for results. An optional callback can be provided for when the recording stops.

```csharp
Task<string> StartRecordingAsync(SpeechRecognitionOptions options, Action<SpeechRecognitionResult> callback, Action<string> stoppedCallback = null);
```

--------------------------------

### MudExImageViewer Gallery Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/display-media.md

Display a gallery of images using MudExImageViewer with thumbnail navigation and slideshow support. Requires a List<string> of image URLs.

```razor
@code {
    private List<string> images = new()
    {
        "image1.jpg",
        "image2.jpg",
        "image3.jpg"
    };
}

<MudExImageViewer Images="@images" 
                  ShowThumbnails="true"
                  AllowSlideshow="true" />
```

--------------------------------

### Basic MudExDivider Examples

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/grid-layout.md

Demonstrates different configurations of the MudExDivider component, including basic usage with a label, vertical orientation with color, and dashed style with a label and icon.

```razor
<MudExDivider Label="Section 1" />
```

```razor
<MudExDivider Orientation="Orientation.Vertical" 
              Color="Color.Primary" 
              Thickness="2" />
```

```razor
<MudExDivider DividerType="DividerType.Dashed" 
              Label="OR" 
              Icon="@Icons.Material.Filled.MoreHoriz" />
```

--------------------------------

### Clean and Rebuild Project

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/getting-started/installation.md

Execute these commands to clean the project's build artifacts and then rebuild it, which can resolve build errors after installation.

```bash
dotnet clean
dotnet build
```

--------------------------------

### Basic MudExTreeView Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/tree-view.md

Demonstrates the basic setup for the MudExTreeView component by binding it to a list of TreeItem objects.

```razor
<MudExTreeView Items="@treeItems" />

@code {
    private List<TreeItem> treeItems = new()
    {
        new TreeItem { Text = "Folder 1" },
        new TreeItem { Text = "Folder 2" }
    };
}
```

--------------------------------

### Basic MudExAppLoader Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/app-loader.md

Renders a default MudExAppLoader component. No specific setup is required beyond including the component.

```razor
<MudExAppLoader />
```

--------------------------------

### Example Model and Custom Editor

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/ObjectEditRegisterComponent.md

Define a model and a component that implements IObjectEditorFor<MyModel> to serve as its default editor. The ObjectEdit component handles invoking ValueChanged.

```csharp
public class MyModel
{
	public string Name { get; set; }
	public string Text { get; set; }
	public string Text2 { get; set; }
	public string Text3 { get; set; }	
}

public partial class MyModelEditor : IObjectEditorFor<MyModel>
{
    [Parameter] public MyModel Value { get; set; }
	[Parameter] public EventCallback<MyModel> ValueChanged { get; set; } // Notice you dont need to invoke this own your own, this will be done by the ObjectEdit component

}
```

--------------------------------

### MudExThemeEdit Component Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Demonstrates the basic usage of the MudExThemeEdit component for editing and exporting themes. Requires a MudTheme object and can show a preview.

```razor
@code {
    private MudTheme theme = new MudTheme();
}

<MudExThemeEdit @bind-Theme="@theme"
                ShowPreview="true"
                AllowExport="true" />
```

--------------------------------

### Register MudBlazor.Extensions CG Adapter

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions.CodeGator.Adapter/README.md

Add this code to your service registration setup to enable the adapter. Ensure MudBlazor.Extensions is installed.

```csharp
builder.Services.AddMudExObjectEditCGBlazorFormsAdapter();
```

--------------------------------

### Serve Documentation Locally

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/README.md

Build and serve the documentation locally to preview changes. The documentation will be accessible at http://localhost:8000.

```bash
mkdocs serve
```

--------------------------------

### Build Documentation Only

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/README.md

Build the documentation site without serving it locally. The output will be placed in the 'site/' directory.

```bash
mkdocs build
```

--------------------------------

### Generate CSS Variable Name from Color

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExColorUtils.md

Use this method to get the CSS variable name for a given Color instance. No specific setup is required beyond having a Color object.

```csharp
string cssVarName = myColor.CssVarName();
```

--------------------------------

### MudExTagField Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExTagField with label, placeholder, max tags, and auto-complete suggestions.

```razor
@code {
    private List<string> tags = new();
}

<MudExTagField @bind-Values="@tags"
               Label="Tags"
               Placeholder="Add tags..."
               MaxTags="5"
               AutoCompleteSource="@GetTagSuggestions" />
```

--------------------------------

### Basic File Upload with MudExUploadEdit

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/upload-edit.md

Demonstrates the simplest way to use MudExUploadEdit for file uploads. Requires a List<IBrowserFile> to bind the selected files.

```razor
<MudExUploadEdit @bind-Files="@selectedFiles" />

@code {
    private List<IBrowserFile> selectedFiles = new();
}
```

--------------------------------

### Custom Thumb Start Template for MudExRangeSlider

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/Samples/MainSample.WebAssembly/wwwroot/example-codes/RangeSliderTemplateWeekExample.md

Defines the appearance of the starting thumb (handle) for the MudExRangeSlider. It is styled as a small square with a border.

```razor
<ThumbStartTemplate Context="ctx">
        <div style="
            width:14px;
            height:14px;
            background:var(--mud-palette-surface);
            border:3px solid var(--mud-palette-secondary);
            border-radius:4%;
            box-shadow:0 2px 4px rgba(0,0,0,0.25);">
        </div>
    </ThumbStartTemplate>
```

--------------------------------

### Configure External Storage Integrations

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExUploadEdit.md

Configure Dropbox, Google Drive, and OneDrive integrations by providing their respective client IDs or API keys. This setup is typically done during application service configuration.

```csharp
builder.Services.AddMudServicesWithExtensions(c =>
    c.EnableDropBoxIntegration("<DROP_BOX_API_KEY>")
        .EnableGoogleDriveIntegration("<GOOGLE_DRIVE_CLIENT_ID>")
        .EnableOneDriveIntegration("<ONE_DRIVE_CLIENT_ID>"));

```

--------------------------------

### Test Component in Blazor Application

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/getting-started/setup.md

A simple MudExAppLoader component to verify the setup is correct. If this page renders without errors, the setup is successful.

```razor
@page "/test"
@using MudBlazor.Extensions.Components

<MudExAppLoader />

<h3>Setup Test</h3>
<p>If you can see this page without errors, the setup is correct!</p>
```

--------------------------------

### Configure User Service in Blazor WebAssembly

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/TryMudEx/TryMudEx.Client/UserServices.txt

Define a `UserStartup` class with a `Configure` method to register services. Ensure required usings are included. This method is called during the application's startup process.

```csharp
namespace Try.UserComponents
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    // required using for UserStartup:
    using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
    using Microsoft.Extensions.DependencyInjection;

    public class UserStartup
    {
        public static void Configure(WebAssemblyHostBuilder builder) {
            builder.Services.AddSingleton(new MyService());
        }
    }

    // your service
    public class MyService {     
        public string Hello() => "Hello World from MyService!";
    }

}
```

--------------------------------

### Install MudBlazor.Extensions Package via Package Manager Console

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/getting-started/installation.md

Use this PowerShell command in Visual Studio's Package Manager Console to install the MudBlazor.Extensions package.

```powershell
Install-Package MudBlazor.Extensions
```

--------------------------------

### MudExHtmlEdit Component Example

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Provides a detailed example of the MudExHtmlEdit component with custom height, toolbar visibility, and image upload enabled. Requires an initial HTML content string.

```razor
@code {
    private string htmlContent = "<p>Hello World</p>";
}

<MudExHtmlEdit @bind-Value="@htmlContent"
               Height="400px"
               ShowToolbar="true"
               AllowImageUpload="true" />
```

--------------------------------

### Show Dialog with Action Delegate

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/DialogExtensions.md

Use the `ShowEx` extension method with an `Action<YourDialog>` delegate to configure dialog properties instead of `DialogParameters`.

```csharp
await dialogService.ShowEx<SampleDialog>("Simple Dialog", dialog => { dialog.ContentMessage = "Hello"; },options);
```

--------------------------------

### Get Enum Display Names and Descriptions with EnumHelper

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/utilities/helpers.md

Retrieve display names and descriptions from enum members using attributes. Also supports getting all enum values and parsing from strings.

```csharp
using MudBlazor.Extensions.Helper;

// Get display name
var displayName = EnumHelper.GetDisplayName(MyEnum.Value);

// Get description
var description = EnumHelper.GetDescription(MyEnum.Value);

// Get all enum values
var values = EnumHelper.GetValues<MyEnum>();

// Parse from string
var parsed = EnumHelper.Parse<MyEnum>("Value");
```

--------------------------------

### Basic MudExTreeViewFlatList Implementation

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/Samples/MainSample.WebAssembly/wwwroot/example-codes/TreeViewFlatListExample.html

This snippet shows a basic implementation of MudExTreeViewFlatList. It binds to a collection of items and allows selection of nodes. Ensure the 'MudExTreeViewFlatList' component and 'SampleTreeItem' class are correctly defined.

```razor
@inherits ExampleBase

<div style="width: 100%; max-height: 300px; overflow: auto">
    <p>@($"{L["Selected Node"]}: {\_selectedNode?.Name}")</p>
    <MudExTreeViewFlatList @bind-SelectedNode="\_selectedNode"
                           @ref="ComponentRef"
                           Items="@Entries">

    </MudExTreeViewFlatList>
</div>

@code {
    private SampleTreeItem \_selectedNode;
    public HashSet<SampleTreeItem> Entries { get; set; }

    protected override void OnInitialized()
    {
        Entries = SampleTreeStructure.GetItems();
    }
}
```

--------------------------------

### Get File Icons and Format Sizes with BrowserFileExt

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/utilities/helpers.md

Use BrowserFileExt extension methods to get appropriate icons for files based on their type or content type, and format file sizes into human-readable strings.

```csharp
using MudBlazor.Extensions.Helper;

// Get icon for file
var icon = BrowserFileExt.IconForFile(file);
var iconByContentType = BrowserFileExt.IconForFile(file.ContentType);

// Format file size
var sizeString = file.FormatSize(); // e.g., "2.5 MB"

// Check if file is image
var isImage = file.IsImage();
```

--------------------------------

### Create and Manipulate Themes with MudExThemeHelper

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/utilities/helpers.md

Use MudExThemeHelper to create themes from base colors, generate complementary palettes, and convert themes to CSS variables. Requires a base color for generation.

```csharp
using MudBlazor.Extensions.Helper;

// Create theme from primary color
var theme = MudExThemeHelper.CreateTheme(primaryColor);

// Generate complementary colors
var palette = MudExThemeHelper.GeneratePalette(baseColor);

// Convert theme to CSS variables
var cssVars = MudExThemeHelper.ToCssVariables(theme);
```

--------------------------------

### Get CSS Classes

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExCss.md

Quickly accesses and combines CSS classes.

```APIDOC
## Get (Classes, Classes[])

### Description
Quickly accesses classes.

### Method
Static Method

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```csharp
var classString = MudExCss.Get(MudExCss.Classes.Dialog.FullHeightContent, "overflow-hidden", MudExCss.Classes.Dialog._Initial);
```

### Response
#### Success Response (200)
- **classString** (string) - A string containing the combined CSS classes.

#### Response Example
```json
"mude-dialog-full-height-content overflow-hidden mude-dialog-_initial"
```
```

--------------------------------

### Component Parameter Discovery and Instantiation

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/utilities/helpers.md

Use ComponentHelper to discover component parameters, create render fragments, and check for parameter existence. Ensure MudBlazor.Extensions.Helper is imported.

```csharp
using MudBlazor.Extensions.Helper;

// Get component parameters
var parameters = ComponentHelper.GetParameters<MyComponent>();

// Create render fragment
var fragment = ComponentHelper.CreateRenderFragment<MyComponent>(parameters);

// Check if component has parameter
var hasParameter = ComponentHelper.HasParameter<MyComponent>("Value");
```

--------------------------------

### Basic MudExTreeViewList Implementation

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/Samples/MainSample.WebAssembly/wwwroot/example-codes/TreeViewListExample.html

Displays a TreeViewList with bound selected node and a sample data structure. Ensure the SampleTreeItem class and SampleTreeStructure.GetItems() method are defined elsewhere.

```csharp
@inherits ExampleBase

<div style="width: 100%; max-height: 100%"
    >
    <p>@($"{\"Selected Node\"}: {\_selectedNode?.Name}")</p>
    <MudExTreeViewList @bind-SelectedNode="_selectedNode"
                       @ref="ComponentRef"
                       Items="@Entries">

    </MudExTreeViewList>
</div
>

@code {
    private SampleTreeItem _selectedNode;
    public HashSet<SampleTreeItem> Entries { get; set; }

    protected override void OnInitialized()
    {
        Entries = SampleTreeStructure.GetItems();
    }
}

```

--------------------------------

### Add MudBlazor.Extensions NuGet Package

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/README.md

Install the MudBlazor.Extensions package using the .NET CLI or your preferred package manager.

```xml
<PackageReference Include="MudBlazor.Extensions" Version="*" />
```

--------------------------------

### Implementing Custom Meta Configuration

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/ObjectEdit.md

Implement IObjectMetaConfiguration to customize the layout and behavior of object properties. This allows for advanced rendering and configuration options.

```csharp
public class MyModelMetaConfiguration : IObjectMetaConfiguration<MyModel>
{

    public Task ConfigureAsync(ObjectEditMeta<MyModel> meta)
    {
        // Configure here        
        return Task.CompletedTask;
    }
}
```

--------------------------------

### Basic Object Edit Form Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/index.md

A simple example of how to use the MudExObjectEditForm component to create a form from a model.

```razor
<MudExObjectEditForm Value="@myModel" OnValidSubmit="@HandleSubmit" />
```

--------------------------------

### Chained MudExAppearance Application

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExAppearance.md

Demonstrates chaining multiple MudExAppearance methods for concise styling application.

```csharp
await MudExAppearance.FromCss("my-css-class")
    .WithStyle("color: red;")
    .ApplyToAsync(myMudBlazorComponent);
```

--------------------------------

### Register FluentValidation Services

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/object-edit.md

Register FluentValidation in your application's services. This setup is required before creating custom validators.

```csharp
builder.Services.AddValidatorsFromAssemblyContaining<MyModelValidator>();
```

--------------------------------

### Basic MudExVirtualize Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/other-components.md

Shows the basic usage of MudExVirtualize for efficient rendering of large lists. Requires a collection of items and a template for each item.

```razor
<MudExVirtualize Items="@largeList" Context="item">
    <MudExVirtualItem>
        <MudText>@item.Name</MudText>
    </MudExVirtualItem>
</MudExVirtualize>
```

--------------------------------

### Basic MudExAppLoader Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExAppLoader.md

Add this tag in the <body> section of your _Host.cshtml or index.html file. Ensure the MainAppId matches the ID of your Blazor application's root div.

```html
<mud-ex-app-loader AccentColor="#ff4081" MainAppId="app" Logo="https://your-logo-url.com/logo.png" />
```

--------------------------------

### Configure File Preview and Stream Handling

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/upload-edit.md

Enable the file preview feature and define how file streams are handled, such as using Blob URLs.

```razor
<MudExUploadEdit @bind-Files="@selectedFiles"
                 AllowPreview="true"
                 StreamUrlHandling="StreamUrlHandling.BlobUrl" />
```

--------------------------------

### MudExTextField with Features

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/form-inputs.md

Example of MudExTextField demonstrating features like placeholders, required fields, max length, and character count.

```razor
@code {
    private string text = "";
}

<MudExTextField @bind-Value="@text" 
                Label="Name"
                Placeholder="Enter your name"
                Required="true"
                MaxLength="50"
                ShowCharacterCount="true" />
```

--------------------------------

### Basic MudExPopover Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/other-components.md

Demonstrates how to create a popover component with an activator button and content.

```razor
<MudExPopover>
    <Activator>
        <MudButton>Show Popover</MudButton>
    </Activator>
    <Content>
        <MudText>Popover content</MudText>
    </Content>
</MudExPopover>
```

--------------------------------

### Apply Initial Class for Animation

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/DialogExtensions.md

Add the `mud-ex-dialog-initial` class to your `MudDialog` component to ensure it's hidden before the animation starts.

```html
<MudDialog Class="mud-ex-dialog-initial">

```

--------------------------------

### Get Content Type from IBrowserFile

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/BrowserFileExt.md

Retrieves the content type of an IBrowserFile instance. This is useful for determining file type programmatically.

```csharp
string contentType = browserFile.GetContentType();
```

--------------------------------

### Basic MudExList Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/other-components.md

Demonstrates the basic structure of the MudExList component with simple list items.

```razor
<MudExList>
    <MudExListItem>Item 1</MudExListItem>
    <MudExListItem>Item 2</MudExListItem>
    <MudExListItem>Item 3</MudExListItem>
</MudExList>
```

--------------------------------

### Start Speech Recording without Options

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/ISpeechRecognitionService.md

Initiates an asynchronous speech recording session using default options and a callback for results. An optional callback can be provided for when the recording stops.

```csharp
Task<string> StartRecordingAsync(Action<SpeechRecognitionResult> callback, Action<string> stoppedCallback = null);
```

--------------------------------

### Custom Thumb End Template for MudExRangeSlider

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/Samples/MainSample.WebAssembly/wwwroot/example-codes/RangeSliderTemplateWeekExample.md

Defines the appearance of the ending thumb (handle) for the MudExRangeSlider. It is styled identically to the start thumb.

```razor
<ThumbEndTemplate Context="ctx">
        <div style="
            width:14px;
            height:14px;
            background:var(--mud-palette-surface);
            border:3px solid var(--mud-palette-secondary);
            border-radius:4%;
            box-shadow:0 2px 4px rgba(0,0,0,0.25);">
        </div>
    </ThumbEndTemplate>
```

--------------------------------

### Get File Icon

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/extensions/browser-extensions.md

Use this extension method to retrieve an appropriate icon for a given content type. Requires the `BrowserFileExtensions` class.

```csharp
var icon = BrowserFileExtensions.IconForFile(contentType);
```

--------------------------------

### Create Resizable and Draggable Dialogs

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/index.md

Configure dialog options for resizability, drag mode, maximize button, and animation. Requires MudBlazor.Extensions.

```csharp
var options = new DialogOptionsEx { 
    Resizeable = true, 
    DragMode = MudDialogDragMode.Simple,
    MaximizeButton = true,
    Animation = AnimationType.SlideIn
};
await dialogService.ShowEx<MyDialog>("Title", parameters, options);
```

--------------------------------

### Basic MudExTreeView Usage

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExTreeView.md

Demonstrates the basic usage of MudExTreeView with data binding, custom parameters, view mode, and items.

```razor
<MudExTreeView @bind-SelectedNode="_selectedNode"
               Parameters="@(new Dictionary<string, object> { { nameof(MudExCardList<object>.HoverMode), MudExCardHoverMode.Simple } })"
               ViewMode="_treeViewMode"
               Items="@Entries">
</MudExTreeView>
```

--------------------------------

### Custom CSS Variables and Animation

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/MudBlazor.Extensions/Docs/MudExAppLoader.md

This CSS example demonstrates how to overwrite default styles using CSS variables and keyframe animations for the MudExAppLoader.

```css
:root {
    --accent-color1: #a94553;
    --accent-color2: #423859;
    --accent-color3: #16868d;
    --accent-color4: #d0a733;
}

.mud-ex-app-loader-loading-container .app-name {
    background: linear-gradient( 90deg,var(--accent-color1),var(--accent-color2),var(--accent-color3),var(--accent-color4));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes rotate-background {
    0% {
        transform: scale(1.5) rotate(0deg);
    }

    100% {
        transform: scale(1.5) rotate(360deg);
    }
}

.mud-ex-app-loader-loading-container {
    position: relative;
    overflow: hidden;
}

.mud-ex-app-loader-loading-container::before {
    content: "";
    opacity:.15;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent-color1) 50%), linear-gradient(135deg, transparent 50%, var(--accent-color2) 50%), linear-gradient(-135deg, transparent 50%, var(--accent-color3) 50%), linear-gradient(-45deg, transparent 50%, var(--accent-color4) 50%);
    background-blend-mode: screen;

    
    animation: rotate-background 30s linear infinite;
    z-index: -1;
}
```

--------------------------------

### TimeOnly Range Slider Initialization

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/Samples/MainSample.WebAssembly/wwwroot/example-codes/RangeSliderTemplateShiftExample.html

Initializes a MudExRange for TimeOnly values with a start and end time. This is useful for setting default time ranges.

```csharp
@code {
    private IRange<TimeOnly> _range = new MudExRange<TimeOnly>(new(6, 0), new(14, 0));
    private IRange<TimeOnly> _fullRange = new MudExRange<TimeOnly>(new(0, 0), new(23, 59));
}
```

--------------------------------

### Show File Display Dialog with URL - MudExFileDisplayDialog

Source: https://github.com/fgilde/mudblazor.extensions/blob/main/docs/components/file-display.md

Display a file in a dialog using the static Show method of MudExFileDisplayDialog. Provide the URL, filename, and content type. Configure JS runtime if needed.

```csharp
await MudExFileDisplayDialog.Show(
    _dialogService, 
    dataUrl, 
    fileName, 
    contentType,
    ex => ex.JsRuntime = _jsRuntime
);
```