PrimeFaces steps用法

本文概述

steps属性
结构样式类
例子

该组件是工作流程中步骤的指示器。它表明我们现在处于哪个步骤。它用于显示多步骤应用程序中的当前步骤。
< p：steps> 组件用于在JSF应用程序中创建步骤指示器。它具有下表列出的各种重要属性。
steps属性

Attribute	默认值	Type	Description
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它需要布尔值来指定组件的呈现。
model	null	MenuModel	它用于动态构建菜单。
style	null	String	用于设置组件的内联样式。
activeIndex	0	Integer	它是活动选项卡的索引。
widgetVar	null	String	用于设置客户端小部件的名称。
readonly	true	Boolean	它用于使组件变为只读。

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

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

例子在下面的示例中, 我们正在实现< p：steps> 组件。本示例包含以下文件。
JSF文件
//steps.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> < h:head> < title> Steps< /title> < /h:head> < h:body> < h3 style="margin-top:0"> PrimeFaces Steps< /h3> < p:steps activeIndex="3"> < p:menuitem value="http://www.srcmini.com/Personal Details" /> < p:menuitem value="http://www.srcmini.com/Qualification" /> < p:menuitem value="http://www.srcmini.com/Home Address" /> < p:menuitem value="http://www.srcmini.com/Confirmation" /> < /p:steps> < /h:body> < /html>

输出