BlazorTimeline - GitLite

KO | EN

gitlite — search

#hacktoberfest #llm #machine-learning #rust #docker #nodejs #awesome #cli #kubernetes #awesome-list #security #pytorch #mcp #open-source

BlazorTimeline

(★ 68)

Responsive, vertical timeline component.

파일 탐색기

최종 버전 다운로드 (.zip)

- - main.yml
- FUNDING.yml
- - _Imports.razor
  - BlazorTimeline.csproj
  - ItemPosition.cs
  - ItemPositionOption.cs
  - Timeline.razor
  - Timeline.razor.css
  - TimelineItem.razor
  - TimelineItem.razor.css
- - _Imports.razor
  - App.razor
  - Demo.csproj
  - Program.cs
- - Tests.csproj
  - TimelineItemTests.cs
  - TimelineTests.cs
- BlazorTimeline.sln
- Main.png
- Responsive.gif
.gitignore
CHANGELOG.md
LICENSE
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Morasiu/BlazorTimeline

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd BlazorTimeline

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. .NET

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
.NET SDK dotnet 명령어를 쓰기 위한 SDK입니다.

cd BlazorTimeline

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

dotnet restore

프로젝트에 필요한 패키지를 내려받습니다.

dotnet run

프로젝트를 빌드하고 바로 실행합니다.

✅ dotnet run 실행 후 터미널에 나타나는 안내 메시지나 주소를 확인하세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![GitHub license](https://img.shields.io/github/license/Morasiu/BlazorTimeline)](https://github.com/Morasiu/BlazorTimeline/blob/master/LICENSE)
[![Nuget](https://img.shields.io/nuget/v/BlazorTimeline)](https://www.nuget.org/packages/BlazorTimeline/)
[![Nuget](https://img.shields.io/nuget/dt/BlazorTimeline)](https://www.nuget.org/packages/BlazorTimeline/)

# BlazorTimeline
Simple timeline component for Blazor

![Main image](https://raw.githubusercontent.com/Morasiu/BlazorTimeline/develop/Images/Main.png)

## It's responsive!

![Responsive GIF](https://raw.githubusercontent.com/Morasiu/BlazorTimeline/develop/Images/Responsive.gif)

## Features

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

> Checkout [CHANGELOG](CHANGELOG.md) for more info.

## Usage

### 1. Install from [Nuget](https://www.nuget.org/packages/BlazorTimeline/)

### 2. Add using to your project.

```html
@using BlazorTimeline
```

### 3. Example code
```html
@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](https://github.com/Morasiu/BlazorTimeline/tree/master/BlazorTimeline/Demo) in repo.

### Final notes

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

## Thanks

Thanks [Bruno Rodrigues](https://github.com/itbruno) for that code sample!

[SAMPLE](https://codepen.io/itbruno/pen/KwarLp/?editors=1100)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

<a href="https://www.buymeacoffee.com/morasiu" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>