Easy UI

Appearance

Timeline 时间线 ​

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

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-timeline.js";
</script>
js
import "easy-component-ui/ea-timeline";

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基础用法 ​

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

Open the refrigerator Put the elephant inside Close the refrigerator
查看代码
html
<ea-timeline>
  <ea-timeline-item timestamp="2024-7-1">
    Open the refrigerator
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024-7-2">
    Put the elephant inside
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024-7-3">
    Close the refrigerator
  </ea-timeline-item>
</ea-timeline>

⾃定义节点样式 ​

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

Custom icon Custom color Custom size Custom hollow Default node
查看代码
html
<ea-timeline>
  <ea-timeline-item
    variant="primary"
    size="large"
    timestamp="2024-7-1"
    icon="mug-hot"
  >
    Custom icon
  </ea-timeline-item>
  <ea-timeline-item variant="primary" color="#0bbd87" timestamp="2024-7-2">
    Custom color
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024-7-3"> Custom size </ea-timeline-item>
  <ea-timeline-item variant="primary" timestamp="2024-7-4" hollow>
    Custom hollow
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024-7-5"> Default node </ea-timeline-item>
</ea-timeline>

⾃定义时间戳 ​

当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。设置 placement 属性为 top 即可。

打开冰箱

Open the refrigerator

2025-10-21
把大象放进去

Put the elephant inside

2025-10-22
关上冰箱

Close the refrigerator

2025-10-23
由于违反动物保护法，该组件库将被无限期停更

Due to violation of the Animal Protection Law, this component library will be suspended indefinitely

2025-10-24
该组件库已无法访问

This component library is no longer accessible

2025-10-24
查看代码
html
<ea-timeline>
  <ea-timeline-item variant="success" placement="top">
    <ea-card>
      <header class="header">打开冰箱</header>
      <p>Open the refrigerator</p>
    </ea-card>
    <div slot="timestamp">2025-10-21</div>
  </ea-timeline-item>
  <ea-timeline-item variant="primary" placement="top">
    <ea-card>
      <header class="header">把大象放进去</header>
      <p>Put the elephant inside</p>
    </ea-card>
    <div slot="timestamp">2025-10-22</div>
  </ea-timeline-item>
  <ea-timeline-item variant="warning" placement="top">
    <ea-card>
      <header class="header">关上冰箱</header>
      <p>Close the refrigerator</p>
    </ea-card>
    <div slot="timestamp">2025-10-23</div>
  </ea-timeline-item>
  <ea-timeline-item variant="danger" placement="top">
    <ea-card>
      <header class="header">由于违反动物保护法，该组件库将被无限期停更</header>
      <p>
        Due to violation of the Animal Protection Law, this component library
        will be suspended indefinitely
      </p>
    </ea-card>
    <div slot="timestamp">2025-10-24</div>
  </ea-timeline-item>
  <ea-timeline-item color="black" placement="top">
    <ea-card>
      <header class="header">该组件库已无法访问</header>
      <p>This component library is no longer accessible</p>
    </ea-card>
    <div slot="timestamp">2025-10-24</div>
  </ea-timeline-item>
</ea-timeline>
css
.header {
  font-weight: 800;
  font-size: 18px;
}

垂直居中 ​

当内容在垂直⽅向上过⾼时，可通过设置 center 属性使节点垂直居中对齐。

Update Github template

LuminaQAQ committed on 2024/6/1 04:38

Update Github template

LuminaQAQ committed on 2024/5/21 04:38

Update Github template

Update Github template

查看代码
html
<ea-timeline style="max-width: 600px">
  <ea-timeline-item center timestamp="2024/6/1" placement="top">
    <ea-card>
      <h4>Update Github template</h4>
      <p>LuminaQAQ committed on 2024/6/1 04:38</p>
    </ea-card>
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024/5/21" placement="top">
    <ea-card>
      <h4>Update Github template</h4>
      <p>LuminaQAQ committed on 2024/5/21 04:38</p>
    </ea-card>
  </ea-timeline-item>
  <ea-timeline-item center timestamp="2024/5/20" placement="top">
    <p>Update Github template</p>
  </ea-timeline-item>
  <ea-timeline-item timestamp="2024/5/20" placement="top">
    <p>Update Github template</p>
  </ea-timeline-item>
</ea-timeline>

隐藏时间戳 ​

设置 hide-timestamp 属性可以隐藏时间戳显示。

隐藏时间戳 显示时间戳 隐藏时间戳
查看代码
html
<ea-timeline>
  <ea-timeline-item variant="primary" timestamp="2024-7-1" hide-timestamp>
    隐藏时间戳
  </ea-timeline-item>
  <ea-timeline-item variant="success" timestamp="2024-7-2">
    显示时间戳
  </ea-timeline-item>
  <ea-timeline-item variant="warning" timestamp="2024-7-3" hide-timestamp>
    隐藏时间戳
  </ea-timeline-item>
</ea-timeline>

节点变体 ​

通过 variant 属性设置节点类型，支持 primary、success、warning、danger、info 五种类型。

Primary Success Warning Danger Info
查看代码
html
<ea-timeline>
  <ea-timeline-item variant="primary" timestamp="2024-7-1">
    Primary
  </ea-timeline-item>
  <ea-timeline-item variant="success" timestamp="2024-7-2">
    Success
  </ea-timeline-item>
  <ea-timeline-item variant="warning" timestamp="2024-7-3">
    Warning
  </ea-timeline-item>
  <ea-timeline-item variant="danger" timestamp="2024-7-4">
    Danger
  </ea-timeline-item>
  <ea-timeline-item variant="info" timestamp="2024-7-5">
    Info
  </ea-timeline-item>
</ea-timeline>

Timeline API ​

Timeline CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器

Timeline Slots ​

名称说明
default默认插槽，放置 ea-timeline-item 子节点

TimelineItem API ​

TimelineItem Attributes ​

属性名说明类型可选值默认值
variant节点类型，用于控制颜色或样式stringprimary | success | warning | danger | info—
timestamp时间戳，可作为 slot 覆盖string——
hide-timestamp是否隐藏时间戳boolean—false
placement时间戳位置，可选将时间放置到内容上方stringtop | bottom—
size节点大小stringnormal | large—
color自定义颜色（支持任意 CSS 颜色值）string——
hollow是否为空心节点（只显示描边）boolean—false
icon节点图标名称（如果需要图标）string——
center是否垂直居中对齐内容boolean—false

TimelineItem CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
left-wrapper左侧容器
dot默认的节点容器
icon-dot节点图标
tail时间线线条
right-wrapper右侧容器
content单个时间线的内容
timestamp时间戳

TimelineItem CSS Custom Properties ​

属性名说明默认值
--ea-timeline-item-dot-color节点颜色var(--grey-300)
--ea-timeline-item-tail-color时间线线条颜色var(--grey-300)
--ea-timeline-item-content-color内容颜色var(--grey-900)
--ea-timeline-item-timestamp-color时间戳颜色var(--grey-500)

TimelineItem Slots ​

名称说明
default默认插槽，放置时间线项的主内容
dot自定义节点内容（覆盖 icon 属性）
timestamp自定义时间戳内容（覆盖 timestamp 属性）