个性化阅读
专注于IT技术分析

PrimeFaces 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="Personal Details" />
<p:menuitem value="Qualification" />
<p:menuitem value="Home Address" />
<p:menuitem value="Confirmation" />
</p:steps>
</h:body>
</html>

输出

PrimeFaces步骤1

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

PrimeFaces步骤2
赞(0) 打赏
未经允许不得转载:srcmini » PrimeFaces steps用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏