Představujeme reagovat-chrono – flexibilní komponenta časové osy pro React

Představujeme react-chrono , flexibilní komponenta časové osy vytvořená pro React.

Fork this Repository

Ukázky

prabhuignoto / reagovat-chrono

Moderní komponenta časové osy pro React

Funkce

✅ Režimy - Vykreslování časových os ve třech jedinečných režimech horizontal , vertical nebo tree .

✅ Strom - Použijte Tree režim pro rozvržení karet časové osy svisle do stromového tvaru.

✅ Prezentace - Automatické přehrávání časové osy v slideshow režimu.

✅ Podpora klávesnice - Procházejte časové osy pomocí NAHORU , DOLŮ klíče v vertical nebo tree režimu. V horizontal režim VLEVO , VPRAVO lze použít klávesy.

✅ Vlastní motiv - Přizpůsobte barvy pomocí theme rekvizita

Instalace

yarn install react-chrono

🚀 Začínáme

Ujistěte se, že jste komponentu zabalili do kontejneru, který má width a height . Když není mode je zadáno, výchozí hodnota komponenty je HORIZONTAL režimu.

Použijte items rekvizita k vytvoření časové osy. Každá položka časové osy má následující vlastnosti.

title , contentTitle , contentText , contentDetailedText

Zde je příklad časové osy s minimálním nastavením.

  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>

Vertikální

Pro svislé vykreslení časové osy použijte VERTICAL režimu

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

Strom

V Tree V režimu se časová osa vykresluje vertikálně s kartami střídajícími se mezi levou a pravou stranou.

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

Prezentace

Přehrajte časovou osu automaticky pomocí slideShow režimu.

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

Vyzkoušejte to na CodeSandbox!

Rekvizity

Režim

react-chrono podporuje tři režimy HORIZONTAL , VERTICAL a TREE . Režim prop lze použít k definování orientace karet.

Navigace pomocí klávesnice a její deaktivace

Časovou osu lze ve výchozím nastavení procházet pomocí klávesnice.

• Pro HORIZONTAL režimu použijte LEVÝ VPRAVO šipky pro navigaci.
• Pro VERTICAL nebo TREE V režimu NAHORU lze po časové ose procházet DOLŮ šipky.
• Chcete-li snadno přejít na první nebo poslední položku na časové ose, použijte HOME nebo END klíč.

Navigaci pomocí klávesnice lze zcela zakázat nastavením disableNavOnKey na pravdu.

  <chrono items={items} disableNavOnKey />

Režim prezentace

Prezentaci lze aktivovat nastavením slideShow prop to pravda. Můžete také nastavit volitelný slideItemDuration který nastavuje časové zpoždění mezi kartami.

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

Pozice názvu

Toto nastavení platí pouze pro HORIZONTAL režimu. Podpěra titlePosition nastaví pozici jednotlivých titulků buď na TOP nebo BOTTOM .

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

Šířka položky

itemWidth Prop lze použít k nastavení šířky jednotlivých sekcí časové osy. Toto nastavení je použitelné pouze pro HORIZONTAL režimu.

Vytvořeno pomocí

• ReactJS – Komponenta je napsána v React a Typescript.

Meta

Prabhu Murthy – @prabhumurthy2 – [email protected]

Distribuováno pod licencí MIT. Viz LICENSE pro více informací.

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