Timeline 타임라인

시간 순서대로 항목의 흐름을 보여줍니다. alternate 모드에서는 좌우가 번갈아 배치되고, 항목은 타입과 빈 노드를 지원합니다.

타임라인

<template>
  <div class="demo-col">
    <p class="demo-note">mode="left"(기본값)</p>
    <LhTimeline>
      <LhTimelineItem timestamp="2026-09-01" type="primary">「송화전집」 디지털화 시작</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-10" type="success">고화질 120점 수집 완료</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-20" type="warning" hollow>색교정 재검토에서 편차 3건 발견</LhTimelineItem>
      <LhTimelineItem timestamp="2026-10-01" type="danger">재검토 완료, 재발행</LhTimelineItem>
    </LhTimeline>
    <p class="demo-note">mode="alternate"(좌우 번갈아)</p>
    <LhTimeline mode="alternate">
      <LhTimelineItem timestamp="북송" type="primary">범관의 계산행려도</LhTimelineItem>
      <LhTimelineItem timestamp="북송" hollow>곽희의 조춘도</LhTimelineItem>
      <LhTimelineItem timestamp="원대" type="success">황공망의 부춘산거도</LhTimelineItem>
    </LhTimeline>
  </div>
</template>

Timeline Props

프로퍼티	설명	타입	기본값
mode	레이아웃 모드 (alternate 는 좌우 번갈아)	'left' \| 'alternate'	'left'
sx	sx 레이아웃 단축 프로퍼티	—	—

TimelineItem Props

프로퍼티	설명	타입	기본값
timestamp	타임스탬프	string	—
type	노드 타입	'primary' \| 'success' \| 'warning' \| 'danger'	—
hollow	빈 노드	boolean	false
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

TimelineItem 기본 슬롯: 항목 내용.