react-chrono 소개 - React를 위한 유연한 타임라인 컴포넌트

React용으로 제작된 유연한 타임라인 구성 요소인 react-chrono를 소개합니다.



Fork this Repository

Demos

프라브후이뇨토 / 반응 크로노

React용 최신 타임라인 구성 요소

특징

✅ 모드 - 세 가지 고유 모드horizontal, vertical 또는 tree로 타임라인을 렌더링합니다.

✅ 트리 - Tree 모드를 사용하여 타임라인 카드를 트리와 같은 방식으로 세로로 배치합니다.

✅ 슬라이드쇼 - slideshow 모드에서 타임라인을 자동 재생합니다.

✅ 키보드 지원 - vertical 또는 tree 모드에서 UP , DOWN 키를 사용하여 타임라인을 탐색합니다. horizontal 모드에서 LEFT , RIGHT 키를 사용할 수 있습니다.

✅ 사용자 지정 테마 - theme 소품을 사용하여 색상을 사용자 지정합니다.

설치

yarn install react-chrono

🚀 시작하기

width 및 height 가 있는 컨테이너에 구성 요소를 포장했는지 확인하십시오. nomode가 지정되면 구성 요소는 기본적으로 HORIZONTAL 모드로 설정됩니다.
items 소품을 사용하여 타임라인을 만듭니다. 각 타임라인 항목에는 다음과 같은 속성이 있습니다.
title , contentTitle , contentText , contentDetailedText
다음은 최소한의 설정이 있는 타임라인의 예입니다.

  const items = [{
    title: "May 1940",
    contentTitle: "Dunkirk",
    contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west...",
  }, ...];

  <div style={{ width: "500px", height: "400px" }}>
    <chrono items={items} />
  </div>

수직의

타임라인을 세로로 렌더링하려면 VERTICAL 모드를 사용하십시오.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="VERTICAL"
    />
  </div>

나무

Tree 모드에서 타임라인은 카드가 왼쪽과 오른쪽을 번갈아 가며 수직으로 렌더링됩니다.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="TREE"
    />
  </div>

슬라이드쇼

slideShow 모드로 타임라인을 자동으로 재생합니다.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      slideShow
    />
  </div>

CodeSandbox에서 사용해 보세요!

소품

이름
설명
기본


방법
타임라인 구성요소의 레이아웃을 설정합니다. HORIZONTAL , VERTICAL 또는 TREE 일 수 있습니다.
HORIZONTAL
항목
타임라인 아이템 모음
[]

disableNavOnKey
키보드 탐색 비활성화
거짓

슬라이드쇼
슬라이드쇼 모드에서 타임라인 시작
거짓

슬라이드항목 기간ms 모드의 타임라인 포인트에 대한 slideshow의 지연 시간
2500

제목위치HORIZONTAL 모드에서 제목의 위치를 ​​설정합니다. TOP 또는 BOTTOM일 수 있습니다.
TOP
항목 너비HORIZONTAL 모드에서 타임라인 섹션의 너비
320

방법

react-chrono는 HORIZONTAL , VERTICAL 및 TREE 세 가지 모드를 지원합니다. mode 소품은 카드의 방향을 정의하는 데 사용할 수 있습니다.

키보드 탐색 및 비활성화

기본적으로 타임라인은 키보드를 통해 탐색할 수 있습니다.

HORIZONTAL 모드의 경우 왼쪽 오른쪽 화살표 키를 사용하여 탐색합니다.

VERTICAL 또는 TREE 모드의 경우 위 아래 화살표 키를 통해 타임라인을 탐색할 수 있습니다.

타임라인의 첫 번째 항목이나 마지막 항목으로 쉽게 이동하려면 HOME 또는 END 키를 사용하십시오.

disableNavOnKey를 true로 설정하여 키보드 탐색을 완전히 비활성화할 수 있습니다.

  <chrono items={items} disableNavOnKey />

슬라이드쇼 모드

slideShow prop을 true로 설정하여 슬라이드쇼를 활성화할 수 있습니다. 카드 사이의 시간 지연을 설정하는 옵션slideItemDuration을 설정할 수도 있습니다.

  <chrono items={items} slideShow slideItemDuration={4500} />

직위

이 설정은 HORIZONTAL 모드에만 적용됩니다. 소품titlePosition은 개별 제목의 위치를 ​​TOP 또는 BOTTOM 로 설정합니다.

  <chrono items={items}  titlePosition="BOTTOM" />

항목 폭

itemWidth 소품을 사용하여 각 개별 타임라인 섹션의 너비를 설정할 수 있습니다. 이 설정은 HORIZONTAL 모드에만 적용됩니다.

내장

- 구성 요소는 React 및 .

메타

프라부 머티 – – [email protected]

MIT 라이선스에 따라 배포됩니다. 자세한 내용은 LICENSE를 참조하십시오.

https://github.com/prabhuignoto/react-chrono