Tab Block – tabs or an accordion¶
The tab block splits a form into tabs, so that a record with much content does not become one endless page. The same block can be drawn as an accordion, where several sections can be open at a time. Its content are Tab Item Blocks, one per tab.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Shows its tab items as tabs or as an accordion |
| Typical use | "Details", "History", "Attachments" of a ticket; foldable sections of a long form |
| Related | Tab Item Block, Vertical Stack Block (folding) |
2. Settings¶
| Setting | Meaning | Default |
|---|---|---|
| "Display Style" | Tab: one tab is visible at a time. Accordion: every item is a section with a header that opens and closes on its own. | empty – nothing is drawn until you choose one |
| "Header Placement" | Where the tab headers sit: Top, Bottom, Left, Right. Only for Tab. | empty – no tab headers are drawn |
| "Loading Behavior" | OnDemand: the content of a tab is loaded when it is opened for the first time. Preload: all tabs are loaded with the form. None behaves like OnDemand. | None |
| "Preserve Selection" | Remembers per user which tab was selected or which accordion items were open, for the next visit | off |
| "Header Padding" | Inner spacing of the tab headers, per side, as CSS length (plain numbers are pixels). Tab: indents the whole header strip – a left and right value of 16 leaves 16px in front of the first and behind the last header; the line between the headers and the content keeps its full length. Accordion: the inner spacing of every section header. | empty – the built-in spacing |
In addition, the block has the settings every block has, except "Flush". The tab block only takes Tab Item Blocks as children.
Set "Display Style" and "Header Placement" for every new tab block. A new tab block has neither, and without them nothing or no headers are shown.
3. Behaviour¶
Which tab is open¶
When the form opens, every tab item is checked in order:
- With "Preserve Selection", what the user had open last time wins.
- Otherwise the item's "Selected" condition decides.
- Otherwise the item is closed.
For Tab, the first item found to be open is the selected tab; if none is, the first tab is selected – one tab is always open. For Accordion, any number of items can be open, including none.
A block with "Focus On Open" can open another tab or accordion item afterwards – only when no block that can be seen asks for the cursor, see Cursor and tab key. With "Loading Behavior" OnDemand, a tab that contains such a block is loaded when the form opens.
When the form redraws itself (after every change of a value), each item keeps the state the user gave it – unless the result of its "Selected" condition changed, then it follows the condition.
Hidden and disabled tabs¶
A tab item whose "Visible" condition is false is left out completely. A disabled tab item is shown but cannot be selected.
Loading¶
With OnDemand, a tab that was never opened is not evaluated at all, which keeps a form with heavy tabs – grids, timelines – fast. The header of every tab, including the blocks in it, is always evaluated.
Styling¶
The settings of the tab block style the block as a whole: its "Padding" surrounds headers and content alike, so the line below the tab headers is indented with it. "Header Padding" only moves the headers – the line keeps its full length. The Typography settings of the tab block ("Font Size", "Font Weight", "Text Color", "Text Decoration", "Text Transform") style the tab headers and accordion headers, not the content: the blocks inside a tab have a typography of their own. A "Text Color" applies to the selected and the other tabs alike; the line under the selected tab still marks it. The styling of a tab item is the styling of its content. In the accordion, margin, size, shadow and border of a tab item apply to the whole item, header included; every item has a default border, and a border width set on the item replaces it.
4. Examples¶
Ticket with three tabs. "Display Style" = Tab, "Header Placement" = Top, "Loading Behavior" = OnDemand, "Preserve Selection" on. Tab items "Details", "Activities" and "Attachments". The activities timeline is only loaded when a user opens that tab, and each user finds the tab they used last.
Open the problem section when needed. "Display Style" = Accordion. The item "Rejection" has
"Selected" = Status = "Rejected": it opens by itself as soon as a request is rejected, while the
other items keep the state the user gave them.