Skip to content

Responsive, vertical timeline component.

License

Notifications You must be signed in to change notification settings

natehaby/BlazorTimeline

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Responsive, vertical timeline component.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C# 44.8%
  • HTML 29.2%
  • CSS 26.0%