BlazorTimeline Save

Responsive, vertical timeline component.

Project README

GitHub license Nuget Nuget

BlazorTimeline

Simple timeline component for Blazor

Main image

It's responsive!

Responsive GIF

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

Buy Me A Coffee

Open Source Agenda is not affiliated with "BlazorTimeline" Project. README Source: Morasiu/BlazorTimeline
Stars
65
Open Issues
0
Last Commit
1 year ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating