Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
SlideOut
SlideOut can be used to have nice forms attached to the edge of the screen.

Click on the "Contact" tab attached to the TOP edge of the screen.

Slideout can be controlled in Javascript by its widgetVar and callback events can be registered.
Contact
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

<pe:slideout id="slideoutContact" title="Contact" icon="pi pi-envelope" location="top" widgetVar="slideout"
        handleStyleClass="contact-handle" panelStyleClass="contact-panel" offset="450px" bounceTimes="5"
        bounceDistance="100px">
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtMessage" value="Message"></p:outputLabel>
                </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:outputLabel>
                </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('slideout').close();" />
                    </p:outputPanel>
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <h:panelGroup layout="block" style="text-align:left;margin-bottom:10px;">
        <p:commandButton value="Open" type="button" onclick="PF('slideout').open();" />
        <p:commandButton value="Close" type="button" onclick="PF('slideout').close();" />
        <p:commandButton value="Toggle" type="button" onclick="PF('slideout').toggle();" />
        <p:commandButton value="Bounce" type="button" onclick="PF('slideout').bounce();" />
    </h:panelGroup>
            
Components and more
Documentation pe:slideout
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.
widgetVar Name of the client side widget.
showOn Action which will open the panel, 'hover' or 'click'.
title Text value to display on the handle. Default value is null.
icon Icon image to display on the handle. Default value is null.
location Location on screen either left, right, top or bottom. Default value is right.
animateSpeed Speed of the slide out animation. Default is 300.
bounceTimes How many bounces when 'bounce' is called. Default is 4.
bounceDistance How far bounce event will move everything. Default value is 50px.
sticky True to have the tab follow the scroll of the window.
clickScreenToClose Close the tab when the rest of screen is clicked. Default is true.
autoOpen Automatically open tab on DOM load. Default is false.
offset Panel distance from top or left (bottom or right if offsetReverse is true). Default value is 200px.
offsetReverse Panel is aligned with right or bottom of window. Default is false.
handleOffset Handle distance from top or left. If null, detects panel border to align handle nicely. Default value is NULL.
handleOffsetReverse Handle is aligned with right or bottom of window. Default is false.
handleStyleClass Style class of the tab handle element. Default value is null.
handleStyle Inline style applied to the tab handle element. Default value is null.
panelStyleClass Style class of the slideout container element. Default value is null.
panelStyle Inline style applied to the slideout container element. Default value is null.
onopen Javascript handler to execute when the slideout opens.
onclose Javascript handler to execute when the slideout closes.
onslide Javascript handler called after opening or closing.
onbeforeopen Javascript handler called before opening, return false to cancel.
onbeforeclose Javascript handler called before closing, return false to cancel.
onbeforeslide Javascript handler called before opening or closing, return false to cancel.
Events (move mouse over the names to see classes)
Name Description
openfires when the slideout is opened
closefires when the slideout is closed
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 13.0.0,PrimeFaces Extensions: 13.0.1,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2023-09-11 19:07