Tobago Demo

Menu

» Root Dummy » Intro » Input » Output » Select » Command » Container » Box » Panel » Separator » Section » Header and Footer » Bar » Popup » Popover » Toast » Tab Group » Sheet » Tree » File Upload » WYSIWYG Editor » Layout » Collapsible » Partial Ajax » Behavior » Form » Validation » Conversion » Format » Theme » Styling » Browser » Locale » AccessKey » DataAttribute » Focus » Meta » Icons » Security » Error Handling » Exception Handler » For Each » Resize » Conversation » WebSocket » Transition » Non Faces Response » Non Faces Request » Configuration » Test
» Root Dummy » Intro » Input » Output » Select » Command » Container » Box » Panel » Separator » Section » Header and Footer » Bar » Popup » Popover » Toast » Tab Group » Sheet » Tree » File Upload » WYSIWYG Editor » Layout » Collapsible » Partial Ajax » Behavior » Form » Validation » Conversion » Format » Theme » Styling » Browser » Locale » AccessKey » DataAttribute » Focus » Meta » Icons » Security » Error Handling » Exception Handler » For Each » Resize » Conversation » WebSocket » Transition » Non Faces Response » Non Faces Request » Configuration » Test

Box

A content box is created with <tc:box/>.

Tag Library Documentation

Basics

The title of the box is set by the label attribute or with <f:facet name="label">.

<tc:box label="Box">Content</tc:box>

Box one

Title set by label attribute.

Box another

Title set by <f:facet name="label">.
Contentbox without a title.

Scrollable box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan libero orci, vel lacinia nibh tincidunt nec. Praesent in euismod eros. Phasellus suscipit purus nisl, et posuere dolor iaculis at. Vivamus fringilla risus tellus, at sollicitudin nunc egestas at. Nullam hendrerit augue id nibh pharetra maximus. Vivamus eu turpis ut ligula euismod accumsan et eget lectus. Aenean ornare elit nisl, vitae bibendum dolor egestas varius. Fusce euismod leo at tristique auctor. Donec eget luctus dui.

Collapse/Expand

A contentbox can be collapsed or expanded via the collapsed attribute. To define the behavior of hidden content, use the collapseMode attribute. For more information have a look at the Collapsible Box page in the Collapsible section.

Bar

It's possible to add a bar to the header of a content box. For that, the content box must contain the tag <f:facet name="bar">. The facet may contain <tc:bar> or other suitable tags.

Title

Box with <f:facet name="bar">.

Box in a box

Box 1

Box 2

content

Accordion

This example show collapsible/expandable boxes using the label facet.

Expanding/collapsing the first box, a full server request is executed. The other two boxes are reloaded with an ajax request.

In the collapsed form the last box only hide the content with CSS. The boxes 'Box 1' and 'Box 2' don't render the content at all.

See Collapsible Concept for more information about the collapsible concept.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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