{"id":19976619,"url":"https://github.com/erossini/blazortimeline","last_synced_at":"2025-09-08T18:36:02.919Z","repository":{"id":150093019,"uuid":"604707443","full_name":"erossini/BlazorTimeline","owner":"erossini","description":"A new timeline for Blazor","archived":false,"fork":false,"pushed_at":"2023-02-28T14:54:35.000Z","size":55,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-12T15:40:02.972Z","etag":null,"topics":["blazor","blazor-component","blazor-components","blazor-server","blazor-ui-components","blazor-webassembly"],"latest_commit_sha":null,"homepage":"https://www.puresourcecode.com/dotnet/blazor/timeline-component-for-blazor/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erossini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"erossini"}},"created_at":"2023-02-21T16:14:56.000Z","updated_at":"2025-02-18T13:09:46.000Z","dependencies_parsed_at":"2023-06-05T08:00:13.843Z","dependency_job_id":null,"html_url":"https://github.com/erossini/BlazorTimeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/erossini/BlazorTimeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorTimeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorTimeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorTimeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorTimeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erossini","download_url":"https://codeload.github.com/erossini/BlazorTimeline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorTimeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274229375,"owners_count":25245188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-component","blazor-components","blazor-server","blazor-ui-components","blazor-webassembly"],"created_at":"2024-11-13T03:24:45.010Z","updated_at":"2025-09-08T18:36:02.875Z","avatar_url":"https://github.com/erossini.png","language":null,"funding_links":["https://github.com/sponsors/erossini"],"categories":[],"sub_categories":[],"readme":"# Timeline for Blazor\n\nThis is a new component for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/). The components is build with [NET6](https://www.puresourcecode.com/tag/net6/).\n\nThe timeline is responsive and easy to customize. The `Timeline` is configuration with the colors, icon and HTML code. Each `TimelineItem` has properties for changing colors and more features.\n\n\u003cimg width=\"410\" alt=\"Timeline\" src=\"https://user-images.githubusercontent.com/9497415/220400235-903db41b-ef8e-4bd6-b740-ed5c026f9402.png\"\u003e\n\nFor more details about this component, please see this post on [PureSourceCode.com](https://www.puresourcecode.com/dotnet/blazor/timeline-component-for-blazor/). \nIf you need support for this component or you have a suggestion or comment, please use my [Forum](https://www.puresourcecode.com/forum/timeline/).\n\n## Usage\n\n### 1. Install \n\nThis component is a Nuget package available from [this link](https://www.nuget.org/packages/PSC.Blazor.Components.Timeline/).\n\n### 2. Add using to your project.\n\n```html\n@using PSC.Blazor.Components.Timeline\n@using PSC.Blazor.Components.Timeline.Enums\n```\n\n### 3. Example code\n```html\n@using PSC.Blazor.Components.Timeline\n\n\u003cTimeline ItemPositionOption=\"@ItemPositionOption.Manual\"\u003e\n    \u003cTimelineItem Title=\"Start here\" Time=\"@DateTime.Now.ToString(\"dd/MM/yyyy\")\" \n        ButtonText=\"PureSourceCode.com\" Link=\"https://www.puresourcecode.com\"\u003e\n        Here you can write some text. The \u003ccode\u003eTimelineItem\u003c/code\u003e has \n        the property for adding a button called \u003ccode\u003eButtonText\u003c/code\u003e\n        and you can add a link with \u003ccode\u003eLink\u003c/code\u003e.\n    \u003c/TimelineItem\u003e\n\n    \u003cTimelineItem Title=\"Custom content\" Position=\"ItemPosition.Right\" Icon=\"Icon.UserTime\"\u003e\n        \u003cspan\u003e\n            \u003ccode\u003eTimelineItem\u003c/code\u003e can be altered to appear on the right! \n            Also, you can use the default icon or use one of the embedded icons with \u003ccode\u003eIcon\u003c/code\u003e.\n        \u003c/span\u003e\n\n        \u003cspan\u003eYou can add images or any other HTML code\u003c/span\u003e \u003cbr /\u003e\n        \u003cimg src=\"/psc_logo.png\" style=\"max-width: 100%;\" /\u003e\n    \u003c/TimelineItem\u003e\n\n    \u003cTimelineItem Title=\"Documentation\" Icon=\"Icon.Timeline\" \n                  ButtonText=\"Documentation\" Link=\"https://www.puresourcecode.com\"\u003e\n        \u003cspan\u003e\n            Now, visit the page with the documentation and same examples.\n        \u003c/span\u003e\n    \u003c/TimelineItem\u003e\n\n    \u003cTimelineItem TitleBackgroundColor=\"#70b0ff\" TextBackgroundColor=\"#ffffff\" \n                  Title=\"Forum\" Icon=\"Icon.ReminderClock\" ButtonText=\"Forum\" \n                  Link=\"https://www.puresourcecode.com\"\u003e\n        \u003cspan\u003e\n            Use the forum to send your comment or submit your questions.\n        \u003c/span\u003e\n    \u003c/TimelineItem\u003e\n\u003c/Timeline\u003e\n```\n\n## Timeline properties and methods\n\n### Timeline properties\n\n|   | Name               | Description                                      |\n|---|--------------------|--------------------------------------------------|\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | ChildContent\t     | Gets or sets the content of the child.           |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | ItemPositionOption | Should items be altered automatically or manual. |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TextBgColor\t       | Description background color.                    |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TextColor\t         | Description text color.                          |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Title\t             | Timeline title which will be displayed above.    |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TitleBgColor       | Background color for title section.              |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TitleColor\t       | Text color for title section.                    |\n\n### Timeline item properties\n\n|   | Name                | Description                                      |\n|---|---------------------|--------------------------------------------------|\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | ButtonText\t        | Gets or sets the button text.                    |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | ChildContent\t      | Gets or sets the content of the child.           |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Icon\t              | Gets or sets the icon.                           |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | IconContent\t        | Gets or sets the content of the icon.            |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Link\t              | Gets or sets the link.                           |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Position\t          | Gets or sets the position.                       |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TextBackgroundColor\t| Gets or sets the color of the text background.   |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Time                | Gets or sets the time.                           |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Timeline\t          | Gets or sets the timeline.                       |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | Title\t              | Title for timeline item                          |\n| ![image](https://user-images.githubusercontent.com/9497415/220409836-c7035379-3fb1-48f2-9906-5c799b62e18e.png) | TitleBackgroundColor | Gets or sets the color of the back ground.      |\n\n## Timeline Icon embedded\n\n- Clock\n- ClockDateTime\n- Default\n- DigitalNumber0\n- DigitalNumber1\n- DigitalNumber2\n- DigitalNumber3\n- DigitalNumber4\n- DigitalNumber5\n- DigitalNumber6\n- DigitalNumber7\n- DigitalNumber8\n- DigitalNumber9\n- HourGlass\n- HourGlassOld\n- ReminderClock\n- SandClock\n- Timeline\n- UserTime\n\n\n---\n    \n## PureSourceCode.com\n\n[PureSourceCode.com](https://www.puresourcecode.com/) is my personal blog where I publish posts about technologies and in particular source code and projects in [.NET](https://www.puresourcecode.com/category/dotnet/). \n\nIn the last few months, I created a lot of components for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/).\n\nMy name is Enrico Rossini and you can contact me via:\n- [Personal Twitter](https://twitter.com/erossiniuk)\n- [LinkedIn](https://www.linkedin.com/in/rossiniuk)\n- [Facebook](https://www.facebook.com/puresourcecode)\n\n## Blazor Components\n\n| Component name | Forum | NuGet | Website | Description |\n|---|---|---|---|---|\n| [Autocomplete for Blazor](https://www.puresourcecode.com/dotnet/net-core/autocomplete-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/autocomplete-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Autocomplete) | | Simple and flexible autocomplete type-ahead functionality for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |\n| [Browser Detect for Blazor](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/browser-detect-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.BrowserDetect) | [Demo](https://browserdetect.puresourcecode.com) | Browser detect for Blazor WebAssembly and Blazor Server |\n| [ChartJs for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/chart-js-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Chartjs) | [Demo](https://chartjs.puresourcecode.com/) | Add beautiful graphs based on ChartJs in your Blazor application |\n| [Clippy for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/clippy/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Clippy) | [Demo](https://clippy.puresourcecode.com/) | Do you miss Clippy? Here the implementation for Blazor |\n| [CodeSnipper for Blazor](https://www.puresourcecode.com/dotnet/blazor/code-snippet-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/codesnippet-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.CodeSnippet) | | Add code snippet in your Blazor pages for 196 programming languages with 243 styles |\n| [Copy To Clipboard](https://www.puresourcecode.com/dotnet/blazor/copy-to-clipboard-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/copytoclipboard/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.CopyToClipboard) | | Add a button to copy text in the clipboard | \n| [DataTable for Blazor](https://www.puresourcecode.com/dotnet/net-core/datatable-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/datatables/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.DataTable) | [Demo](https://datatable.puresourcecode.com/) | DataTable component for Blazor WebAssembly and Blazor Server |\n| [Icons and flags for Blazor](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Icons) | | Library with a lot of SVG icons and SVG flags to use in your Razor pages |\n| [Markdown editor for Blazor](https://www.puresourcecode.com/dotnet/blazor/markdown-editor-with-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/markdown-editor-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.MarkdownEditor) | [Demo](https://markdown.puresourcecode.com/) | This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. |\n| [Modal dialog for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.ModalDialog) | | Simple Modal Dialog for Blazor WebAssembly |\n| [Modal windows for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Modals) | | Modal Windows for Blazor WebAssembly |\n| [Quill for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-a-blazor-component-for-quill/) | [Forum](https://www.puresourcecode.com/forum/forum/quill-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Quill) | | Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application |\n| [ScrollTabs](https://www.puresourcecode.com/dotnet/blazor/scrolltabs-component-for-blazor/) | | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.ScrollTabs) | | Tabs with nice scroll (no scrollbar) and responsive |\n| [Segment for Blazor](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/segments-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Segments) | | This is a Segment component for Blazor Web Assembly and Blazor Server |\n| [Tabs for Blazor](https://www.puresourcecode.com/dotnet/blazor/tabs-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/tabs-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Tabs) | | This is a Tabs component for Blazor Web Assembly and Blazor Server |\n| [Timeline for Blazor](https://www.puresourcecode.com/dotnet/blazor/timeline-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/timeline/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Timeline) | | This is a new responsive timeline  for Blazor Web Assembly and Blazor Server |\n| [Toast for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Toast) | | Toast notification for Blazor applications |\n| [Tours for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Tours) | | Guide your users in your Blazor applications |\n| [WorldMap for Blazor]() | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.WorldMap) | [Demo](https://worldmap.puresourcecode.com/) | Show world maps with your data |\n\n## C# libraries for .NET6\n\n| Component name | Forum | NuGet | Description |\n|---|---|---|---|\n| [PSC.Evaluator](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Evaluator) | PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions. |\n| [PSC.Extensions](https://www.puresourcecode.com/dotnet/net-core/a-lot-of-functions-for-net5/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Extensions) | A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions... |\n\n## More examples and documentation\n*   [Write a reusable Blazor component](https://www.puresourcecode.com/dotnet/blazor/write-a-reusable-blazor-component/)\n*   [Getting Started With C# And Blazor](https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/)\n*   [Setting Up A Blazor WebAssembly Application](https://www.puresourcecode.com/dotnet/blazor/setting-up-a-blazor-webassembly-application/)\n*   [Working With Blazor Component Model](https://www.puresourcecode.com/dotnet/blazor/working-with-blazors-component-model/)\n*   [Secure Blazor WebAssembly With IdentityServer4](https://www.puresourcecode.com/dotnet/blazor/secure-blazor-webassembly-with-identityserver4/)\n*   [Blazor Using HttpClient With Authentication](https://www.puresourcecode.com/dotnet/blazor/blazor-using-httpclient-with-authentication/)\n*   [InputSelect component for enumerations in Blazor](https://www.puresourcecode.com/dotnet/blazor/inputselect-component-for-enumerations-in-blazor/)\n*   [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)\n*   [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)\n*   [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)\n*   [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0\u0026tabs=visual-studio)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazortimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferossini%2Fblazortimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazortimeline/lists"}