PrimeFaces NotificationBar

17 Mar 2025 | 阅读 2 分钟

它是一个多用途的固定位置面板。它用于显示通知栏。默认情况下，它显示在顶部。我们可以通过指定 position 属性来设置它的位置。我们还可以设置通知栏的效果，如：淡入或滑动。除此之外，它还包含各种其他属性，如下表所示。

NotificationBar 属性

属性	默认值	类型	描述
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它设置布尔值以指定组件的呈现。
binding	null	Object	它是一个表达式，映射到支持 bean 中的服务器端 UIComponent 实例。
style	null	String	它用于设置容器元素的样式。
styleClass	null	String	它用于设置容器元素的 styleClass。
位置	top	String	它用于设置栏的位置。
效果	fade	String	它用于设置效果的名称。
效果速度	正常	String	它用于设置效果的速度。
自动显示	false	Boolean	它用于设置面板是否在页面加载时显示。
widgetVar	null	String	它是客户端小部件的名称。

示例

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

JSF 文件

// notificationBar.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>Notification Bar</title>
</h:head>
<h:body>
<p:notificationBar position="top" effect="fade" styleClass="top" widgetVar="notify">
<h:outputText value="This is a Primefaces notification." style="font-size:36px;" />
</p:notificationBar>
<p:graphicImage name="images/primefaces-logo.jpeg" /><br/><br/>
<p:commandButton value="Click for notification" onclick="PF('notify').show()" type="button" icon="ui-icon-arrow-1-s"/>
</h:body>
</html>

输出