morasiu/blazortimeline

Responsive, vertical timeline component.

BlazorTimeline

Simple timeline component for Blazor

It's responsive!

Features

• ✅ Simple component
• ✅ Color customization
• ✅ Responsive!
• ✅ You can put anything in the description!

Checkout CHANGELOG for more info.

Usage

1. Install from Nuget

2. Add using to your project.

@using BlazorTimeline

3. Example code

@using BlazorTimeline

<Timeline
    Title="My timeline"
    TitleBgColor="#554DE0"
    TitleColor="#FFFFFF"
    TextColor="#F3F3F3"
    TextBgColor="#212121"
    ItemPositionOption="@ItemPositionOption.AutoAltering">
    
    <TimelineItem Title="First item" Time="01.01.2020" ButtonText="Github" Link="https://github.com/">
        Here we can write description :) And even add some buttons!
    </TimelineItem>

    <TimelineItem Title="Second item">
        <span>Timeline item can be altered to appear on the right! </span>

        <span>And we can add anything here :)</span> <br/>

        <code>Even some code!</code> <br/>

        <span>Or Images!</span> <br/>

        <img src="Images/kitty.jpg" width="200px"/>
    </TimelineItem>
</Timeline>

There is also a demo project in repo.

Final notes

If you know some CSS magic I would totally appreciate help to clean up my CSS.

Thanks

Thanks Bruno Rodrigues for that code sample!

SAMPLE

License

This project is licensed under the MIT License - see the LICENSE file for details

blazortimeline's Issues

Timeline style not working with MudBlazor

I find your package very interesting but getting stuck to have styles applied to my Items.

I can find that, styles not applying and also, the position not working.

<Timeline
    Title="Historique"
    TitleBgColor="#554DE0"
    TitleColor="#FFFFFF"
    TextColor="#F3F3F3"
    TextBgColor="#212121"
    ItemPositionOption="@ItemPositionOption.Manual">

    @if (_isLoaded)
    {
        @if (_timelineItems.Count() >= 0)
        {
            @foreach (var item in _timelineItems)
            {
                <TimelineItem Title="Entrée" Time="@item.DateEvenement.ToString("D")"
                              Position="@(_timelineItems.IndexOf(item) % 2 == 0 ? ItemPosition.Left : ItemPosition.Right)">

                    <p>@item.details</p>
                </TimelineItem>
            }
        }
    }
</Timeline>

What have I done wrong ?

dotnet publish won't work with this package

I have a problem using this package with dotnet publish. I got the error C:\Program Files\dotnet" exited with code 1. That's it. When I remove the package everything is working fine.

Multiple Onject in cicle foreach

if RelListaProfessionistaAnnata.count is 0 previus object Timeline reset data

@foreach (var item in RelListaProfessionistaAnnata)
{

@item.Descrizione

@if (item.DescrizioneEN.Length > 3)
{

@item.DescrizioneEN

}
@if (item.DescrizioneFR.Length > 3)
{

@item.DescrizioneFR

}

<button type="button" @OnClick="@(() => NavigateToUrlAsync("https://ipfs.veritasnft.info/ipfs/" + item.IPFSDocumentData, true))" class="btn btn-primary me-3">@localizarGen["Vis"]

}

Possibility to change SVG of the icon in dot

Probably in some parameter with cascading parameters to apply to all dots.

<Timeline
   ... Other paramters
    Icon="path/to/svg.icon">

<TimelineItem
   ... Other paramters
    Icon="path/to/svg.icon">

CSS Conflicts with bootstrap

Hi, I found an issues while I was using your module.
To summarize your TimelineItem.razor.css overrides bootstrap's css witch occurs a change of the button aspect with the class name "btn" (they turn into purple the same color than the button we can use on the TimelineItem).