Introduction

The Timeline component is used to display time-based information in a vertical flow. It is commonly used to display operation records, process progress, and similar scenarios.

Usage

Local import. Configure it in the index.json of the page or component where it is needed.

"usingComponents": {
  "fs-timeline": "ava-ui/fxui/fs-timeline/index"
}

Code Demo

Basic Usage

API

Properties

Parameter	Description	Type	Optional Values	Default
type	Timeline type	String	business/approval/simple	business
items	Timeline data	Array	-	[]
timePosition	Time display position	String	top/title	top
showTime	Whether to display the time	Boolean	-	true
showTitle	Whether to display the title	Boolean	-	true
showDescription	Whether to display the description	Boolean	-	true
showContent	Whether to display the content area	Boolean	-	true
lineColor	Timeline color	String	-	#E0E0E0
dotColor	Node color	String	-	#52C41A
extStyle	External style	String	-	''

Items Data Structure

Parameter	Description	Type	Default
time	Time text	String	-
title	Title	String	-
description	Description	String	-
actions	Action button array	Array<{ text: string, type?: string }>	-
content	Content area text	String	-
dotStatus	Node status (normal/processing/success/reject)	String	-

actions Array Description

• text: Button text, required
• type: Button type, optional values are primary (primary button), danger (danger), default (secondary button/default)

Events

Name	Parameter	Description
actiontap		Action button click event. actionIndex is the button index, and action is the button object
itemtap		Timeline item click event

打开预览