Timeline 时间轴

可视化地呈现时间流信息。

基础用法

可通过给timeline组件设置reverse属性值来改变内容的排布顺序，true 为倒序，false 为正序，默认 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>

自定义节点样式

可根据实际场景⾃定义节点颜色、尺寸，实/空心或直接使⽤图标。

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>

自定义节点类型

圆圈颜色类型，success绿色表示已完成、成功状态，danger红色表示告警或错误状态，primary蓝色表示正在进行状态，warning黄色表示警告状态，info灰色表示失效状态，default表示默认状态。

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>

时间戳与时间戳位置

在timeline-item组件上使用timestamp属性值即可在页面上展示时间戳，若不想展示时间戳不添加timestamp属性值即可。

在timeline-item组件上使用timeplace属性值可以调整时间戳在内容上方或下方展示。

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组件上使用mode属性,值为 right 即时间轴在右边，center 即时间轴在中间，默认为 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>

内容为对话框

实现以对话框的形式展示内容，更加美观。

在timeline组件上使用type属性,值设置为 message 即可实现对话框展示，默认值为 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 属性

属性名	说明	类型	默认值
mode	改变时间轴和内容的相对位置	`string`（left\|center\|right ）	left
type	改变内容框的样式类型	`string`(message\|default)	default
reverse	改变内容的顺序	`boolean`	false

Timeline 插槽

插槽名	说明	子标签
default	自定义内容	TimelineItem

TimelineItem API

TimelineItem 属性

属性名	说明	类型	默认值
dotcolor	节点颜色	`string`	—
dotsolid	节点是否实心	`boolean`	false
dotsize	节点尺寸	`string`	normal
dottype	节点类型	`primary/success/warning/danger/info/default`	default
timestamp	时间戳	`string`	0000/00/00
timeplace	时间戳相对内容位置	`string`	bottom

TimelineItem 插槽

插槽名	说明
default	自定义内容
dot	自定义节点

Timeline 时间轴 #

基础用法 #

自定义节点样式 #

自定义节点类型 #

时间戳与时间戳位置 #

时间轴位置 #

内容为对话框 #

Timeline API #

Timeline 属性 #

Timeline 插槽 #

TimelineItem API #

TimelineItem 属性 #

TimelineItem 插槽 #