Tu-view

# Timeline 时间线

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

# 基础用法

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。

倒序 正序 活动按期开始 通过审核 创建成功 
<div class="timeline-block">
	<tu-radio-group
		class="action"
		v-model="reverse"
	>
		<tu-radio :label="true">倒序</tu-radio>
		<tu-radio :label="false">正序</tu-radio>
	</tu-radio-group>

	<tu-timeline :reverse="reverse">
		<tu-timeline-item
			v-for="(activity, index) in activities"
			:key="index"
			:timestamp="activity.timestamp"
		>
			{{activity.content}}
		</tu-timeline-item>
	</tu-timeline>
</div>

<script>
	export default {
		data() {
			return {
				reverse: true,
				activities: [
					{
						content: "活动按期开始",
						timestamp: "2022-04-15",
					},
					{
						content: "通过审核",
						timestamp: "2022-04-13",
					},
					{
						content: "创建成功",
						timestamp: "2022-04-11",
					},
				],
			};
		},
	};
</script>
<style>
	.timeline-block .action {
		margin: 0 0 15px 12px;
	}
</style>
Expand Copy

# ⾃定义节点样式

可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。

支持使用图标 支持自定义颜色 支持自定义尺寸 默认样式的节点 
<div class="timeline-block">
	<tu-timeline>
		<tu-timeline-item
			v-for="(activity, index) in activities"
			:key="index"
			:icon="activity.icon"
			:type="activity.type"
			:color="activity.color"
			:size="activity.size"
			:timestamp="activity.timestamp"
		>
			{{activity.content}}
		</tu-timeline-item>
	</tu-timeline>
</div>

<script>
	export default {
		data() {
			return {
				activities: [
					{
						content: "支持使用图标",
						timestamp: "2022-04-12 20:46",
						size: "large",
						type: "primary",
						icon: "bell",
					},
					{
						content: "支持自定义颜色",
						timestamp: "2022-04-03 20:46",
						color: "#0bbd87",
					},
					{
						content: "支持自定义尺寸",
						timestamp: "2022-04-03 20:46",
						size: "large",
					},
					{
						content: "默认样式的节点",
						timestamp: "2022-04-03 20:46",
					},
				],
			};
		},
	};
</script>
Expand Copy

# ⾃定义时间戳

当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。

更新 Github 模板

唐小虎 提交于 2022/4/12 20:46

更新 Github 模板

唐小虎 提交于 2022/4/3 20:46

更新 Github 模板

唐小虎 提交于 2022/4/2 20:46

<div class="block">
	<tu-timeline>
		<tu-timeline-item
			timestamp="2022/4/12"
			placement="top"
		>
			<tu-card>
				<h4>更新 Github 模板</h4>
				<p>唐小虎 提交于 2022/4/12 20:46</p>
			</tu-card>
		</tu-timeline-item>
		<tu-timeline-item
			timestamp="2022/4/3"
			placement="top"
		>
			<tu-card>
				<h4>更新 Github 模板</h4>
				<p>唐小虎 提交于 2022/4/3 20:46</p>
			</tu-card>
		</tu-timeline-item>
		<tu-timeline-item
			timestamp="2022/4/2"
			placement="top"
		>
			<tu-card>
				<h4>更新 Github 模板</h4>
				<p>唐小虎 提交于 2022/4/2 20:46</p>
			</tu-card>
		</tu-timeline-item>
	</tu-timeline>
</div>
Expand Copy

# Timeline Attributes

参数 说明 类型 可选值 默认值
reverse 指定节点排序方向，默认为正序 boolean — false

# Timeline-item Attributes

参数 说明 类型 可选值 默认值
timestamp 时间戳 string - —
hide-timestamp 是否隐藏时间戳 boolean — false
placement 时间戳位置 string top / bottom bottom
type 节点类型 string primary / success / warning / danger / info -
color 节点颜色 string hsl / hsv / hex / rgb -
size 节点尺寸 string normal / large normal
icon 节点图标 string — -

# Timeline-Item Slot

name 说明
— Timeline-Item 的内容
dot 自定义节点

← Divider 分割线 →