タイムライン
タイムラインは、一連の連鎖的なイベントを視覚化します。
インポート#
import { Timeline } from 'primereact/timeline';
基本#
タイムラインには、イベントのコレクションのためのvalueと、コンテンツを返すためにオブジェクトをパラメータとして受け取るcontent関数が必要です。
<Timeline value={events} content={(item) => item.status} />
配置#
線に対するコンテンツの位置は、alignプロパティで定義されます。
<Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
<Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
<Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
反対側#
線の反対側に追加コンテンツは、oppositeプロパティで提供できます。
<Timeline value={events} opposite={(item) => item.status}
content={(item) => <small className="text-color-secondary">{item.date}</small>} />
テンプレート#
カスタムコンテンツとスタイル付きマーカーを使用した実装例。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
<Timeline value={events} align="alternate" className="customized-timeline"
marker={customizedMarker} content={customizedContent} />
水平#
タイムラインの向きはlayoutプロパティで制御され、デフォルトはverticalで、代替としてhorizontalがあります。
<Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
<Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
<Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span> </span>} />
アクセシビリティ#
スクリーンリーダー
タイムラインは、イベントをリストするためにセマンティックな順序付きリスト要素を使用します。特定の役割は強制されていませんが、有効な属性はすべてリスト要素に渡されるため、任意のariaの役割と属性を使用できます。
キーボードサポート
コンポーネントにはインタラクティブな要素は含まれていません。