时间轴
时间轴可视化一系列链式事件。
导入#
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 角色和属性，因为任何有效的属性都会传递给列表元素。
键盘支持
组件不包含任何交互式元素。