MudBlazor - Blazor Component Library

Basic

Basic timeline, displaying its TimelineItem vertically.

Item A

Item B

Item C

<MudTimeline>
    <MudTimelineItem>
        <MudText>Item A</MudText>
    </MudTimelineItem>
    <MudTimelineItem>
        <MudText Align="Align.End">Item B</MudText>
    </MudTimelineItem>
    <MudTimelineItem Color="Color.Primary">
        <MudText>Item C</MudText>
    </MudTimelineItem>
</MudTimeline>

Item Dots

The dot of each TimelineItem can be changed individually. And can contain conent, like icons and avatars.

Static dot

Dot Options

Color

Size

Variant

Dot Elevation

Default Icon Avatar Hide

<MudGrid>
    <MudItem xs="12" md="8" Class="my-auto">
        <MudTimeline Reverse="true">
            <MudTimelineItem>
                <MudText Align="Align.End">Static dot</MudText>
            </MudTimelineItem>
            <MudTimelineItem Color="@DotColor" Size="@DotSize" Variant="@DotVariant" Elevation="@DotElevation" HideDot="@HideDot">
                <ItemDot>
                    @if(DotConfig == 1)
                    {
                        <MudIcon Size="@DotSize" Icon="@Icons.Custom.Brands.MudBlazor"/>
                    }
                    else if(DotConfig == 2)
                    {
                        <MudAvatar Size="@DotSize" Image="images/mony.jpg" />
                    }
                </ItemDot>
            </MudTimelineItem>
            <MudTimelineItem>
                <MudText Align="Align.End">Static dot</MudText>
            </MudTimelineItem>
        </MudTimeline>
    </MudItem>
    <MudItem xs="12" md="4">
        <MudPaper Class="pa-4" Elevation="0">
            <MudText Typo="Typo.h6">Dot Options</MudText>
            <MudSelect Label="Color" Dense="true" Margin="Margin.Dense" @bind-Value="DotColor" Class="mt-4">
                <MudSelectItem T="Color" Value="Color.Default">Default</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Primary">Primary</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Secondary">Secondary</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Tertiary">Tertiary</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Info">Info</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Success">Success</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Warning">Warning</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Error">Error</MudSelectItem>
                <MudSelectItem T="Color" Value="Color.Dark">Dark</MudSelectItem>
            </MudSelect>
            <MudSelect Label="Size" Dense="true" Margin="Margin.Dense" @bind-Value="DotSize" Class="mt-4">
                <MudSelectItem T="Size" Value="Size.Small">Small</MudSelectItem>
                <MudSelectItem T="Size" Value="Size.Medium">Medium</MudSelectItem>
                <MudSelectItem T="Size" Value="Size.Large">Large</MudSelectItem>
            </MudSelect>
            <MudSelect Label="Variant" Dense="true" Margin="Margin.Dense" @bind-Value="DotVariant" Class="mt-4">
                <MudSelectItem T="Variant" Value="Variant.Outlined">Outlined</MudSelectItem>
                <MudSelectItem T="Variant" Value="Variant.Filled">Filled</MudSelectItem>
            </MudSelect>
            <MudSlider @bind-Value="DotElevation" Step="1" Min="0" Max="25" Class="mt-2">Dot Elevation</MudSlider>
            <MudRadioGroup T="int" ValueChanged="DotConfigChanged">
                <MudRadio Value="0" Color="Color.Primary">Default</MudRadio>
                <MudRadio Value="1" Color="Color.Secondary">Icon</MudRadio>
                <MudRadio Value="2" Color="Color.Tertiary">Avatar</MudRadio>
                <MudRadio Value="3" Color="Color.Default">Hide</MudRadio>
            </MudRadioGroup>
        </MudPaper>
    </MudItem>
</MudGrid>

@code{
    public Size DotSize { get; set; } = Size.Medium;
    public Color DotColor { get; set; } = Color.Primary;
    public Variant DotVariant { get; set; } = Variant.Outlined;
    public int DotElevation { get; set; } = 1;
    public bool HideDot { get; set; }
    public int DotConfig;

    void DotConfigChanged(int value)
    {
        switch(value)
        {
            case 3:
                DotConfig = value;
                HideDot = true;
                break;
            default:
                DotConfig = value;
                HideDot = false;
                break;
        }
    }
}

Dot style

The style of each TimelineItem dot can be set individually using the DotStyle attribute.

Static dot

Red dot

Static dot

<MudItem>
    <MudTimeline Reverse="true">
        <MudTimelineItem>
            <MudText Align="Align.End">Static dot</MudText>
        </MudTimelineItem>
        <MudTimelineItem DotStyle="background-color: #ff0000">
            <MudText Align="Align.End">Red dot</MudText>
        </MudTimelineItem>
        <MudTimelineItem>
            <MudText Align="Align.End">Static dot</MudText>
        </MudTimelineItem>
    </MudTimeline>
</MudItem>

Timeline

API

Basic

Item Dots

Dot Options

Dot style