https://github.com/try0/simple-timeline
Simple timeline. js css勉強用
https://github.com/try0/simple-timeline
browser history javascript js schedule timeline web
Last synced: about 1 year ago
JSON representation
Simple timeline. js css勉強用
- Host: GitHub
- URL: https://github.com/try0/simple-timeline
- Owner: try0
- Created: 2022-02-11T14:09:59.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-23T04:03:29.000Z (about 4 years ago)
- Last Synced: 2025-02-09T16:14:57.725Z (about 1 year ago)
- Topics: browser, history, javascript, js, schedule, timeline, web
- Language: JavaScript
- Homepage:
- Size: 547 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-timeline
[Example](https://try0.github.io/simple-timeline/example/index.html)
```js
const stl = new SimpleTimeline(document.getElementById("timeline-container"), {
option: {
progress: true,
currentLabel: "Current"
},
items: [
{
state: "passed",
date: "2022-01-01",
title: "Passed item",
content: "Passed item",
},
{
state: "current",
date: "2022-01-02",
title: "Current item",
content: "Current item",
},
{
state: "schedule",
date: "2022-01-03",
title: "Schedule item",
content: "Schedule item",
},
]
});
```
```js
SimpleTimeline.setGlobalOption({
// your global options
});
```
| Option | |
| ---- | ---- |
| progress | ステータスを考慮して、ラインを描画する |
| progressInverted | ラインの進行状況を逆にする |
| autoProgress | 現在日時と比較してラインを描画する |
| dateFormatter | 日付フォーマッター |
| currentLabel | 現在のアイテムを強調するラベル文字列 |
| header | ヘッダー
{ label: "Header" } |
| footer | フッター
{ label: "Footer" } |
[Example](https://github.com/try0/simple-timeline/blob/main/example/index.html)