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
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when Set 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
open	fires when the slideout is opened
close	fires when the slideout is closed