PrimeFaces 步骤

17 Mar 2025 | 阅读 2 分钟

此组件是工作流程中步骤的指示器。它指示我们现在处于哪个步骤。它用于显示多步骤应用程序中的当前步骤。

<p:steps> 组件用于在 JSF 应用程序中创建步骤指示器。它具有如下表所示的各种重要属性。

步骤属性

属性默认值类型描述
idnullString它是组件的唯一标识符。
renderedtrueBoolean它接受布尔值来指定组件的渲染。
modelnullMenuModel它用于动态构建菜单。
stylenullString用于设置组件的内联样式。
activeIndex0Integer它是活动选项卡的索引。
widgetVarnullString它用于设置客户端小部件的名称。
readonlytrueBoolean它用于使组件只读。

皮肤

以下是结构样式类的表格。

样式类应用
.ui-steps它应用于主容器元素。
.ui-steps-item它应用于步骤元素。
.ui-steps-name它应用于步骤的名称。
.ui-steps-item此类用于步骤的编号。

示例

在此,在以下示例中,我们正在实现 <p:steps> 组件。此示例包含以下文件。

JSF 文件

// steps.xhtml

输出

PrimeFaces Steps 1

如果我们更改 activeIndex = 3,它将产生以下输出。

PrimeFaces Steps 2