Timeline

@hua-labs/ui/advanced

v1.1.0

상태 표시기, 아이콘, 다양한 정렬 옵션을 갖춘 시간순 이벤트 표시용 타임라인 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Timeline } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

Pro

기본 사용법

Project Started완료
Initial project setup and planning phase completed
2024. 1. 1. AM 12:00
Development Phase진행 중
Core features implementation in progress
2024. 1. 15. AM 12:00
Testing대기
Quality assurance and bug fixes
2024. 2. 1. AM 12:00
Launch대기
Production deployment
2024. 2. 15. AM 12:00

상태 예시

Completed Task완료
This task is done
Active Task진행 중
Working on this now
Pending Task대기
Not started yet
Error Task오류
Something went wrong
Warning경고
Needs attention
Info정보
For your information

정렬 옵션

align="left"

Step 1완료
Step 2진행 중
Step 3대기

align="alternate"

Step 1완료
Step 2진행 중
Step 3대기

Props

이름	타입	기본값	설명
`items*`	`TimelineItem[]`	-	Array of timeline items
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Timeline orientation
`align`	`"left" \| "right" \| "alternate"`	`"left"`	Item alignment
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Timeline size
`showConnector`	`boolean`	`true`	Show connector line between items
`highlightedId`	`string`	-	ID of highlighted item
`locale`	`string`	`"ko-KR"`	Locale for date formatting
`emptyState`	`React.ReactNode`	-	Custom empty state

TimelineItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	Unique identifier
`title*`	`string`	-	Item title
`description`	`string`	-	Item description
`date`	`string \| Date`	-	Item date
`icon`	`IconName \| React.ReactNode`	-	Item icon
`status`	`"pending" \| "active" \| "completed" \| "error" \| "warning" \| "info"`	`"pending"`	Item status
`meta`	`string`	-	Additional meta information
`content`	`React.ReactNode`	-	Custom content

코드 예시

docs:common.basicUsagetsx

1import { Timeline } from '@hua-labs/ui/advanced';
2 
3const items = [
4  {
5    id: "1",
6    title: "시작",
7    description: "docs:components.timeline.props.content",
8    date: "2024-01-01",
9    status: "completed",
10  },
11  {
12    id: "2",
13    title: "진행 중",
14    description: "docs:components.timeline.props.content",
15    date: "2024-01-15",
16    status: "active",
17  },
18  {
19    id: "3",
20    title: "완료 예정",
21    description: "docs:components.timeline.props.content",
22    date: "2024-02-01",
23    status: "pending",
24  },
25];
26 
27<Timeline items={items} />

docs:components.timeline.examples.withIconstsx

1import { Timeline } from '@hua-labs/ui/advanced';
2import { CheckCircle, Clock, Rocket } from "@phosphor-icons/react";
3 
4const items = [
5  {
6    id: "1",
7    title: "Launched",
8    icon: <Rocket weight="fill" />,
9    status: "completed",
10  },
11  {
12    id: "2",
13    title: "In Progress",
14    icon: <Clock weight="fill" />,
15    status: "active",
16  },
17];
18 
19<Timeline items={items} />

docs:components.timeline.examples.alternatetsx

1<Timeline
2  items={items}
3  align="alternate"
4  size="lg"
5/>

접근성

•:
•:

CodeBlock Navigation