PrimeFaces 菜单栏

2025 年 3 月 17 日 | 阅读 1 分钟

它是一个水平导航组件，提供菜单选项。它用于收集菜单并在有组织的行中显示它。

我们可以通过在 JSF 应用程序中使用 <p:menubar> 组件来创建菜单栏。下面列出了一些重要的属性。

菜单栏属性

属性	默认值	类型	描述
model	null	MenuModel	它用于以编程方式创建菜单。
style	null	String	它用于菜单栏的内联样式。
styleClass	null	String	它是菜单栏的样式类。
autoDisplay	false	Boolean	它用于定义子菜单的第一级是否会在鼠标悬停时显示。
tabindex	0	String	它用于设置元素在制表顺序中的位置。
toggleEvent	over	String	用于切换子菜单的事件。

示例

在下面的示例中，我们正在实现 <p:menubar> 组件。此示例包含以下文件。

JSF 文件

// menuBar.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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>MenuBar</title>
</h:head>
<h:body>
<h:form>
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Text" />
<p:menuitem value="Other" />
</p:submenu>
<p:menuitem value="Open" />
<p:separator />
<p:menuitem value="Exit" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="help" icon="ui-icon-help" />
</p:submenu>
</p:menubar>
</h:form>
</h:body>
</html>

输出