1 - Section header

2 - Subsection (optional)

3 - Label (optional)

4 - Preview

As described in Spacing & Layout, the extension's component tab space is divided into columns according to a grid system, which can be used to size and place elements.

By default, the system will auto size your buttons such that the images will show at their native resolution. Odds are, your images are not sized exactly to result in a button size that fits the column grid, so explicit hints should be given to the system to override this behaviour. UIHint can be used for this purpose:

Sections are containers used to organize the content of a library. Nested sections are not allowed, please consider the use of Subsections instead.

Title without top line

Section headers without a top line are only used when it is the first section within a toolbox.

Title with top line

Section headers with a top line are always used for every section that is not the first within a toolbox component tab.

Each section can optionally have up to 3 function buttons, and each button must be 24x24 pixels in size. These are recommended for placing help buttons and section specific settings.

Code Example

To use this feature, first create a section button:

Then add it to the section's limb:

With product and tool buttons

This applies to other components under section header titles as well such as toggles, dropdowns, checkboxes, etc.

Note: The 16px space includes the top line of the next section.

Subsections are introduced to provide an additional level of nesting to help organize the contents within a Section in a more logical manner. Nested sections are not allowed.

To use these, just add a SubSectionLimb as a parent to your existing SnapperLimbs.

Title

With product and tool buttons

Multiple subsections within 1 section

Subsection Labels are an additional level below Subsections for further organizing the contents.

With product and tool buttons

With input fields