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.

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

Color

Set the color of circles.

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

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.

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Recording...

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

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• ❌
  pending...🏀 ikun ui

Right alternate

Right alternate timeline.

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

Alternate

Alternate timeline.

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

Label

Use label show time alone.

Left

Alternate

Right

• Create a services site
  2015-09-01
• Solve initial network problems
  2015-09-01 09:12:11
• Technical testing
• Network problems being solved
  2015-09-01 09:12:11

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

• ⭕
  🍒 Create a services site
  🔥 2015-09-01
• ⭕
  🍒 Solve initial network problems
  🔥 2015-09-01 09:12:11
• ⭕
  🍒 Technical testing
• ⭕
  🍒 Network problems being solved
  🔥 2015-09-01 09:12:11

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.