PrimeFaces Extensions Showcase

Floating Action Button

Custom content allows you to open an overlay panel instead of a menu.

Message

Email address (optional)

If you provide your email address above, then by submitting
this form you agree that we may contact you by email
to follow up on your feedback.

Source

XHTML page


<p:badge value="1" severity="danger">
        <pe:fab id="btnFab" icon="pi pi-question-circle" iconActive="pi pi-times" style="background: green;" widgetVar="fabWidget">
            <pe:javascript event="open" execute="PF('overlayWidget').show('btnFab');"/>
            <pe:javascript event="close" execute="PF('overlayWidget').hide();"/>
        </pe:fab>
    </p:badge>

    <p:overlayPanel id="overlayPanel" widgetVar="overlayWidget" appendTo="@(body)" showEffect="drop" hideEffect="slide">
        <p:panelGrid styleClass="ui-noborder">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtMessage" value="Message"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputTextarea id="txtMessage" rows="5" cols="43" autoResize="false"/>
                    <p:watermark for="txtMessage" value="Send us a message if you have something to say."/>
                </p:column>
            </p:row>
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtEmail" value="Email address (optional)"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputText id="txtEmail" size="40"/>
                    <p:watermark for="txtEmail" value="Email address (optional)"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column style="font-style: italic;">
                    If you provide your email address above, then by submitting<br/>
                    this form you agree that we may contact you by email<br/>
                    to follow up on your feedback.<br/>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:outputPanel style="text-align:right;">
                        <p:commandButton value="Send" type="button" onclick="PF('fabWidget').close();"/>
                    </p:outputPanel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:spacer height="50"/>

                </p:column>
            </p:row>
        </p:panelGrid>
    </p:overlayPanel>

Use Cases

Documentation pe:fab

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
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.
model	MenuModel instance to create menus programmatically.
tabindex	Position of the items in the tabbing order. Default is 0.
icon	Icon for the main button. Default value is "pi pi-plus".
iconActive	Active variant of the icon for the main button. Default value is null.
keepOpen	Keep the menu open when an item is clicked. Default value is false.
widgetVar	Name of the client side widget.
styleClass	Style class of the main container element. Default value is null.
style	Style of the main button element. Default value is null.