Timeline

Vertical rail of dated events

A history read top to bottom — release notes, an order's progress, a production diary. For steps the user is going through right now, use Steps or Stepper.

Basic

1. 2019.09.25Blu-ray Disc BOX

   全25話収録

2. 2019.10.26劇場版 Fine 公開
3. 2019.11.01舞台挨拶

   新宿ピカデリー

4. 2020.04.01配信開始

<script setup lang="ts">
import { BlessTimeline } from "blessing-ui";
const items = [
  {
    time: "2019.09.25",
    datetime: "2019-09-25",
    title: "Blu-ray Disc BOX",
    description: "全25話収録",
  },
  {
    time: "2019.10.26",
    datetime: "2019-10-26",
    title: "劇場版 Fine 公開",
    color: "success" as const,
  },
  { time: "2019.11.01", datetime: "2019-11-01", title: "舞台挨拶", description: "新宿ピカデリー" },
  { time: "2020.04.01", datetime: "2020-04-01", title: "配信開始" },
];
</script>

<template>
  <BlessTimeline :items style="max-width: 420px" />
</template>

• time is shown as written; add datetime (2015-01) so the <time> element carries a machine-readable date.
• A dot's color is decoration only, and ink by default; keep accent for the entry that is chosen or current. If it means something (failed, shipped), say so in the title too.
• The default slot replaces the body of every item and gets { item, index }; #dot draws inside the dot.

Usage

import { BlessTimeline } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessTimelineItem[]	—
label	string	"Timeline"

Slots

Name	Scope	Description
dot	{ item: BlessTimelineItem; index: number; }
default	{ item: BlessTimelineItem; index: number; }