Timeline 타임라인

원문 보기 위키 갱신 2026.10.11

시간의 흐름과 각 시점의 상태를 보여주는 타임라인 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자에게 시간 진행 상황과 각 시점별 이벤트 상태를 보여줘야 할 때 사용해요.

기본 사용법

direction 속성으로 타임라인의 배치 방향을 설정하고, 기본값은 vertical이에요. :::demo

<template>
  <div>
    <d-radio-group direction="row" v-model="choose">
      <d-radio v-for="item in list" :key="item" :value="item">
        {{ item }}
      </d-radio>
    </d-radio-group>
    <d-timeline :direction="choose" center>
      <d-timeline-item center v-for="(item, index) in timeAxisList" :key="index" :time="item.time" :dot-color="item.dotColor">
        {{ item.text }}
      </d-timeline-item>
    </d-timeline>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const list = ref(['vertical', 'horizontal']);
    const choose = ref('vertical');
    const timeAxisList = ref([
      {
        text: 'Download',
        time: '2021-10-1',
      },
      {
        text: 'Check',
        time: '2021-10-2',
        dotColor: 'var(--devui-success)',
      },
      {
        text: 'Build',
        time: '2021-10-3',
        dotColor: 'var(--devui-danger)',
      },
      {
        text: 'Depoy',
        time: '2021-10-4',
        dotColor: 'var(--devui-warning)',
      },
      {
        text: 'End',
        time: '2021-10-5',
        dotColor: 'var(--devui-waiting)',
      },
    ]);
    return { timeAxisList, list, choose };
  },
});
</script>

:::

커스텀 스타일

:::demo

<template>
  <d-timeline direction="horizontal" center>
    <d-timeline-item
      v-for="(item, index) in timeAxisList"
      :key="index"
      :dot-color="item.dotColor"
      :line-style="item.lineStyle"
      :line-color="item.lineColor"
    >
      <template #time>
        <div>{{ item.time }}</div>
      </template>
      <template #dot v-if="item.dot">
        <d-icon :name="item.dot"></d-icon>
      </template>
      {{ item.text }}
    </d-timeline-item>
  </d-timeline>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const timeAxisList = ref([
      {
        text: 'Start',
        time: '2021-10-1',
        lineStyle: 'solid',
        dot: 'cancel-forbidden',
      },
      {
        text: 'Check',
        time: '2021-10-2',
        dotColor: 'var(--devui-success)',
        lineStyle: 'dashed',
        lineColor: 'var(--devui-success)',
        dot: 'classroom-approve',
      },
      {
        text: 'Debug',
        time: '2021-10-3',
        dotColor: 'var(--devui-info)',
        lineStyle: 'dotted',
        lineColor: 'var(--devui-info)',
        dot: 'add-bug',
      },
      {
        text: 'Build',
        time: '2021-10-4',
        dotColor: 'var(--devui-warning)',
        lineStyle: 'none',
        lineColor: 'var(--devui-warning)',
        dot: 'build-with-tool',
      },
      {
        text: 'Display',
        time: '2021-10-5',
        dotColor: 'var(--devui-danger)',
        dot: 'go-chart',
      },
    ]);
    return { timeAxisList };
  },
});
</script>

:::

커스텀 콘텐츠

mode를 alternative로 설정하면 콘텐츠를 번갈아 보여줄 수 있어요. :::demo

<template>
  <d-timeline direction="horizontal" mode="alternative">
    <d-timeline-item v-for="(item, index) in timeAxisList" :key="index" :dot-color="item.dotColor" line-style="dashed">
      <template #default="data">
        <div style="position: relative">
          <div
            v-if="data.position === 'bottom'"
            style="margin-bottom: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
          ></div>
          <div
            :style="{
              'border-left': '4px solid',
              'box-shadow': '0 2px 4px 0 rgba(0, 0, 0, 0.1)',
              padding: '12px 8px',
              borderColor: item.dotColor,
              backgroundColor: item.backgroundColor,
            }"
          >
            <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ item.title }}</div>
            <div style="padding-bottom: 8px">发布日期：{{ item.date }}</div>
            <div style="padding-bottom: 8px">
              版本状态：
              <d-tag :color="item.dotColor">{{ item.status }}</d-tag>
            </div>
          </div>
          <div
            v-if="data.position === 'top'"
            style="margin-top: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
          ></div>
        </div>
      </template>
      <template #extra v-if="index === 0">
        <div style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white">
          <span style="line-height: 32px">2020</span>
        </div>
      </template>
    </d-timeline-item>
  </d-timeline>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const timeAxisList = ref([
      {
        text: 'hello',
        dotColor: 'var(--devui-success)',
        extraElement: {},
        title: '第四季度交付版本1.0',
        date: '2019/11/01',
        status: '已发布',
      },
      {
        text: 'world',
        dotColor: 'var(--devui-danger)',
        title: '第一季度交付版本2.0',
        date: '2020/03/01',
        backgroundColor: 'rgba(255, 230, 230, 0.2)',
        status: '未开始',
      },
      {
        text: 'nihao',
        dotColor: 'var(--devui-warning)',
        title: '第二季度交付版本1.0',
        date: '2020/05/01',
        status: '进行中',
      },
      {
        text: 'DevUI',
        dotColor: 'var(--devui-danger)',
        title: '第三季度交付版本1.0',
        date: '2020/09/01',
        status: '未开始',
      },
      {
        text: 'Awesome',
        dotColor: 'var(--devui-success)',
        title: '第三季度交付版本1.0',
        date: '2020/11/01',
        status: '已发布',
      },
    ]);
    return { timeAxisList };
  },
});
</script>

:::

콘텐츠 위치 커스텀

:::demo

<template>
  <h5><p>当 direction 为 horizontal 时 position 默认 bottom</p></h5>
  <d-timeline direction="horizontal" center>
    <d-timeline-item position="top" dot-color="chocolate">Download</d-timeline-item>
    <d-timeline-item dot-color="var(--devui-success)">Check</d-timeline-item>
    <d-timeline-item position="top" dot-color="var(--devui-danger)">Build</d-timeline-item>
    <d-timeline-item dot-color="var(--devui-warning)">Depoy</d-timeline-item>
    <d-timeline-item position="top" dot-color="var(--devui-waiting)">End</d-timeline-item>
  </d-timeline>
  <h5><p>当 direction 为 vertical 时 position 默认 right</p></h5>
  <d-timeline direction="vertical">
    <d-timeline-item position="left" dot-color="chocolate">Download</d-timeline-item>
    <d-timeline-item position="right" dot-color="var(--devui-success)">Check</d-timeline-item>
    <d-timeline-item position="left" dot-color="var(--devui-danger)">Build</d-timeline-item>
    <d-timeline-item position="right" dot-color="var(--devui-warning)">Depoy</d-timeline-item>
    <d-timeline-item position="left" dot-color="var(--devui-waiting)">End</d-timeline-item>
  </d-timeline>
</template>

:::

시간 위치 설정

:::demo

<template>
  <d-timeline time-position="bottom">
    <d-timeline-item time="2019" time-position="left">Download</d-timeline-item>
    <d-timeline-item time="11-2" type="success">Check</d-timeline-item>
    <d-timeline-item time="2020" type="warning" time-position="left">Build</d-timeline-item>
    <d-timeline-item time="11-4" type="error">Depoy</d-timeline-item>
    <d-timeline-item time="2021" type="primary" time-position="left">End</d-timeline-item>
  </d-timeline>
</template>

:::

Timeline 파라미터

파라미터	타입	기본값	설명	Demo 링크
direction	TimelineDirection	`vertical`	타임라인 방향 설정	기본 사용법
center	`boolean`	`false`	방향이 `horizontal`일 때 콘텐츠 가운데 정렬 여부	기본 사용법
mode	Mode	`normal`	선택, `normal` 모드에서는 콘텐츠가 기본 방향으로 배치, `alternative` 모드에서는 콘텐츠가 교대로 배치	커스텀 콘텐츠
time-position	TimePosition	`left`	선택, `direction`이 `vertical`일 때만 시간 파라미터 위치 정의 (전역 설정. `mode` 속성과 충돌하면 `mode` 우선)	커스텀 콘텐츠

TimelineItem 파라미터

파라미터	타입	기본값	설명	Demo 링크
time	`string`	--	선택, 시간	기본 사용법
text	`string`	--	선택, 텍스트 콘텐츠	기본 사용법
dot-color	`string`	--	선택, 시간 원 색상 커스텀	기본 사용법
line-style	LineStyle	`solid`	선택, 선 스타일 설정(미설정 시 기본적으로 타임라인 마지막 요소는 `none`)	커스텀 스타일
line-color	`string`	--	선택, 선 색상 설정	커스텀 스타일
position	Position	`direction`이 `vertical`이면 기본 `right`, `horizontal`이면 기본 `bottom`	선택, 콘텐츠 위치 설정. time이 있으면 time은 반대 위치	콘텐츠 위치 커스텀
time-position	TimePosition	`left`	선택, `direction`이 `vertical`일 때만 시간 파라미터 위치 정의(전역 설정. `position` 속성과 충돌하면 `position` 우선)	시간 위치 설정
type	Type	`primary`	선택, 시점 타입	커스텀 콘텐츠

TimelineItem 슬롯

파라미터	설명	Demo 링크
default	콘텐츠 커스텀	커스텀 콘텐츠
dot	타임라인 점 커스텀	커스텀 스타일
time	시간 커스텀	커스텀 스타일
extra	두 시점 사이 추가 요소 커스텀	커스텀 콘텐츠

Timeline 타입 정의

TimelineDirection

type TimelineDirection = 'vertical' | 'horizontal';

Mode

type Mode = 'normal' | 'alternative';

TimePosition

type TimePosition = 'left' | 'bottom';

LineStyle

type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none';

Type

type Type = 'primary' | 'success' | 'warning' | 'error';

Position

type Position = 'top' | 'bottom' | 'left' | 'right';

더 알아보기 (Learn more)

direction으로 세로·가로 방향을 정하고, line-style/dot-color로 점과 선을 꾸밀 수 있어요. alternative 모드와 슬롯(default·dot·time·extra)을 조합하면 릴리스 히스토리 같은 화면도 자유롭게 만들 수 있어요.