Divider

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

See Divider API for parameter documentation.

List Dividers

Inbox


Sent


Drafts


Spam

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 dosent have a set height but is displayed with flex use the Flexitem property.


Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 🗙