srcmini本文概述
该组件是工作流程中步骤的指示器。它表明我们现在处于哪个步骤。它用于显示多步骤应用程序中的当前步骤。
<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="Personal Details" />
<p:menuitem value="Qualification" />
<p:menuitem value="Home Address" />
<p:menuitem value="Confirmation" />
</p:steps>
</h:body>
</html>输出
如果我们更改activeIndex = 3, 它将产生以下输出。
评论前必须登录！
注册