PrimeFaces Extensions Showcase

SlideOut

Multiple slideouts can be on one page and even opened by default.

AutoOpen

Auto Open

Tab opens after DOM is done loading!

Hover

Hover over the tab with your mouse to open instead of a click!

Reverse

Handle is on the other side of the tab!

Source


<pe:slideout id="soAuto" title="AutoOpen" icon="pi pi-folder-open" location="top" widgetVar="slideoutAuto"
        handleStyleClass="auto-handle" panelStyleClass="auto-panel" showOn="click" offset="250px" autoOpen="true">
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <h:outputText value="Auto Open" />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <h:outputText value="Tab opens after DOM is done loading!" />
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <pe:slideout id="soHover" title="Hover" icon="pi pi-arrow-right" location="top" widgetVar="slideoutHover"
        handleStyleClass="hover-handle" panelStyleClass="hover-panel" showOn="hover" offset="350px">
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <h:outputText value="Hover" />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <h:outputText value="Hover over the tab with your mouse to open instead of a click!" />
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <pe:slideout id="soReverse" title="Reverse" icon="pi pi-backward" location="top" widgetVar="slideoutReverse"
        handleStyleClass="reverse-handle" panelStyleClass="reverse-panel" showOn="click" offset="400px"
        handleOffsetReverse="true">
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <h:outputText value="Reverse" />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <h:outputText value="Handle is on the other side of the tab!" />
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>


@Named
@ViewScoped
public class SlideOutController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    public void closeListener(final CloseEvent closeEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Close fired",
                    "Component id: " + closeEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void openListener(final OpenEvent openEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Open fired",
                    "Component id: " + openEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

}


/* Custom styles for the SlideOut */
.hover-panel {
    border-color: red;
    border-width: 5px;
}
.hover-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: red;
}
.reverse-panel {
    border-color: blue;
    border-width: 5px;
}
.reverse-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: blue;
}
.auto-panel {
    border-color: orange;
    border-width: 5px;
}
.auto-handle {
    padding: 8px;
    font-size: 14px;
    color: white !important;
    background-color: orange;
}

Use Cases

Documentation pe:slideout

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

Name	Description
animateSpeed	Animation speed in ms.Default is 300.
autoOpen	If true, the panel auto opens on load.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
bounceDistance	Distance for bounce effect.Default is 50px.
bounceTimes	Number of bounces.Default is 4.
clickScreenToClose	If true, clicking the screen closes the panel.Default is true.
handleOffset	Handle offset distance from edge.
handleOffsetReverse	If true, handle offset is reversed (align with right/bottom).Default is false.
handleStyle	Style of the handle.
handleStyleClass	Style class of the handle.
icon	Icon for the handle.
id	Unique identifier of the component in a namingContainer.Default is generated.
location	Location: left, right, top or bottom.Default is right.
offset	Offset distance of the panel from the edge.Default is 200px.
offsetReverse	If true, offset is reversed (align with right/bottom).Default is false.
onbeforeclose	Callback javascript executed before close.
onbeforeopen	Callback javascript executed before open.
onbeforeslide	Callback javascript executed before slide.
onclose	Callback javascript executed after close.
onopen	Callback javascript executed after open.
onslide	Callback javascript executed on slide.
panelStyle	Style of the slideout panel.
panelStyleClass	Style class of the slideout panel.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOn	Show on 'click' or 'hover'.Default is click.
sticky	If true, the panel is positioned fixed (sticky).Default is false.
title	Text title of the handle.
widgetVar	Name of the client side widget.