Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Sidebar Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Sidebar Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Sidebar

A sidebar is created with <tc:sidebar/>. It's based one the Collapsible concept.

Tag Library Documentation: <tc:sidebar/> | <tc:operation/>

Server side (Ajax)

<tc:button label="Open sidebar"> <tc:operation for="ajaxSidebar" name="show"/> <f:ajax execute="ajaxSidebar" render="ajaxSidebar"/> </tc:button> <tc:sidebar id="ajaxSidebar"> <f:facet name="label">Server side (Ajax)</f:facet> <f:facet name="bar"> <tc:link image="bi-x-lg"> <tc:operation name="hide" for="ajaxSidebar"/> <f:ajax execute="ajaxSidebar" render="ajaxSidebar"/> </tc:link> </f:facet> Content of the server side sidebar. </tc:sidebar>

Server side (Ajax)

Client side

<tc:button label="Open sidebar" omit="true"> <tc:operation for="clientSidebar" name="show"/> </tc:button> <tc:sidebar id="clientSidebar" collapsedMode="hidden"> <f:facet name="label">Client side</f:facet> <f:facet name="bar"> <tc:link image="bi-x-lg" omit="true"> <tc:operation name="hide" for="clientSidebar"/> </tc:link> </f:facet> Content of the client side sidebar. </tc:sidebar>

Client side

Content of the client side sidebar.

Placement

Use the placement attribute to set the position of the sidebar. Possible values are top, left, right and bottom.

Content of the top sidebar.

Content of the left sidebar.

Content of the right sidebar.

Content of the bottom sidebar.

Events

A JavaScript custom event is fired if a <tc:sidebar/> is collapsed or expanded.

tobago.sidebar.show is fired before the box is expanded.

tobago.sidebar.shown is fired after the box is expanded. (Does not wait for a possible Ajax reload.)

tobago.sidebar.hide is fired before the box is collaped.

tobago.sidebar.hidden is fired after the box is collapsed. (Does not wait for a possible Ajax reload.)

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.