Timeline

Visualize time-stream information.

Basic usage

You can change the order in which the content is arranged by setting the value of the 'reverse' attribute to the 'timeline' component, true is the reverse order, false is the positive order, and the default is false.

kunlun-design-first
2023/02/20
kunlun-design-second
2023/02/21

<template>
    <kl-button @click="changeReverse" type="primary" class="button">correct</kl-button>
    <kl-button @click="changeReverse2" type="primary" class="button">reverse</kl-button>
    <div class="main">
        <kl-timeline :reverse="reverse">
            <kl-timeline-item timestamp="2023/02/20">kunlun-design-first</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21">kunlun-design-second</kl-timeline-item>
        </kl-timeline>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let reverse = ref<boolean>(false)
const changeReverse = () => {
    reverse.value = true
}
const changeReverse2 = () => {
    reverse.value = false
}
</script>
<style></style>

Customize node styles

You can customize the node color, size, solid/hollow or directly use the icon according to the actual scene.

solid node
2023/02/20
Custom node dimensions
2023/02/21
Custom node colors
2023/02/22
Custom node icons
2023/02/23

<template>
    <div class="main">
        <kl-timeline>
            <kl-timeline-item timestamp="2023/02/20" :dotsolid="true">solid node</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21" dotsize="large"
                >Custom node dimensions</kl-timeline-item
            >
            <kl-timeline-item timestamp="2023/02/22" dotcolor="pink"
                >Custom node colors</kl-timeline-item
            >
            <kl-timeline-item timestamp="2023/02/23">
                <template #default>Custom node icons</template>
                <template #dot>
                    <KlMediaDiscFill />
                </template>
            </kl-timeline-item>
        </kl-timeline>
    </div>
</template>
<script setup lang="ts"></script>
<style></style>

Custom node type

Circle color type,successGreen indicates completed, success status,dangerRed indicates an alarm or error status,primaryBlue indicates the In Progress state,warningYellow indicates warning status,infoGray indicates the failure state,defaultRepresents the default state.

primary
2023/02/20
success
2023/02/21
warning
2023/02/22
danger
2023/02/23
info
2023/02/24
default
2023/02/25

<template>
    <div class="main">
        <kl-timeline>
            <kl-timeline-item timestamp="2023/02/20" dottype="primary">primary</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21" dottype="success">success</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/22" dottype="warning">warning</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/23" dottype="danger">danger</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/24" dottype="info">info</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/25" dottype="default">default</kl-timeline-item>
        </kl-timeline>
    </div>
</template>
<script setup lang="ts"></script>
<style></style>

Timestamp vs. timestamp location

Use the timestamp attribute value on the timeline-item component to display the timestamp on the page, if you don't want to display the timestamp, don't add the timestamp attribute value.

Use the timeplace attribute value on the timeline-item component to adjust the timestamp to appear above or below the content.

Display timestamps
2023/02/20
The timestamp is not displayed
2023/02/20
timestamp top

<template>
    <div class="main">
        <kl-timeline>
            <kl-timeline-item timestamp="2023/02/20">Display timestamps</kl-timeline-item>
            <kl-timeline-item>The timestamp is not displayed</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/20" timeplace="top">
                timestamp top</kl-timeline-item
            >
        </kl-timeline>
    </div>
</template>
<script setup lang="ts"></script>
<style></style>

Timeline position

Realize that the timeline is on the right, the content is on the left, and the timeline is in the middle, and the content is displayed alternately.

Use the mode property on the timelinecomponent, the value is right ,and the timeline is on the right, center is the timeline in the middle, and the default is left.

kunlun-design
2023/02/20
kunlun-design
2023/02/21

kunlun-design
2023/02/20
kunlun-design
2023/02/21

<template>
    <div class="main">
        <kl-timeline mode="right">
            <kl-timeline-item timestamp="2023/02/20">kunlun-design</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21">kunlun-design</kl-timeline-item>
        </kl-timeline>
        <kl-timeline mode="center">
            <kl-timeline-item timestamp="2023/02/20">kunlun-design</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21">kunlun-design</kl-timeline-item>
        </kl-timeline>
    </div>
</template>
<script setup lang="ts"></script>
<style></style>

The content is a dialog box

Realize the presentation of content in the form of a dialog box, which is more beautiful.

Use the typeattribute on the timeline component, and the value is set to message to realize the dialog box display, and the default value is default.

kunlun-design
2023/02/20
kunlun-design
2023/02/21

<template>
    <div class="main">
        <kl-timeline type="message" mode="center">
            <kl-timeline-item timestamp="2023/02/20">kunlun-design</kl-timeline-item>
            <kl-timeline-item timestamp="2023/02/21">kunlun-design</kl-timeline-item>
        </kl-timeline>
    </div>
</template>
<script setup lang="ts"></script>
<style></style>

Timeline API

Timeline Attribute

attribute	description	type	default value
mode	Change the relative position of the timeline and content	`string`（left\|center\|right ）	left
type	Change the style type of the content box	`string`(message\|default)	default
reverse	Change the order of content	`boolean`	false

Timeline Slots

slot name	description	Sublabels
default	Customize content	TimelineItem

TimelineItem API

TimelineItem Attribute

attribute	description	type	default
dotcolor	Node color	`string`	—
dotsolid	Whether the node is solid	`boolean`	false
dotsize	Node size	`string`	normal
dottype	Node type	`primary/success/warning/danger/info/default`	default
timestamp	timestamp	`string`	0000/00/00
timeplace	The timestamp relative to the content location	`string`	bottom

TimelineItem Slots

slot name	description
default	Customize content
dot	Customize node

Timeline #

Basic usage #

Customize node styles #

Custom node type #

Timestamp vs. timestamp location #

Timeline position #

The content is a dialog box #

Timeline API #

Timeline Attribute #

Timeline Slots #

TimelineItem API #

TimelineItem Attribute #

TimelineItem Slots #