MudBlazor

Divider

A divider is a thin line that groups content in lists and layouts.

List Dividers

Inbox


Sent


Drafts


Spam

<MudPaper Width="300px" Square="true">
    <MudList Clickable="true">
        <MudListItem>Inbox</MudListItem>
        <MudDivider />
        <MudListItem>Sent</MudListItem>
        <MudDivider />
        <MudListItem>Drafts</MudListItem>
        <MudDivider />
        <MudListItem>Spam</MudListItem>
    </MudList>
</MudPaper>

Insert Dividers

Adds a margin to the left side of the divider.

Trending


Most Stars


History

<MudPaper Width="300px" Square="true">
    <MudList>
        <MudListItem Avatar="@Icons.Material.Filled.TrendingUp">
            Trending
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Avatar="@Icons.Material.Filled.StarRate">
            Most Stars
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Avatar="@Icons.Material.Filled.History">
            History
        </MudListItem>
    </MudList>
</MudPaper>

Middle Dividers

Middle dividers have margin on both left and right side.

Uranium-235

This is the type of uranium used in the RBMK reactors.


Select Reactor Type

RBMK-1000
RBMK-1500
RBMKP-2400
<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h5">Uranium-235</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent>
        <MudText>This is the type of uranium used in the RBMK reactors.</MudText>
        <MudDivider DividerType="DividerType.Middle" Class="my-6"/>
        <MudText GutterBottom="true">Select Reactor Type</MudText>
        <MudChip Color="Color.Secondary">RBMK-1000</MudChip><MudChip>RBMK-1500</MudChip><MudChip>RBMKP-2400</MudChip>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Read More</MudButton>
    </MudCardActions>
</MudCard>

Vertical Dividers

Vertical dividers can be used inside parents with a set height. If the parent doesn't have a set height but is displayed with flex, use the Flexitem property.


<MudPaper Square="true" Class="d-flex justify-space-around">
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignRight" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignCenter" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignLeft" Color="Color.Dark" Class="rounded-0" />

    <MudDivider Vertical="true" FlexItem="true" />

    <MudIconButton Icon="@Icons.Material.Filled.FormatBold" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatItalic" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatUnderlined" Color="Color.Dark" Class="rounded-0" />
</MudPaper>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙