### MudBlazor Align Content Start Example

Source: https://mudblazor.com/utilities/align-content

Demonstrates the 'align-content-start' utility class in MudBlazor to align rows to the start of a flex container. This example uses MudPaper components to visualize the layout.

```html
<MudPaper Class="d-flex align-content-start flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>
```

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

### MudSelect Placement Examples

Source: https://mudblazor.com/components/select

Demonstrates different placement options for the MudSelect component using AnchorOrigin and TransformOrigin properties. These examples show how to control the popover's starting point and transformation relative to the input field.

```html
<MudSelect T="string" Label="Search" AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

<MudSelect T="string" Label="Open Warnings" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterCenter" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.OpenWith" Adornment="Adornment.Start" AdornmentColor="Color.Warning">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

<MudSelect T="string" Label="Check Code" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopRight" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.Code" CloseIcon="@Icons.Material.Filled.SouthWest" Adornment="Adornment.Start" AdornmentColor="Color.Dark">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>
```

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

### Install MudBlazor Templates

Source: https://mudblazor.com/getting-started/installation

Installs the MudBlazor dotnet templates, which are modified versions of the Microsoft Web App template including MudBlazor components for faster project setup.

```bash
dotnet new install MudBlazor.Templates
```

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

### MudBlazor: Basic Align Items - Start

Source: https://mudblazor.com/utilities/align-items

Demonstrates the basic usage of the `align-start` utility class in MudBlazor to align flex items to the start of the cross axis. This example uses MudBlazor components within a flex container.

```html
<MudPaper Class="d-flex align-start flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-12 d-flex flex-1 mud-theme-primary"/>
</MudPaper>
```

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

### MudBlazor Timeline Alignment Example

Source: https://mudblazor.com/components/timeline

Demonstrates how to set the starting direction for timeline dots using the `TimelineAlign` property on the `MudTimeline` component. This example shows different alignment options for timeline items.

```html
<MudSelect T="TimelineAlign" @bind-Value="_timelineAlign" Label="Timeline Align" Dense="true" Variant="Variant.Outlined">
    <MudSelectItem T="TimelineAlign" Value="TimelineAlign.Start">Start</MudSelectItem>
    <MudSelectItem T="TimelineAlign" Value="TimelineAlign.Default">Default</MudSelectItem>
    <MudSelectItem T="TimelineAlign" Value="TimelineAlign.End">End</MudSelectItem>
</MudSelect>

<MudTimeline TimelineAlign="_timelineAlign">
    <MudTimelineItem Color="Color.Dark" Elevation="25">
        <ItemOpposite>
            <MudText Color="Color.Dark" Typo="Typo.h6">Aug 2020</MudText>
        </ItemOpposite>
        <ItemContent>
            <MudPaper Elevation="0" Class="mt-n1">
                <MudText Color="Color.Dark" Typo="Typo.h6" GutterBottom="true">MudBlazor Emerges</MudText>
                <MudText Typo="Typo.body2">A repository pops up on GitHub named MudBlazor.</MudText>
                <MudText Typo="Typo.body2">The development has already started and the most common components can be found already.</MudText>
            </MudPaper>
        </ItemContent>
    </MudTimelineItem>
    <MudTimelineItem Color="Color.Primary" Elevation="25" TimelineAlign="TimelineAlign.End">
        <ItemOpposite>
            <MudText Color="Color.Primary" Typo="Typo.h6">Oct 2020</MudText>
        </ItemOpposite>
        <ItemContent>
            <MudPaper Elevation="0" Class="mt-n1">
                <MudText Color="Color.Primary" Typo="Typo.h6" GutterBottom="true">MudBlazor Unleashed!</MudText>
                <MudText Typo="Typo.body2">The first version is released and uploaded as v1.0.7.</MudText>
            </MudPaper>
        </ItemContent>
    </MudTimelineItem>
    <MudTimelineItem Color="Color.Secondary" Elevation="25">
        <ItemOpposite>
            <MudText Color="Color.Secondary" Typo="Typo.h6" GutterBottom="true">Nov 2020</MudText>
        </ItemOpposite>
        <ItemContent>
            <MudPaper Elevation="0" Class="mt-n1">
                <MudText Color="Color.Secondary" Typo="Typo.h6" GutterBottom="true">First Minor</MudText>
                <MudText Typo="Typo.body2">MudBlazor gets its first minor with version 1.1.0.</MudText>
                <MudText Typo="Typo.body2">TimerPicker, AutoComplete and Charts join the library as well as T versions of our inputs and selects.</MudText>
            </MudPaper>
        </ItemContent>
    </MudTimelineItem>
</MudTimeline>
```

```csharp
@code{
    private TimelineAlign _timelineAlign { get; set; } = TimelineAlign.Start;
}
```

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

### Create New Project with MudBlazor Template

Source: https://mudblazor.com/getting-started/installation

Creates a new Blazor project with MudBlazor integrated, using specified interactivity mode, project name, and all interactive features. Use --help for more options.

```bash
dotnet new mudblazor --interactivity Auto --name MyApplication --all-interactive
dotnet new mudblazor --help
```

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

### Install MudBlazor NuGet Package

Source: https://mudblazor.com/getting-started/installation

Adds the MudBlazor library to an existing .NET project via the NuGet Package Manager. This command-line instruction is an alternative to using the GUI.

```bash
dotnet add package MudBlazor
```

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

### MudFileUpload: Single File Upload Example

Source: https://mudblazor.com/api/mudfileupload%601

Demonstrates how to use the MudFileUpload component to upload a single file using IBrowserFile. It includes basic setup and binding the uploaded file to a variable.

```csharp
@using MudBlazor
@using System.IO

<MudFileUpload T="IBrowserFile" FilesChanged="OnFilesChanged">
    <Button Template>
        <MudButton HtmlTag="label" For="@_fileUpload" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.CloudUpload">
            Upload single file
        </MudButton>
    </Button>
</MudFileUpload>

@code {
    private IBrowserFile uploadedFile;

    private void OnFilesChanged(InputFileChangeEventArgs e)
    {
        uploadedFile = e.File;
        // Process the uploaded file here
        Console.WriteLine($"File uploaded: {uploadedFile.Name}, Size: {uploadedFile.Size}");
    }
}
```

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

### MudBlazor Dropdown Settings Example (HTML)

Source: https://mudblazor.com/components/popover

An HTML example showcasing the integration of DropdownSettings with MudBlazor components. This includes MudSelect, MudMenu, and MudAutocomplete, demonstrating how to bind various dropdown-related properties like AnchorOrigin, TransformOrigin, and RelativeWidth.

```html
<MudGrid>
    <MudItem md="4">
        <MudSelect T="string"
                   Label="MudSelect"
                   DropdownSettings="@_dropdownSettings"
                   AnchorOrigin="@_anchor"
                   TransformOrigin="@_transform"
                   RelativeWidth="_dropdownWidth"
                   Variant="Variant.Outlined"
                   AdornmentIcon="@Icons.Material.Filled.Search"
                   AdornmentColor="Color.Primary">
            <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
            <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
            <MudSelectItem Value="@("bar")">Lorem ipsum dolor sit amet, consectetur adipiscing elit</MudSelectItem>
        </MudSelect>
    </MudItem>

    <MudItem md="4"
             Class="d-flex justify-center align-center">
        <MudMenu Label="MudMenu"
                 Variant="Variant.Filled"
                 Color="Color.Primary"
                 DropdownSettings="@_dropdownSettings"
                 AnchorOrigin="@_anchor"
                 TransformOrigin="@_transform"
                 RelativeWidth="_dropdownWidth">
            <MudMenuItem Label="Enlist" />
            <MudMenuItem Label="Barracks" />
            <MudMenuItem Label="Armory" />
            <MudMenuItem Label="The quick brown fox jumps over the lazy dog" />
        </MudMenu>
    </MudItem>

    <MudItem md="4">
        <MudAutocomplete SearchFunc="Search"
                         Variant="Variant.Outlined"
                         Label="MudAutocomplete"
                         DropdownSettings="@_dropdownSettings"
                         AnchorOrigin="@_anchor"
                         TransformOrigin="@_transform"
                         RelativeWidth="_dropdownWidth" />
    </MudItem>

    <MudItem md="1" />

    <MudItem md="2"
             Class="d-flex align-center justify-center">
        <MudSwitch @bind-Value="@_fixed"
                   Label="Fixed"
                   LabelPlacement="Placement.Right" />
    </MudItem>

    <MudItem md="2">
        <MudSelect T="Origin"
                   Label="Anchor Origin"
                   @bind-Value="@_anchor"
                   DropdownSettings="@_dropdownSettings">
            <MudSelectItem Value="@Origin.TopLeft">Top Left</MudSelectItem>
            <MudSelectItem Value="@Origin.TopCenter">Top Center</MudSelectItem>
            <MudSelectItem Value="@Origin.TopRight">Top Right</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomLeft">Bottom Left</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomCenter">Bottom Center</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomRight">Bottom Right</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterLeft">Center Left</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterCenter">Center Center</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterRight">Center Right</MudSelectItem>
        </MudSelect>
    </MudItem>

    <MudItem md="2">
        <MudSelect T="Origin"
                   Label="Transform Origin"
                   @bind-Value="@_transform">
            <MudSelectItem Value="@Origin.TopLeft">Top Left</MudSelectItem>
            <MudSelectItem Value="@Origin.TopCenter">Top Center</MudSelectItem>
            <MudSelectItem Value="@Origin.TopRight">Top Right</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomLeft">Bottom Left</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomCenter">Bottom Center</MudSelectItem>
            <MudSelectItem Value="@Origin.BottomRight">Bottom Right</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterLeft">Center Left</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterCenter">Center Center</MudSelectItem>
            <MudSelectItem Value="@Origin.CenterRight">Center Right</MudSelectItem>
        </MudSelect>
    </MudItem>

    <MudItem md="2">
        <MudSelect T="OverflowBehavior"

```

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

### Interactive Cursor Example with MudBlazor Paper

Source: https://mudblazor.com/utilities/cursor

An interactive example showcasing various cursor styles applied to MudBlazor Paper components. Users can hover over the papers to see the different cursor effects.

```html
<div class="d-flex flex-wrap gap-4">
    @foreach (var cursor in Cursors)
    {
        <MudPaper Class="@($"d-flex justify-center align-center {cursor})")" Width="128px" Height="64px">
            @cursor
        </MudPaper>
    }
</div>
```

```csharp
@code {
    string[] Cursors = new[]
    {
        "cursor-all-scroll", "cursor-auto", "cursor-cell", "cursor-col-resize", "cursor-copy", "cursor-crosshair", "cursor-default", "cursor-grab", "cursor-grabbing", "cursor-help", "cursor-move", "cursor-no-drop", "cursor-none", "cursor-not-allowed", "cursor-n-resize", "cursor-pointer", "cursor-progress", "cursor-row-resize", "cursor-text", "cursor-url", "cursor-vertical-text", "cursor-wait", "cursor-w-resize", "cursor-zoom-in", "cursor-zoom-out"
    };
}
```

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

### MudBlazor DateRangePicker Configuration Examples

Source: https://mudblazor.com/components/datepicker

Demonstrates various configurations for the MudBlazor MudDateRangePicker component. Includes basic usage, editable ranges, placeholders, clearable functionality, custom date formats, custom start months, and interactive actions with buttons.

```html
<MudStack>
    <MudDateRangePicker Label="Basic range picker" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Basic range picker (editable)" Editable="true" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Placeholder" @bind-DateRange="_dateRange" PlaceholderStart="Start Date" PlaceholderEnd="End Date" />
    <MudDateRangePicker Label="Clearable" @bind-DateRange="_dateRange" Clearable="true" />
    <MudDateRangePicker Label="Range picker format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" TitleDateFormat="dddd, dd. MMMM" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Custom start month" StartMonth="@DateTime.Now.AddMonths(-1)" @bind-DateRange="_dateRange" />
    <MudDateRangePicker @ref="_picker" Label="With action buttons" @bind-DateRange="_dateRange" AutoClose="@_autoClose">
        <PickerActions>
            <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
            <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
            <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">OK</MudButton>
        </PickerActions>
    </MudDateRangePicker>
    <MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
</MudStack>
```

```csharp
@code {
    private MudDateRangePicker _picker;
    private DateRange _dateRange = new DateRange(DateTime.Now.Date, DateTime.Now.AddDays(5).Date);
    private bool _autoClose;
}
```

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

### MudBlazor ToolBar Basic and Spaced Examples

Source: https://mudblazor.com/components/toolbar

Demonstrates the basic usage of MudBlazor's MudToolBar component with various icon buttons. It also shows how to use MudSpacer to push content to the right and how to justify content within the toolbar.

```html
<MudPaper Elevation="25">
    <MudToolBar>
        <MudIconButton Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" Class="mr-5" />
        <MudIconButton Icon="@Icons.Material.Outlined.Add" />
        <MudIconButton Icon="@Icons.Material.Outlined.Edit" />
        <MudIconButton Icon="@Icons.Material.Outlined.Remove" />
        <MudIconButton Icon="@Icons.Material.Outlined.Notifications" />
        <MudIconButton Icon="@Icons.Material.Outlined.PeopleAlt" />
        <MudIconButton Icon="@Icons.Material.Outlined.MoreVert" Color="Color.Inherit" />
    </MudToolBar>

    <MudToolBar>
        <MudIconButton Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" Class="mr-5" />
        <MudIconButton Icon="@Icons.Material.Outlined.Add" />
        <MudIconButton Icon="@Icons.Material.Outlined.Edit" />
        <MudIconButton Icon="@Icons.Material.Outlined.Remove" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Outlined.Notifications" />
        <MudIconButton Icon="@Icons.Material.Outlined.PeopleAlt" />
        <MudIconButton Icon="@Icons.Material.Outlined.MoreVert" Color="Color.Inherit" />
    </MudToolBar>

    <MudToolBar Class="justify-space-between">
        <MudIconButton Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" />
        <MudIconButton Icon="@Icons.Material.Outlined.Add" />
        <MudIconButton Icon="@Icons.Material.Outlined.Edit" />
        <MudIconButton Icon="@Icons.Material.Outlined.Remove" />
        <MudIconButton Icon="@Icons.Material.Outlined.Notifications" />
        <MudIconButton Icon="@Icons.Material.Outlined.PeopleAlt" />
        <MudIconButton Icon="@Icons.Material.Outlined.MoreVert" Color="Color.Inherit" />
    </MudToolBar>
</MudPaper>
```

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

### MudTable Loading Content Example (C#)

Source: https://mudblazor.com/api/mudtable

Demonstrates how to customize the content displayed while the MudTable is loading data. This example uses `LoadingContentBody` to show a multi-row, multi-column placeholder structure.

```csharp
<MudTable Items="@MyItems" Loading="@Loading" ServerData="@LoadTableData">
    <LoadingContentBody>
        <MudTr>
            <MudTd colspan="3">
                <MudProgressLinear Color="Color.Info" Indeterminate="true" Class="rounded-0" />
            </MudTd>
        </MudTr>
        <MudTr>
            <MudTd>Loading Name...</MudTd>
            <MudTd>Loading Age...</MudTd>
            <MudTd>Loading Status...</MudTd>
        </MudTr>
        <MudTr>
            <MudTd colspan="3">
                <MudText Typo="Typo.body2">Please wait while data is being fetched.</MudText>
            </MudTd>
        </MudTr>
    </LoadingContentBody>
    <Columns>
        <PropertyColumn Property="@((MyObject o) => o.Name)" Title="Name" />
        <PropertyColumn Property="@((MyObject o) => o.Age)" Title="Age" />
        <PropertyColumn Property="@((MyObject o) => o.Status)" Title="Status" />
    </Columns>
</MudTable>

@code {
    public class MyObject { public string Name { get; set; } public int Age { get; set; } public string Status { get; set; } }
    public IEnumerable<MyObject> MyItems { get; set; }
    public bool Loading { get; set; } = true;

    public async Task<TableData<MyObject>> LoadTableData(TableState state)
    {
        Loading = true;
        await Task.Delay(2000); // Simulate network delay
        var data = new List<MyObject>
        {
            new MyObject { Name = "Alice", Age = 30, Status = "Active" },
            new MyObject { Name = "Bob", Age = 25, Status = "Inactive" },
            new MyObject { Name = "Charlie", Age = 35, Status = "Active" }
        };
        Loading = false;
        return new TableData<MyObject> { TotalItems = data.Count, Items = data };
    }
}
```

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

### Basic Flex Grow Example (HTML)

Source: https://mudblazor.com/utilities/flex-grow

Demonstrates the basic usage of `flex-grow-1` to allow a flex item to grow and fill available space within a flex container. This example uses MudBlazor components within an HTML structure.

```html
<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-grow-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="py-8  mud-theme-primary" Width="64px" Elevation="0"/>
</div>
```

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

### MudBlazor Basic Flex Wrap Example

Source: https://mudblazor.com/utilities/flex-wrap

Demonstrates the basic usage of MudBlazor's flex wrap utility classes to control how flex items are arranged within a container. This example shows items wrapping to the next line.

```html
<MudPaper Class="d-flex flex-wrap gap-4" MaxWidth="528px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
</MudPaper>
```

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

### Default MudBlazor DataGrid with Property Columns

Source: https://mudblazor.com/components/datagrid

Demonstrates the basic setup of a MudBlazor DataGrid using PropertyColumns to display data fetched from an API. It requires an HttpClient to fetch data and defines columns based on the properties of the 'Element' model. This example shows how to bind data and configure basic columns.

```razor
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>
```

```csharp
@code {
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}
```

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

### MudSelect Dynamic Sizing Example (Razor)

Source: https://mudblazor.com/components/select

This Razor code demonstrates the dynamic sizing of the MudSelect component using FullWidth and FitContent parameters. It includes examples with different configurations like outlined variant, shrink label, clearable, and adornments. It also shows how to control these parameters using MudSwitch components.

```razor
@using MudBlazor

<MudSelect @bind-Value="_selectedState" Label="Select a State" FullWidth="_fullWidth" FitContent="_fitContent" Variant="Variant.Outlined" ShrinkLabel>
    @foreach (var state in _states)
    {
        <MudSelectItem Value="@state">@state</MudSelectItem>
    }
</MudSelect>

<MudSelect @bind-Value="_selectedState" Label="Select a State"  FullWidth="_fullWidth" FitContent="_fitContent" Variant="Variant.Outlined" Clearable>
    @foreach (var state in _states)
    {
        <MudSelectItem Value="@state">@state</MudSelectItem>
    }
</MudSelect>

<MudSelect @bind-Value="_selectedState" Label="Select a State"  FullWidth="_fullWidth" FitContent="_fitContent" Variant="Variant.Outlined" Clearable Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.LocationOn">
    @foreach (var state in _states)
    {
        <MudSelectItem Value="@state">@state</MudSelectItem>
    }
</MudSelect>

<MudStack Class="align-center mud-width-full" Row>
    <MudSwitch @bind-Value="_fullWidth" Label="Full Width" Color="Color.Primary" />
    <MudSwitch @bind-Value="_fitContent" Label="Fit Content" Color="Color.Primary" />
</MudStack>
```

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

### v7.0.0 Migration Guide Requirement (HTML)

Source: https://mudblazor.com/mud/project/releases

Illustrates the requirement to add a 'MudPopoverProvider' when migrating to v7.x.x from v6.x.x. The example shows the 'Before' and 'After' HTML structure, highlighting the addition of the MudPopoverProvider. This is a crucial migration step.

```html
> [!WARNING] > It's now explicitly required to add `MudPopoverProvider`. [#8712](**#8712**) Before (v6.x.x): ```html  ``` After (v7.x.x): ```html  ``` For all other changes and warnings please make sure to visit the [v7.0.0 Migration Guide](https://github.com/MudBlazor/MudBlazor/issues/8447)
```

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

### MudBlazor DatePicker Input Masking Examples

Source: https://mudblazor.com/components/datepicker

Illustrates how to use input masking with the MudBlazor DatePicker for controlled date input. Examples show how to apply `DateMask` and `PatternMask` with different format strings (`dd.MM.yyyy`, `MM/dd/yyyy`, `yyyy-MM-dd`) to guide user input and ensure format consistency. The `DateFormat` parameter must align with the mask.

```blazor
<MudDatePicker Label="dd.MM.yyyy" Editable="true" @bind-Date="_date1" Mask="@(new DateMask("dd.MM.yyyy"))" DateFormat="dd.MM.yyyy" Placeholder="de-AT Date"  Variant="Variant.Text" />
<MudDatePicker Label="MM/dd/yyyy" Editable="true" @bind-Date="_date2" Mask="@(new DateMask("MM/dd/yyyy"))" DateFormat="MM/dd/yyyy" Placeholder="en-US Date" Variant="Variant.Filled" />
<MudDatePicker Label="yyyy-MM-dd" Editable="true" @bind-Date="_date3" Mask="@(new DateMask("0000-00-00"))" DateFormat="yyyy-MM-dd" Placeholder="ISO Date" Variant="Variant.Outlined" />

@code {
    private DateTime? _date1 = null;
    private DateTime? _date2 = DateTime.Today;
    private DateTime? _date3 = null;
}
```

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

### MudBlazor: Open Calendar with MudOverlay and MudPopover

Source: https://mudblazor.com/components/overlay

Demonstrates how to open a MudDatePicker within a MudPopover, controlled by MudOverlay. Includes functionality to override the default overlay behavior using the 'mud-skip-overlay-section' class.

```html
<MudGrid>
    <MudItem xs="12" md="6" class="pa-4">
        <MudButton @onclick="() => TogglePopover(true)"
                   Variant="Variant.Filled"
                   Color="Color.Primary">
            Open Calendar with Override
        </MudButton>
        <MudButton @onclick="() => TogglePopover(false)"
                   Variant="Variant.Filled"
                   Color="Color.Primary">
            Open Calendar without Override
        </MudButton>
    </MudItem>
</MudGrid>
<MudPopover Open="@_isPopoverOpen" 
            AnchorOrigin="Origin.BottomCenter" 
            TransformOrigin="Origin.TopCenter">
    <MudDatePicker Label="Publish Date" Class="pa-2"
                    MinDate="new DateTime(1950, 1, 1)"
                    @bind-Date="@_selectedDate"
                    Variant="Variant.Outlined"
                    AdornmentIcon="@Icons.Material.Filled.CalendarToday" />
</MudPopover>
<MudOverlay DarkBackground="true" Class="@_className" AutoClose="true"
            OnClosed="() => TogglePopover(false)"
            Visible="@_isPopoverOpen" />

```

```csharp
@code {
    private bool _isPopoverOpen = false;
    private DateTime? _selectedDate { get; set; } = DateTime.Today;
    private string _className = string.Empty;

    private void TogglePopover(bool overRide)
    {
        if (overRide)
        {
            _className = "mud-skip-overlay-section";
        }
        else
        {
            _className = string.Empty;
        }
        _isPopoverOpen = !_isPopoverOpen;
    }
}

```

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

### MudBlazor Align Content Center Example

Source: https://mudblazor.com/utilities/align-content

Illustrates the 'align-content-center' utility class in MudBlazor for centering rows within a flex container. The example utilizes MudPaper components for visual representation.

```html
<MudPaper Class="d-flex align-content-center flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>
```

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

### MudBlazor DatePicker Text Parsing Example

Source: https://mudblazor.com/components/datepicker

Demonstrates the `ImmediateText` parameter for the MudBlazor DatePicker, enabling real-time parsing of user input into a date. The example shows how to handle text changes, parse various date formats using `DateTime.TryParseExact`, and update a bound `DateTime?` variable. It includes helper text to display the parsed date or 'not set'.

```blazor
@using System.Globalization

<MudDatePicker Label="Flexible Date" Editable="true" Date="_date" ImmediateText="true" Placeholder="day.month.year" DateFormat="@_dateFormat" TextChanged="DatePickerTextChanged" HelperText="@_bound" Clearable="true" />

@code {
    private DateTime? _date = null;
    private string _dateFormat = "dd.MM.yyyy";
    private string _bound = "not set";

    private void DatePickerTextChanged(string value)
    {
        if (value == null || value.Length < 6)
        {
            _date = null;
        }
        else
        {
            string[] formats = { "ddMMyy", "dd.MM.yyyy", "dd.M.yyyy", "d.MM.yyyy", "d.M.yyyy", "dd.MM.yy", "dd.M.yy", "d.MM.yy", "d.M.yy" };
            if (DateTime.TryParseExact(value, formats, CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime validDate))
            {
                _date = validDate;
            }
            else
            {
                _date = null;
            }
        }

        if (_date.HasValue)
        {
            _bound = _date.Value.ToString(_dateFormat); 
        }
        else
        {
            _bound = "not set";
        }
    }
}
```

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

### MudBlazor Align Self: Basic Usage Examples

Source: https://mudblazor.com/utilities/align-self

Demonstrates the basic usage of MudBlazor's 'align-self' utility classes to control the alignment of individual flex items. These examples showcase 'align-self-start', 'align-self-center', 'align-self-end', and 'align-self-stretch'.

```html
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
    <MudPaper Class="align-self-start py-4 flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
</MudPaper>
```

```html
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
    <MudPaper Class="align-self-center py-4 flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
</MudPaper>
```

```html
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
    <MudPaper Class="align-self-end py-4 flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
</MudPaper>
```

```html
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
    <MudPaper Class="align-self-stretch py-4 flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 flex-1 mud-theme-primary"/>
</MudPaper>
```

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

### Use MudOverlay as a Loader with ChildContent

Source: https://mudblazor.com/components/overlay

This example shows how to use MudOverlay with custom ChildContent to display loading progress. Overlays containing ChildContent are excluded from automatic scaffolding and rendered individually. This snippet requires MudBlazor components and basic Blazor concepts for state management.

```cshtml
<MudCard Class="my-2" Style="position:relative;">
    @if (!dataLoaded)
    {
        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px" />
        <MudCardContent>
            <MudSkeleton Width="30%" Height="42px;" />
            <MudSkeleton Width="80%" />
            <MudSkeleton Width="100%" />
        </MudCardContent>
        <MudCardActions>
            <MudSkeleton Width="64px" Height="40px" Class="ml-2" />
            <MudSkeleton Width="105px" Height="40px" Class="ml-3" />
        </MudCardActions>
        <MudOverlay Visible="visible" DarkBackground="true" Absolute="true">
            <MudProgressCircular Color="Color.Secondary" Indeterminate="true" />
        </MudOverlay>
    }
    else
    {
        <MudCardMedia Image="images/door.jpg" Height="200" />
        <MudCardContent>
            <MudText Typo="Typo.h5">Old Paint</MudText>
            <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
            <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
            <MudButton Variant="Variant.Text" Color="Color.Primary">Learn more</MudButton>
        </MudCardActions>
    }
</MudCard>

<MudToolBar Gutters="false">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay" EndIcon="@Icons.Material.Filled.Refresh">Refresh data</MudButton>
    <MudSpacer/>
    <MudButton Variant="Variant.Filled" OnClick="ResetExample">Reset example</MudButton>
</MudToolBar>

```

```csharp
@code {
    private bool visible;
    private bool dataLoaded;

    public async void OpenOverlay()
    {
        visible = true;
        dataLoaded = false;
        await Task.Delay(3000);
        dataLoaded = true;
        visible = false;
        StateHasChanged();
    }

    public void ResetExample()
    {
        dataLoaded = false;
    }
}

```

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

### No Flex Grow Example (HTML)

Source: https://mudblazor.com/utilities/flex-grow

Illustrates how to prevent flex items from growing using the `flex-grow-0` class. This ensures that items maintain their defined size and do not expand to fill available space. The example uses MudBlazor components.

```html
<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-grow-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-grow-0 py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-grow-1 py-8  mud-theme-primary" Width="64px" Elevation="0"/>
</div>
```

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

### MudBlazor Dialog Custom Styling Example

Source: https://mudblazor.com/components/dialog

Provides an example of how to apply custom CSS classes to different parts of a MudBlazor dialog, such as the title, content, and actions, for advanced styling. Uses Blazor and C#.

```csharp
@inject IDialogService DialogService

<MudButton @onclick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
    Open custom styled dialog
</MudButton>

```
@code {
    private Task OpenDialogAsync()
    {
        var options = new DialogOptions { CloseOnEscapeKey = true, CloseButton = true };

        return DialogService.ShowAsync<DialogStylingExample_Dialog>("Styling Example Dialog", options);
    }
}

```
```

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

### MudSnackbarProvider Component

Source: https://mudblazor.com/api/MudSnackbarProvider

Provides information and examples for using the MudSnackbarProvider component. Visit the Snackbar page for detailed usage examples.

```APIDOC
## MudSnackbarProvider Component

### Description
This component is used for displaying snackbar notifications. Refer to the Snackbar page for comprehensive usage examples and demonstrations.

### Method
GET

### Endpoint
/websites/mudblazor/snackbar

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This endpoint does not return a direct response body in the traditional sense. It is primarily for accessing documentation and examples.

#### Response Example
None

### Properties
#### Common
- **Class** (string) - Optional - The CSS classes applied to this component. Defaults to `null`. Use spaces to separate multiple classes. Use the Style property to apply custom CSS styles.
- **Style** (string) - Optional - The CSS styles applied to this component. Defaults to `null`. Use the Class property to apply CSS classes.
- **Tag** (object) - Optional - The arbitrary object to link to this component. This property is typically used to associate additional information with this component, such as a model containing data for this component.
- **UserAttributes** (Dictionary<string, object>) - Optional - The additional HTML attributes to apply to this component. This property is typically used to provide additional HTML attributes during rendering such as ARIA accessibility tags or a custom ID.

#### General
- **FieldId** (string) - Optional - If the UserAttributes contain an ID make it accessible for WCAG labelling of input fields.
- **RightToLeft** (bool) - Optional - Determines if the component should render in a right-to-left direction.

### Inheritance
- ComponentBase
  - ComponentBaseWithState
    - MudComponentBase
      - MudSnackbarProvider
```

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

### MudBlazor Simple Tabs Example

Source: https://mudblazor.com/components/tabs

Demonstrates the basic usage of MudBlazor Tabs with multiple MudTabPanel components. Each panel contains text content and can be configured with properties like Elevation, Rounded, and ApplyEffectsToContainer.

```blazor
<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
    <MudTabPanel Text="Tab One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Disabled" Disabled="true">
        <MudText>Content Disabled</MudText>
    </MudTabPanel>
</MudTabs>
```

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

### Install MudBlazor Translations NuGet Package

Source: https://mudblazor.com/features/localization

Installs the MudBlazor.Translations NuGet package, which provides crowdsourced translations for MudBlazor components. This is done via the .NET CLI.

```bash
dotnet add package MudBlazor.Translations

```

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

### MudTableBase FooterContent Example

Source: https://mudblazor.com/api/MudTableBase

Provides an example of using the `FooterContent` RenderFragment property in MudTableBase for defining table footers. It shows basic footer column definitions with `MudTd` and notes the option for custom multi-row footers when `CustomFooter` is `true`.

```html
<MudTableBase>
    <FooterContent>
        <MudTd>Footer Col 1</MudTd>
        <MudTd>Footer Col 2</MudTd>
        ...
    </FooterContent>
    ...
</MudTableBase>

<!-- For custom footers -->
<!-- <MudTableBase CustomFooter="true">
    <FooterContent>
        <MudTFootRow>
            <MudTd>Multi-Row Footer 1</MudTd>
            <MudTd>Multi-Row Footer 2</MudTd>
        </MudTFootRow>
    </FooterContent>
    ...
</MudTableBase> -->
```

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

### Global Snackbar Configuration in MudBlazor

Source: https://mudblazor.com/components/snackbar

Demonstrates how to configure Snackbar behavior globally in the `Program.cs` file. This example sets properties like position, transition durations, and visibility duration for all Snackbars.

```csharp
using MudBlazor.Services;

services.AddMudServices(config =>
{
    config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomLeft;

    config.SnackbarConfiguration.PreventDuplicates = false;
    config.SnackbarConfiguration.NewestOnTop = false;
    config.SnackbarConfiguration.ShowCloseIcon = true;
    config.SnackbarConfiguration.VisibleStateDuration = 10000;
    config.SnackbarConfiguration.HideTransitionDuration = 500;
    config.SnackbarConfiguration.ShowTransitionDuration = 500;
    config.SnackbarConfiguration.SnackbarVariant = Variant.Filled;
});

```

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

### MudBlazor DatePicker Basic Usage Examples

Source: https://mudblazor.com/components/datepicker

Demonstrates various configurations of the MudBlazor DatePicker component for basic date selection. Includes examples for a standard picker, editable picker with a placeholder, calendar-only view, custom date formatting, showing week numbers, and displaying two months simultaneously. It requires a `DateTime?` field for two-way binding.

```blazor
<MudDatePicker Label="Basic example" @bind-Date="_date"/>
<MudDatePicker Label="Editable with Placeholder" Editable="true" @bind-Date="_date" Placeholder="Select Date" />
<MudDatePicker Label="Only Calendar" @bind-Date="_date" ShowToolbar="false" />
<MudDatePicker Label="Date Format" @bind-Date="_date" DateFormat="dd.MM.yyyy" />
<MudDatePicker Label="Show week number" ShowWeekNumbers="true" @bind-Date="_date" />
<MudDatePicker Label="Display two months" DisplayMonths="2" TitleDateFormat="dddd, dd MMMM" @bind-Date="_date" />

@code {
    private DateTime? _date = DateTime.Today;
}
```

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

### MudTable ColGroup Styling Example (HTML)

Source: https://mudblazor.com/api/mudtable

Shows how to use the `ColGroup` property of the MudTable component to apply specific styling to table columns. This example demonstrates setting background colors and maximum widths for columns.

```html
<MudTable Items="@MyItems">
    <ColGroup>
        <col style="max-width: 120px; background-color: #f0f0f0;" />
        <col style="background-color: #e0e0e0;" />
        <col />
    </ColGroup>
    <Columns>
        <PropertyColumn Property="@((MyObject o) => o.Name)" Title="Name" />
        <PropertyColumn Property="@((MyObject o) => o.Age)" Title="Age" />
        <PropertyColumn Property="@((MyObject o) => o.Status)" Title="Status" />
    </Columns>
</MudTable>

@code {
    public class MyObject { public string Name { get; set; } public int Age { get; set; } public string Status { get; set; } }
    public IEnumerable<MyObject> MyItems = new List<MyObject>
    {
        new MyObject { Name = "Alice", Age = 30, Status = "Active" },
        new MyObject { Name = "Bob", Age = 25, Status = "Inactive" },
        new MyObject { Name = "Charlie", Age = 35, Status = "Active" }
    };
}
```

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

### Basic MudBlazor Theme Provider Setup

Source: https://mudblazor.com/customization/overview

The MudThemeProvider component sets up the default theme for MudBlazor components. No initial configuration is required, as it uses MudBlazor's default theme values.

```html
<MudThemeProvider />
```

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

### MudTableBase PagerContent Example

Source: https://mudblazor.com/api/MudTableBase

Demonstrates how to implement pagination in MudTableBase using the `PagerContent` RenderFragment. This typically involves including a `MudTablePager` component to enable navigation between data pages.

```html
<MudTableBase RowsPerPage="10" CurrentPage="0">
    <PagerContent>
        <MudTablePager />
    </PagerContent>
    ...
</MudTableBase>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.