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;
}