Next: , Up: Program UI   [Contents][Index]


7.1.1 Group Styles

Portions of this system need refactoring.17

Groups support a number of group styles that determine how they are delimited from other groups (see Defining Groups); how the elements they contain are rendered and laid out; and how multiple indexes are displayed, added, and removed. A list of available styles is detailed in Table 7.1.

NameDescriptionMulti-Index?Add/Remove Index?
defaultGroups are unstyled by default—they render elements as flat fields like a traditional form. Only the first index of elements is rendered.
N
N
accordionStyled as a ‘stacked’ group with a header that toggles the body associated with that index. When collapsed, only the header is visible for that index. The default styling indicates the collapsed status using an arrow in the header.
Y
N
collapsetableRenders element label in the leftmost column like ‘sidetable’. Indexes are groups of rows delimited by headings, which collapse the respective group of rows when clicked.
Y
Add
sidetableRenders elements as rows with label in the leftmost column rather than the top row. Each index is rendered as a column.
Y
Add
stackedGroups respective indexes of elements such that one set of indexes appears atop of another set, much like separate groups are placed.
Y
N
tabbedblockEach group is rendered as a block, with each index rendered as a tab to the right of it. Clicking a tab toggles the body content to the associated index. Elements are rendered within the box.
Y
N
tabbedLike ‘default’, but each index has a tab at the top of the group. Clicking a tab toggles the body content to the associated index.
Y
Y
tableA vanilla table with elements as columns, their labels across the top row. Each index is rendered in its own row.
Y
Y

Table 7.1: Group styles and index support


Footnotes

(17)

Some group styles still use jQuery; they should be modified to use modern formatters and Liza DOM abstractions (see src/ui/field and src/ui/styler).


Next: , Up: Program UI   [Contents][Index]