Timeline 타임라인

세로 이벤트 흐름입니다. 시맨틱 <ol> 목록이며, 시간 순서가 문서 순서와 같습니다.

기본 사용법

기본 사용법

1. 2026-09-01

   프로젝트 심사
2. 2026-09-15

   1차 납품
3. 2026-09-25

   인수인계 진행 중

<script setup lang="ts">
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">프로젝트 심사</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">1차 납품</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">인수인계 진행 중</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">프로젝트 심사</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">1차 납품</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">인수인계 진행 중</LhTimelineItem>
  </LhTimeline>
</template>

좌우 교대

alternate

1. Q1

   계획
2. Q2

   개발
3. Q3

   부하 테스트

hollow는 노드를 빈 원점으로 표시하며, 완료되지 않은 상태에 자주 사용합니다.

빈 노드

1. Q1

   시작 전
2. Q2

   진행 중
3. Q3

   완료

<script setup lang="ts">
</script>

<template>
  <!-- 좌우 교대 -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">계획</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">개발</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">부하 테스트</LhTimelineItem>
  </LhTimeline>
  <!-- 빈 노드 -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>시작 전</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">진행 중</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">완료</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- 좌우 교대 -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">계획</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">개발</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">부하 테스트</LhTimelineItem>
  </LhTimeline>
  <!-- 빈 노드 -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>시작 전</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">진행 중</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">완료</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

속성명	설명	타입	기본값
mode	레이아웃 모드	"left" | "alternate"	'left'
sx	sx 빠른 레이아웃 속성	LhSxProps	—

LhTimelineItem Props

속성명	설명	타입	기본값
timestamp	타임스탬프	string	—
type	노드 시맨틱 타입	'primary' | 'success' | 'warning' | 'danger'	—
hollow	빈 노드	boolean	false
sx	sx 빠른 레이아웃 속성	LhSxProps	—

슬롯: default 내용, timestamp 타임스탬프, dot 사용자 정의 원점.

접근성

• 시맨틱 <ol> 목록으로 시간 순서가 문서 순서와 같으며, 스크린 리더가 순서대로 음성으로 안내합니다
• 노드 원점은 순수 장식(aria-hidden="true")이며, 사용자 정의 원점 슬롯도 접근성 트리에 포함되지 않습니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/timeline/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출되었습니다. 각 항목을 클릭하여 펼쳐 보세요. 속성 설명은 위쪽 Props 표를 참고하세요):

LhTimelineItemProps

/** 항목 props (Item 컴포넌트) */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhTimelineProps

/** 타임라인 props */
export interface LhTimelineProps {
  /** 레이아웃 모드 (alternate는 좌우 교대) */
  mode?: LhTimelineMode
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhTimelineMode _{(@lh-ui/share/core/timeline에서 제공)}

/** 타임라인 레이아웃 모드 */
export type LhTimelineMode = 'left' | 'alternate'