Timeline

Timeline (타임라인)

일련의 이벤트를 시간 순서대로 표시하는 컴포넌트예요. 프로세스 단계나 이력 같은 것을 순서대로 보여줄 때 유용해요.

출처: 문서

본문

Timeline은 일련의 이벤트를 시간 순서대로 표시하는 컴포넌트예요. <ExampleTabs name="timeline-basic" />

사용법 (Usage)

import { Timeline } from "@chakra-ui/react"

<Timeline.Root>
  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Separator />
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title />
      <Timeline.Description />
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>

예시 (Examples)

크기 (Sizes)

size prop으로 타임라인의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop으로 타임라인의 변형을 바꿀 수 있어요.

콘텐츠 앞 배치 (Content Before)

타임라인 인디케이터 앞에 콘텐츠가 오는 타임라인 예시예요.

교차 콘텐츠 (Alternating Content)

교차하는 콘텐츠가 있는 타임라인 예시예요.

구성 (Composition)

다른 컴포넌트와 타임라인을 조합해 일관된 모양의 타임라인을 만드는 예시예요.

Props

Timeline 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.