Theme
Legend
Legend makes it easy to add a key to your UI.
Vertical Title
  • 0 - 20%
  • 40%
  • 60%
  • 80%
  • 100%
Horizontal Title Facet
  • 0 - 20%
  • 40%
  • 60%
  • 80%
  • 100%
Source

<p:panelGrid id="pnlLegend" columns="2" styleClass="ui-noborder" >
    
        <p:outputLabel value="Vertical" />
        <pe:legend layout="vertical" widgetVar="lgndVertical" values="#{legendController.values}" title="Vertical Title" footer="Source: PrimeFaces"/>
        
        <p:spacer/>
        <p:spacer/>
        
        <p:outputLabel value="Horizontal" />
        <pe:legend layout="horizontal" widgetVar="lgndHorizontal" values="#{legendController.values}">
            <f:facet name="title">
                    Horizontal Title Facet
            </f:facet>
            <f:facet name="footer">
                    Source: <a href="http://www.primefaces.org">PrimeFaces Rocks!</a>
            </f:facet>
        </pe:legend>
        
    </p:panelGrid>
            
Components and more
Use Cases
Documentation pe:legend
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
widgetVar Name of the client side widget.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
style Inline style of the container element.
styleClass Style class of the container element.
values Values is a Map where key=text and value=HTML color.
layout The layout of the legend: 'vertical' or 'horizontal'. Default is 'vertical'.
title The title text of the legend.
footer The footer text of the legend.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55
occured!