PrimeFaces Extensions Showcase

SlideOut

SlideOut create tabs that slide out from the window edges to show a feedback form, contact form, live chat, etc.

Features include:

Attach to any edge of the screen: top, bottom, left or right
Make sticky to have the tab follow you as you scroll
Easily CSS styled
Javascript callbacks for Open and Close tab events
Ajax behaviors for Open and Close tab events

A typically area of application is anywhere you may want to get customer feedback.

WARNING:Demos in this showcase may not work in some browsers and all examples are shown set to the top of the screen. The reason is because of CSS position:absolute vs. position:relative of the tabs. The PE Showcase uses pe:layout component which causes issues trying to use this component because the tab cannot be drawn on top of the Layout panes.

However, we are successfully using the component in production applications you just have to be careful where you lay it out.

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.