Theme
afterdark
afternoon
afterwork
aristo
black-tie
blitzer
bluesky
bootstrap
casablanca
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x
home
hot-sneaks
humanity
le-frog
midnight
mint-choc
omega
overcast
pepper-grinder
redmond
rocket
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
SlideOut
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.

Based on jQuery TabSlideOut Plugin.

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.
Components and more
Use Cases
Documentation pe:slideout
Attributes (move mouse over the names to see data types)
Name Description
idUnique identifier of the component in a namingContainer.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingAn el expression referring to a server side UIComponent instance in a backing bean.
widgetVarName of the client side widget.
showOnAction 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.
onopenJavascript handler to execute when the slideout opens.
oncloseJavascript handler to execute when the slideout closes.
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-2017, PrimeFaces: 6.1, PrimeFaces Extensions: 6.1.0, JSF: mojarra 2.2.8, Server: jetty/9.4.2.v20170220, Build time: 2017-04-19 16:13
occured!
Message:
Timestamp:
StackTrace:
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com