While not always necessary, sometimes you need to put your DOM in a box. For those situations, the panel component comes in handy.
By default, all the <b:panel> does is apply some basic border and padding to contain some content.
Easily add a heading container to your panel specifying the
heading
facet. You may also include any
<h1>
-
<h6>
to add a pre-styled heading. Facets may contain arbitrary content. For instance, the example below contains a <b:badge />:
As a simple (but less flexible) alternative, you can specify a title with the
title
attribute; since this is meant as an option, the heading facet
will not be rendered and the panel will render with a heading
having the attribute's value as Title.
By default, panels can be collapsed by clicking the title bar or
the chevron at the right hand side of the title bar. If you don't
need this feature, you can switch it off by adding the attribute
collapsible="false"
:
BootsFaces can underline the panel title as a visual clue that the panel can be collapsed using the keyboard.
You can activate it by setting showCollapseLink="true":
By default, panels are not collapsed when the page is rendered. If they're outside a form, they are also expanded after a post request (i.e. after clicking a button) - even if the user had collapsed the panel before clicking the button. To preserve the expansion state on postbacks, make sure to put the panel into the same form as the command button. The panel below is the only panel on this page which restores its state after clicking the button:
The collapse state can also be controlled by an attribute of a managed bean:
However, if the user opens or closes a panel, their choice overrides the values taken from the bean.
Like other components, easily make a panel more meaningful to a
particular context by adding a
look
attribute with values primary, success, info, warning or danger.
Wrap buttons or secondary text in a
footer
facet. Note that panel footers do not inherit
colors and borders when using contextual variations as they are
not meant to be in the foreground.
You can use the standard JavaScript callback handlers to call both JavaScript and AJAX code. Apart from the standard
HTML event handlers like onclick and onmouseover there are also four Bootstrap callback listeners: onexpand,
onexpanded, oncollapse and oncollapsed..
By setting the flag contentDisabled="true" you can set each child element to disabled. More precisely,
the panels of the panel are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but
not every component. In particular, tabs and panels still work. You'll also have to be careful about
links (everything that's using an <a> tag, like <button> and <b:navLink>.)
These elements will be shown as disabled, but still are accessible. In part, that's because this CSS property isn't fully
standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.
| Attribute | Default value | Description |
|---|---|---|
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| binding | (none) | An EL expression referring to a server side UIComponent instance in a backing bean. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| collapsed | false | Is the panel collapsed? |
| collapsible | true | By default, panels can be folded by clicking the title bar. Seting collapsible to false will suppress the collapse/expand feature. |
| content-class contentClass (alternative writing) |
(none) | content-class is optional: if specified, the content will be displayed with this specific class |
| content-disabled contentDisabled (alternative writing) |
false | Enables or disables every child element of this container. By default, child elements are enabled. |
| content-style contentStyle (alternative writing) |
(none) | Inline style of the content area. |
| delay | (none) | Delays the AJAX request. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Boolean value to specify if the button is disabled. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| icon | (none) | Panel header icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute. |
| icon-align iconAlign (alternative writing) |
(none) | Alignment can be right or left. |
| icon-awesome iconAwesome (alternative writing) |
(none) | Font Awesome icon to show in this Panel header, can be one of the Font Awesome icon names. Alignment can be specified with the icon-align attribute. |
| icon-brand iconBrand (alternative writing) |
false | Use the free brand font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-flip iconFlip (alternative writing) |
(none) | Flip the icon: can be H (horizontal) or V (vertical). |
| icon-inverse iconInverse (alternative writing) |
false | Switch the icon from black-on-white to white-on-black. |
| icon-light iconLight (alternative writing) |
false | Use the paid 'light' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-pulse iconPulse (alternative writing) |
false | Boolean value: if true the icon will rotate with 8 discrete steps. |
| icon-regular iconRegular (alternative writing) |
false | Use the paid 'regular' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-rotate iconRotate (alternative writing) |
(none) | Rotate 90 degrees the icon: Can be L,R. |
| icon-size iconSize (alternative writing) |
(none) | Icon Size: legal values are lg (=133%), 2x, 3x, 4x, 5x. If you're using Fontawesome 5, also 6x, 7x, 8x, 9, 10x, xs (=75%), and sm (=87.5%) are allowed. |
| icon-solid iconSolid (alternative writing) |
false | Use the free font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-spin iconSpin (alternative writing) |
false | Boolean value: if true the icon will spin. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| look | (none) | Look of the Panel, can be primary, success, info, warning, danger. Default is warning. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| onclick | (none) | The onclick attribute. |
| oncollapse | (none) | JavaScript code or AJAX method to be executed when the panel starts to be collapsed. |
| oncollapsed | (none) | JavaScript code or AJAX method to be executed when the panel has finished collapsing. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onexpand | (none) | JavaScript code or AJAX method to be executed when the panel starts to be expanded. |
| onexpanded | (none) | JavaScript code or AJAX method to be executed when the panel has finished expandeding. |
| onmousedown | (none) | Client side callback to execute when a pointer input element is pressed down over input element. |
| onmousemove | (none) | Client side callback to execute when a pointer input element is moved within input element. |
| onmouseout | (none) | Client side callback to execute when a pointer input element is moved away from input element. |
| onmouseover | (none) | Client side callback to execute when a pointer input element is moved onto input element. |
| onmouseup | (none) | Client side callback to execute when a pointer input element is released over input element. |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| show-collapse-link showCollapseLink (alternative writing) |
false | Collapsible panel headers are decorated by an underline to indicate it can be toggled using the keyboard if you activate this feature by setting showCollapseLink='true'. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | Inline style of the entire panel area. |
| style-class styleClass (alternative writing) |
(none) | Style class of the input element. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| title | (none) | Title is optional: if specified, the heading facet will not be rendered and the panel will render with a heading with this Title. |
| title-class titleClass (alternative writing) |
(none) | TitleClass is optional: if specified, the title will be displayed with this specific class |
| title-style titleStyle (alternative writing) |
(none) | Inline style of the title area. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
| Name of the facet | Description |
|---|---|
| heading | This optional facet can be used to render complex titles. |
| footer | This optional facet can be used to render complex footers. |
| panel | This CSS class applies to the entire panel. |
| panel-title | This CSS class applies to the title area of the panel. |
| panel-footer | This CSS class applies to the footer area of the panel. |