步骤

步骤，也称为步进器，是工作流程中步骤的指示器。步骤组件的布局针对响应式设计进行了优化。

导入#


import { Steps } from 'primereact/steps';

步骤需要一个菜单项集合作为其模型。


<Steps model={items} />

可以使用activeIndex属性以编程方式控制步骤。


<Steps model={items} />

步骤默认是线性的，以强制完成上一个步骤才能继续。对于非线性模式，请将readOnly设置为 false。


<Steps readOnly model={items} />

为了向组件添加交互性，请禁用readOnly并使用绑定到activeIndex以及onSelect来控制步骤。


<Toast ref={toast}></Toast>
<Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />

步骤通过items template 属性提供项目自定义，该属性接收项目实例并返回一个元素。


<Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />

步骤组件使用 nav 元素，并且由于任何属性都隐式传递给根元素，因此可以使用 aria-labelledby 或 aria-label 来描述该组件。其中使用了一个有序列表，其中当前步骤项将 aria-current 定义为“step”。

按键	功能
tab	当焦点移动到组件时，将焦点添加到活动步骤；如果已经有一个聚焦的选项卡标题，则根据页面选项卡顺序将焦点移出组件。
enter	如果未启用 readonly，则激活聚焦步骤。
空格	如果未启用 readonly，则激活聚焦步骤。
右箭头	如果未启用 readonly，则将焦点移动到下一步。
左箭头	如果未启用 readonly，则将焦点移动到上一步。
home	如果未启用 readonly，则将焦点移动到第一步。
end	如果未启用 readonly，则将焦点移动到最后一步。