Since 4.2 EE
The ace:drawerPanel component is a container component that can overlay other elements on the page, appearing from an edge of the page. The DrawerPanel has several customization options such as modal, width, position.
|See the ICEfaces Showcase Live Demo of this component, complete with source code.|
In most cases, it's enough to add the tag on the page without any configuration.
<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.
container: Specify the container whose edges the drawer will appear from. The default mode is the entire window, but it's possible to specify a client id of an element on the page to have the drawer.
position: Specifies the side on which the drawer should be displayed. Possible values are 'left', 'right', 'top', and 'bottom'.
header: Text that will appear in the header of the drawer.
showHandleOpen: Boolean value that specifies whether to display a three-horizontal-bars icon to open the drawer. This handle will appear at the upper left corner of the viewport if the 'position' is 'left' or 'top', at the uper right corner of the viewport if the 'position' is 'right', and at the lower left corner of the viewport if the 'position' is 'bottom'. This handle will only be displayed if the 'container' is set to 'window'. If a handle is desired when applying the drawer to a specific container, it has to be done manually; please consult the wiki page for this component for guidelines and sample markup.
showHandleClose: Boolean value that specifies whether to display a three-horizontal-bars icon inside the drawer to close it. This handle will appear at the upper left corner of the drawer, inside the drawer's header.
effect: Effect to use when opening and closing the drawer. Possible values are 'drop', 'fade', and 'slide'. The default effect is 'slide'.
modal: Boolean value that specifies whether the document should be shielded with a partially transparent mask to require the user to close the panel before being able to activate any elements in the document.
Client Behavior Events
|| Fired when the drawer panel is opened (default event).
|| Fired when the drawer panel is closed.
var widget = ice.ace.instance('frm:componentId);
|The ice.ace.instance function requires the full client id of the component to be specified, such as "j_idt77:componentId" instead of just "componentId". To reduce the complexity of working with complete IDs with this function it may be preferable in some cases to use prependId="false" in the enclosing form (e.g. <h:form prependId="false">).|
Once the drawer panel object is retrieved in the client via ice.ace.instance(). The open() and close() methods are available to programatically open and close the drawer panel, respectively.
Keyboard and ARIA Support
Not supported at the moment.
None at the moment.