A panel

A panel is a side of the screen: a head with its title and actions, content in groups that scrolls, and an optional foot.

When to use

Use it for what stays open next to the work: the contents, the properties of what is selected, a search, the comments. A task that stops the work is a modal; a panel that slides over the page is a Drawer. For the properties of the selection, the InspectorFrame is a panel with this shape already.

Parts

• Panel with side for its width.
• A Toolbar in head, with the title, a line along its bottom and icon buttons at the end.
• The content, a Stack with gap 0 of SectionHeader groups. A group holds fields and switches, or, with flush, a List or a Tree that reaches the edges.
• A Block for text that is not in a group.
• A Footer in foot when the panel applies its changes at once.

Rules

• The content has no padding: lists and groups reach the edges and bring their own. Text and fields go in a group or a Block.
• Groups are apart by their own heads, never by a gap.
• The head and the foot keep their height; only the content scrolls.

Example

A panel