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">
                            <MudImage Src="images/mony.jpg" />
                        </MudAvatar>
                    }
                </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>

Orientation and Position

TimelineOrientation can determine which direction the timeline should go, and TimelinePosition sets the lines position.

TimelineOrientation

TimelinePosition

Reverse

The reactor is running at optimum temperature

13:37

The reactor temperature exceeds the optimal range

14:08

Meltdown is imminent

15:00

<MudGrid>
    <MudItem xs="12" sm="5">
        <MudSelect T="TimelineOrientation" ValueChanged="OnOrientationChange" Label="TimelineOrientation" Dense="true" Variant="Variant.Outlined">
            <MudSelectItem T="TimelineOrientation" Value="TimelineOrientation.Vertical">Vertical</MudSelectItem>
            <MudSelectItem T="TimelineOrientation" Value="TimelineOrientation.Horizontal">Horizontal</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="5">
        <MudSelect T="TimelinePosition" @bind-Value="_position" Label="TimelinePosition" Dense="true" Variant="Variant.Outlined">
            @if(_orientation == TimelineOrientation.Vertical)
            {
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Start">Start</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Left">Left</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Alternate">Alternate</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Right">Right</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.End">End</MudSelectItem>
            }
            else if(_orientation == TimelineOrientation.Horizontal)
            {
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Top">Top</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Alternate">Alternate</MudSelectItem>
                <MudSelectItem T="TimelinePosition" Value="TimelinePosition.Bottom">Bottom</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="2">
        <MudSwitch Label="Reverse" @bind-Value="_reverse" Disabled="IsSwitchDisabled()" Color="Color.Primary" />
    </MudItem>
</MudGrid>

<MudTimeline TimelineOrientation="_orientation" TimelinePosition="_position" Reverse="_reverse">
    <MudTimelineItem Color="Color.Success" Variant="Variant.Filled">
        <ItemContent>
            <MudAlert Severity="Severity.Success">The reactor is running at optimum temperature</MudAlert>
        </ItemContent>
        <ItemOpposite>
            <MudText Color="Color.Success">13:37</MudText>
        </ItemOpposite>
    </MudTimelineItem>
    <MudTimelineItem Color="Color.Warning" Variant="Variant.Filled">
        <ItemContent>
            <MudAlert Severity="Severity.Warning">The reactor temperature exceeds the optimal range</MudAlert>
        </ItemContent>
        <ItemOpposite>
            <MudText Color="Color.Warning">14:08</MudText>
        </ItemOpposite>
    </MudTimelineItem>
    <MudTimelineItem Color="Color.Error" Variant="Variant.Filled">
        <ItemContent>
            <MudAlert Severity="Severity.Error">Meltdown is imminent</MudAlert>
        </ItemContent>
        <ItemOpposite>
            <MudText Color="Color.Error">15:00</MudText>
        </ItemOpposite>
    </MudTimelineItem>
</MudTimeline>

@code {
    private TimelinePosition _position { get; set; } = TimelinePosition.Start;
    private TimelineOrientation _orientation { get; set; } = TimelineOrientation.Vertical;
    private bool _reverse { get; set; }

    private void OnOrientationChange(TimelineOrientation value)
    {
        _orientation = value;
        switch (value)
        {
            case TimelineOrientation.Vertical:
                if (_position is TimelinePosition.Top or TimelinePosition.Bottom)
                    _position = TimelinePosition.Start;
                break;
            case TimelineOrientation.Horizontal:
                if (_position is TimelinePosition.Start or TimelinePosition.Left or TimelinePosition.Right or TimelinePosition.End)
                    _position = TimelinePosition.Top;
                break;
        }
    }

    bool IsSwitchDisabled()
    {
        if (_position == TimelinePosition.Alternate)
            return false;
        else
            _reverse = false;
        return true;
    }
}