KTimeline

Vertical display timeline.

Install

pnpm

pnpm add @ikun-ui/timeline

yarn

yarn add @ikun-ui/timeline

npm

npm install @ikun-ui/timeline

Basic usage

Basic timeline.

Color

Set the color of circles.

Last node and Reversing

When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. reverse={true} is used for reversing nodes.

Custom render pending content

You can customize the rendering of pending nodes through the pending slot and pendingDot slot.

TIP

• The pendingDot slot provides style class cls, rendering node item item and rendering index index
• The pending slot provides the style class cls, the content of the rendering node item children and the rendering index index

Right alternate

Right alternate timeline.

Alternate

Alternate timeline.

Label

Use label show time alone.

Custom render

You can customize the rendering of pending nodes through the label slot 、dot slot and children slot.

TIP

• The dot slot provides style class cls, rendering node item item and rendering index index
• The children slot provides the style class cls, the content of the rendering node item children and the rendering index index
• The label slot provides the style class cls, the content of the rendering node item label and the rendering index index

Timeline Props

Name	Type	Default	Description
mode	left | alternate| left	left	By sending alternate the timeline will distribute the nodes to the left and right.
reverse	boolean	false	Whether reverse nodes or not.
pending	string | boolean	false	Set the last ghost node's existence or its content.
items	KTimelineItem[]	[]	Each node of timeline
cls	string	''	Additional class for component
attrs	any	{}	Additional attributes

export interface KTimelineItem<L = string, C = string> {
	/**
	 * Set the circle's color
	 */
	color?: string;
	/**
	 * Customize node position
	 */
	position?: 'left' | 'right';
	/**
	 * Set the label
	 */
	label?: L;
	/**
	 * Set the content
	 */
	children: C;
	/**
	 * Uniquely identifies
	 */
	uid: string | number;
}

Timeline Slots

Name	Description
dot	content of the dot.
pendingDot	content of the pending dot. it will only work if pending is true
children	content of the content.
pending	content of the pending.
label	content of the label.