タイムライン

縦のタイムライン（交互 / 左寄せ）、アクティビティフィード、横のタイムライン。

タイムライン

タイムライン

Vue

<ThlTimeline :items="timeline.slice(0, 4)" />

React

<Timeline items={timeline} />
<Timeline items={timeline} variant="left" />

Angular

<thl-timeline [items]="timeline" />
<thl-timeline [items]="timeline" variant="left" />

ActivityFeed と横向き

ActivityFeed と横向き

Vue

<div class="thl-stack"><ThlActivityFeed :items="feed" /><ThlHorizontalTimeline :items="hItems" /></div>

React

<ActivityFeed items={feed} />
<HorizontalTimeline items={hItems} />

Angular

<thl-activity-feed [items]="feed" />
<thl-horizontal-timeline [items]="hItems" />

API

Timeline

<ThlTimeline> · import { ThlTimeline } from '@thl-ui/vue'

Prop	型	デフォルト
items*	array	—
variant	string	"alternate"
headingLevel	number	3

スロット: item

ActivityFeed

<ThlActivityFeed> · import { ThlActivityFeed } from '@thl-ui/vue'

Prop	型	デフォルト
items*	array	—

HorizontalTimeline

<ThlHorizontalTimeline> · import { ThlHorizontalTimeline } from '@thl-ui/vue'

Prop	型	デフォルト
items*	array	—
headingLevel	number	3