FxTimeline 时间线

可视化地呈现时间流信息。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

轴线与默认节点为 --color-border-light（灰），仅当传 type 时节点变为语义色。

基础用法

Timeline 可拆分为多个活动节点，时间戳是其区别于其他组件的重要特性。

<template>
  <FxTimeline>
    <FxTimelineItem
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </FxTimelineItem>
  </FxTimeline>
</template>

<script lang="ts" setup>
const activities = [
  { content: "活动开始", timestamp: "2018-04-15" },
  { content: "已审批", timestamp: "2018-04-13" },
  { content: "成功", timestamp: "2018-04-11" },
]
</script>

模式 mode

使用 mode 控制时间线与内容的相对位置。

<template>
  <FxRadioGroup
    v-model="mode"
    type="button"
    :options="modes"
    class="mode-group"
  />

  <FxTimeline :mode="mode" class="mt-4">
    <FxTimelineItem
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </FxTimelineItem>
  </FxTimeline>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const activities = [
  { content: "活动开始", timestamp: "2018-04-15" },
  { content: "已审批", timestamp: "2018-04-13" },
  { content: "成功", timestamp: "2018-04-11" },
]

const modes = [
  { label: "开始", value: "start" },
  { label: "交替", value: "alternate" },
  { label: "交替反转", value: "alternate-reverse" },
  { label: "结束", value: "end" },
]

const mode = ref<"start" | "alternate" | "alternate-reverse" | "end">("start")
</script>

<style scoped>
.mode-group {
  margin-bottom: 16px;
}
.mt-4 {
  margin-top: 16px;
}
</style>

自定义节点

节点的尺寸、颜色、图标均可自定义。

<template>
  <FxTimeline>
    <FxTimelineItem
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :hollow="activity.hollow"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </FxTimelineItem>
  </FxTimeline>
</template>

<script lang="ts" setup>
const activities = [
  {
    content: "自定义图标",
    timestamp: "2018-04-12 20:46",
    size: "large",
    type: "primary",
    icon: "ep:more-filled",
  },
  {
    content: "自定义颜色",
    timestamp: "2018-04-03 20:46",
    color: "#0bbd87",
  },
  {
    content: "自定义尺寸",
    timestamp: "2018-04-03 20:46",
    size: "large",
  },
  {
    content: "自定义空心",
    timestamp: "2018-04-03 20:46",
    type: "primary",
    hollow: true,
  },
  {
    content: "默认节点",
    timestamp: "2018-04-03 20:46",
  },
]
</script>

自定义时间戳

内容较高时，可将时间戳置于内容上方（placement="top"）。

<template>
  <FxTimeline>
    <FxTimelineItem timestamp="2018/4/12" placement="top">
      <div class="card">
        <h4>更新 Github 模板</h4>
        <p>Tom 提交于 2018/4/12 20:46</p>
      </div>
    </FxTimelineItem>
    <FxTimelineItem timestamp="2018/4/3" placement="top">
      <div class="card">
        <h4>更新 Github 模板</h4>
        <p>Tom 提交于 2018/4/3 20:46</p>
      </div>
    </FxTimelineItem>
    <FxTimelineItem timestamp="2018/4/2" placement="top">
      <div class="card">
        <h4>更新 Github 模板</h4>
        <p>Tom 提交于 2018/4/2 20:46</p>
      </div>
    </FxTimelineItem>
  </FxTimeline>
</template>

<style scoped>
.card {
  padding: 12px 16px;
  border: 1px solid var(--fx-border-color-light);
  border-radius: var(--fx-border-radius-base);
  background-color: var(--fx-bg-color);
}
.card h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: var(--fx-font-weight-bold);
  color: var(--fx-text-color-primary);
}
.card p {
  margin: 0;
  font-size: 13px;
  color: var(--fx-text-color-secondary);
}
</style>

垂直居中

center 让节点垂直居中。

<template>
  <FxTimeline>
    <FxTimelineItem center timestamp="2018/4/12" placement="top">
      <div class="card">
        <h4>更新 Github 模板</h4>
        <p>Tom 提交于 2018/4/12 20:46</p>
      </div>
    </FxTimelineItem>
    <FxTimelineItem timestamp="2018/4/3" placement="top">
      <div class="card">
        <h4>更新 Github 模板</h4>
        <p>Tom 提交于 2018/4/3 20:46</p>
      </div>
    </FxTimelineItem>
    <FxTimelineItem center timestamp="2018/4/2" placement="top">
      活动开始
    </FxTimelineItem>
    <FxTimelineItem timestamp="2018/4/2" placement="top">
      活动结束
    </FxTimelineItem>
  </FxTimeline>
</template>

<style scoped>
.card {
  padding: 12px 16px;
  border: 1px solid var(--fx-border-color-light);
  border-radius: var(--fx-border-radius-base);
  background-color: var(--fx-bg-color);
}
.card h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: var(--fx-font-weight-bold);
  color: var(--fx-text-color-primary);
}
.card p {
  margin: 0;
  font-size: 13px;
  color: var(--fx-text-color-secondary);
}
</style>

倒序 reverse

使用 reverse 控制节点排列顺序。

<template>
  <div class="bar">
    <FxSwitch v-model="reverse" />
    <span>倒序</span>
  </div>

  <FxTimeline :reverse="reverse">
    <FxTimelineItem
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </FxTimelineItem>
  </FxTimeline>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const reverse = ref(true)
const activities = [
  { content: "活动开始", timestamp: "2018-04-15" },
  { content: "已审批", timestamp: "2018-04-13" },
  { content: "成功", timestamp: "2018-04-11" },
]
</script>

<style scoped>
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--fx-text-color-primary);
}
</style>

API

FxTimeline Attributes

属性	说明	类型	默认值
mode	时间线与内容的相对位置	'start' | 'end' | 'alternate' | 'alternate-reverse'	start
reverse	是否倒序渲染	boolean	false

FxTimeline Slots

插槽名	说明
default	FxTimelineItem 列表（必填）

FxTimelineItem Attributes

属性	说明	类型	默认值
timestamp	时间戳文本	string	''
hideTimestamp	是否隐藏时间戳	boolean	false
center	节点是否垂直居中	boolean	false
placement	时间戳相对内容的位置	'top' | 'bottom'	bottom
type	节点颜色类型（被 color 覆盖）	'primary' | 'success' | 'warning' | 'danger' | 'info' | ''	''
color	自定义节点颜色	string	''
size	节点尺寸	'normal' | 'large'	normal
icon	节点图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx）	string	—
hollow	节点是否空心	boolean	false

FxTimelineItem Slots

插槽名	说明
default	内容主体
dot	自定义节点（提供时不再渲染默认圆点节点）