MudBlazor - Blazor Component Library

Note: When using this component it can be good to have some CSS knowledge it might not serve all types of content out of the box.

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Open</MudButton>
<MudSwitch @bind-Value="_open" Color="Color.Primary" />
<MudToggleIconButton @bind-Toggled="@_open" Icon="@Icons.Material.Filled.Fullscreen" Color="@Color.Primary" ToggledIcon="@Icons.Material.Filled.FullscreenExit" ToggledColor="@Color.Secondary" />

<MudPopover Open="@_open" Fixed="true" Class="px-4 pt-4">
    <div class="d-flex flex-column">
        <MudText>Content of the popover can be anything.</MudText>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </div>
</MudPopover>

@code{
    private bool _open;

    private void ToggleOpen() => _open = !_open;
}

Direction and Location

Note: the location can be set with custom css or using the style tag.

Control where the popover should start from relative to the parent. Offset the popover to be located outside of the parent.

<MudGrid>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Anchor Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="AnchorOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="6" Class="d-flex justify-center align-center">
            <MudBadge Origin="@AnchorOrigin" Color="Color.Primary" Dot="true" Overlap="true" Elevation="4" BadgeClass="ma-2">
                <MudPaper Elevation="0" Outlined="true" Class="pa-12">
                    <MudPopover OverflowBehavior="OverflowBehavior.FlipNever" Open="true" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Class="pa-4">
                        <MudText Typo="Typo.body2" Class="px-4 py-1">The content of the popover</MudText>
                        <div class="@GetLocation()" style="top:0; left:0;">
                            <MudIcon Icon="@GetIcon()" Color="Color.Secondary" Class="" />
                        </div>
                    </MudPopover>
                </MudPaper>
            </MudBadge>
    </MudItem>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Transform Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="TransformOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code{
    public Origin TransformOrigin { get; set; } = Origin.TopLeft;
    public Origin AnchorOrigin { get; set; } = Origin.BottomLeft;

    public string GetIcon()
    {
        string icon = "";

        switch(TransformOrigin)
        {
            case Origin.TopLeft:
                icon = Icons.Material.Filled.SouthEast;
                break;
            case Origin.TopCenter:
                icon = Icons.Material.Filled.South;
                break;
            case Origin.TopRight:
                icon = Icons.Material.Filled.SouthWest;
                break;
            case Origin.CenterLeft:
                icon = Icons.Material.Filled.East;
                break;
            case Origin.CenterCenter:
                icon = Icons.Material.Filled.ZoomOutMap;
                break;
            case Origin.CenterRight:
                icon = Icons.Material.Filled.West;
                break;
            case Origin.BottomLeft:
                icon = Icons.Material.Filled.NorthEast;
                break;
            case Origin.BottomCenter:
                icon = Icons.Material.Filled.North;
                break;
            case Origin.BottomRight:
                icon = Icons.Material.Filled.NorthWest;
                break;
        }
        return icon;
    }

    public string GetLocation()
    {
        string align = "";
        string justify = "";
        string[] pos = TransformOrigin.ToDescriptionString().Split("-");

        if(pos[0] == "center")
        {
            align = "align-center";
        }
        else if(pos[0] == "top")
        {
            align = "align-start";
        }
        else if (pos[0] == "bottom")
        {
            align = "align-end";
        }
        if(pos[1] == "left")
        {
            justify = "justify-start";
        }
        else if (pos[1] == "right")
        {
            justify = "justify-end";
        }
        else if (pos[1] == "center")
        {
            justify = "justify-center";
        }

        return $"absolute mud-height-full mud-width-full d-flex {align} {justify}";
    }
}

Overflow Behavior

You can set the overflow behavior of the popover to either FlipNever, FilpOnOpen or FlipAlways
Resize your browser window slowly so the popover wont fit to see result in flip mode.

<MudPaper Outlined="true" Class="px-12 py-6">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" DropShadow="false" OnClick="@ToggleOpen">@(_open? "Close" : "Open")</MudButton>
    <MudPopover Open="_open" OverflowBehavior="OverflowBehavior.FlipAlways" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
        <MudPaper Outlined="true" Class="px-4 py-8">
            <MudText>Scroll your browser to see effect.</MudText>
        </MudPaper>
    </MudPopover>
</MudPaper>

@code {
    private bool _open = true;

    private void ToggleOpen() => _open = !_open;
}

Complex Content

You can have any content within a popover like with any other Blazor component. The position of the popover is updated automatically

<div class="d-flex">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">
        @(_open? "Close" : "Open")
    </MudButton>
    <MudPopover Open="@_open" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
        <div class="d-flex flex-column pa-1">
            <PopoverDynamicContentExample />
        </div>
    </MudPopover>
</div>

@code {

    public bool _open;

    public void ToggleOpen()
    {
        if (_open)
            _open = false;
        else
            _open = true;
    }
}

Dropdown Width

<div style="width: 250px;">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth OnClick="@ToggleOpen">Open</MudButton>
    <MudPopover Open="@_open" Class="pa-4" Fixed="true" RelativeWidth="@_dropdownWidth" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
        <MudText>Content of the popover can be anything.</MudText>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </MudPopover>
</div>

<div style="width: 250px; margin-left: 150px;">
    <MudSelect T="DropdownWidth" Label="Dropdown Width" @bind-Value="@_dropdownWidth">
        <MudSelectItem Value="@DropdownWidth.Relative">Relative</MudSelectItem>
        <MudSelectItem Value="@DropdownWidth.Adaptive">Adaptive</MudSelectItem>
        <MudSelectItem Value="@DropdownWidth.Ignore">Ignore</MudSelectItem>
    </MudSelect>
</div>

@code{
    private bool _open;

    private DropdownWidth _dropdownWidth = DropdownWidth.Ignore;

    private void ToggleOpen() => _open = !_open;
}

<MudMenu Class="" Label="A menu with tooltip" Variant="Variant.Filled" Color="Color.Primary">
    <div class="d-flex align-center">
        <MudText Class="ml-4">1</MudText>
        <MudTooltip Text="1 is good option">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
    <div class="d-flex align-center">
        <MudText Class="ml-4">2</MudText>
        <MudMenu Icon="@Icons.Material.Outlined.Mouse" ActivationEvent="@MouseEvent.MouseOver" Class="mx-2">
            <ChildContent>
                <MudMenuItem Label="Profile" />
                <MudMenuItem Label="Theme" />
                <MudMenuItem Label="Usage" />
                <MudMenuItem Label="Sign Out" />
            </ChildContent>
        </MudMenu>
        <MudTooltip Text="2 can be a better option">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
    <div class="d-flex align-center">
        <MudText Class="ml-4">3</MudText>
        <MudTooltip Text="3 is one more than 2">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
</MudMenu>

DropdownSettings

Some components use MudPopover to place their list of items in combination with MudOverlay. Some of these settings can be controlled with DropdownSettings which contain defaults for the MudPopover appearance and behavior. Default settings for DropdownSettings are:

Fixed = false - Displays the dropdown popover in a fixed position, even while scrolling.
OverflowBehavior = OverflowBehavior.FlipOnOpen - The behavior applied when there is not enough space for the dropdown popover to be visible.

Some settings reside on the MudMenu component itself due to differences between different types of dropdowns.
These settings and their defaults are:

RelativeWidth = DropdownWidth.Ignore - The width of the dropdown popover is not dependent upon the Activator or Parent.
AnchorOrigin = Origin.BottomLeft - The location where the popover will open from.

* AnchorOrigin and TransformOrigin do not have to be set, and if not set will have a default Nested behavior that can be overridden.

TransformOrigin = Origin.TopLeft - The transform origin point for the popover.

MudSelect

MudAutocomplete

Fixed

Anchor Origin

Transform Origin

Overflow Behavior

Dropdown Width

<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"
                   Label="Overflow Behavior"
                   @bind-Value="@_overflowBehavior">
            <MudSelectItem Value="@OverflowBehavior.FlipNever">Flip Never</MudSelectItem>
            <MudSelectItem Value="@OverflowBehavior.FlipOnOpen">Flip On Open</MudSelectItem>
            <MudSelectItem Value="@OverflowBehavior.FlipAlways">Flip Always</MudSelectItem>
        </MudSelect>
    </MudItem>

    <MudItem md="2">
        <MudSelect T="DropdownWidth"
                   Label="Dropdown Width"
                   @bind-Value="@_dropdownWidth">
            <MudSelectItem Value="@DropdownWidth.Relative">Relative (equal to activator width)</MudSelectItem>
            <MudSelectItem Value="@DropdownWidth.Adaptive">Adaptive (min = activator width)</MudSelectItem>
            <MudSelectItem Value="@DropdownWidth.Ignore">Ignore (independent width)</MudSelectItem>
        </MudSelect>
    </MudItem>

</MudGrid>

@code {

    private Origin _anchor = Origin.BottomLeft;
    private Origin _transform = Origin.TopLeft;
    private bool _fixed = false;
    private OverflowBehavior _overflowBehavior = OverflowBehavior.FlipOnOpen;
    private DropdownWidth _dropdownWidth = DropdownWidth.Relative;

    private DropdownSettings _dropdownSettings => new DropdownSettings() { Fixed = _fixed, OverflowBehavior = _overflowBehavior, };

    private string[] _states =
    {
        "Alabama", "Alaska", "Arizona", "Arkansas", "California",
        "Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
        "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas",
        "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts",
        "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico",
        "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma",
        "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
        "Tennessee", "Texas", "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming"
    };

    private async Task<IEnumerable<string>> Search(string value, CancellationToken token)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5, token);

        // if text is null or empty, show complete list
        if (string.IsNullOrEmpty(value))
            return _states;

        return _states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }
}

Popover

API

Simple Popover

Direction and Location

Anchor Origin

Transform Origin

Overflow Behavior

Complex Content

Popover RelativeWidth

Popover Inception

DropdownSettings