IndigoUI Style Guide: Difference between revisions
(→Rules) |
|||
Line 14: | Line 14: | ||
The spacing of widgets within a <code>FormWidgets</code> (button group) is 4px. | The spacing of widgets within a <code>FormWidgets</code> (button group) is 4px. | ||
The spacing between 2 <code>FormWidgets</code> is 16px. There are several ways to define the spacing. If the two <code>FormWidgets</code> are within a layout, you can set the layoutSpacing property to 16. If that is not possible, you can set a horizontal spacer with a fixed width between the two <code>FormWidgets</code>. The width of the spacer depends on the <code>layoutSpacing</code> of the parent layout. With a <code>layoutSpacing</code> of 4, a horizontal spacer of 12px is required (4 + 12 = 16). | The spacing between 2 <code>FormWidgets</code> is 16px. There are several ways to define the spacing. If the two <code>FormWidgets</code> are within a layout, you can set the layoutSpacing property to 16. If that is not possible, you can set a horizontal spacer with a fixed width between the two <code>FormWidgets</code>. The width of the spacer depends on the <code>layoutSpacing</code> of the parent layout. With a <code>layoutSpacing</code> of 4, a horizontal spacer of 12px is required (4 + 12 = 16). Set <code>sizeType = Fixed</code> and set a width of 12. | ||
<div style="display: inline; float: left;"> | <div style="display: inline; float: left;"> | ||
[[File:Spacing - widget margin.png|alt=widget spacing inside a container widget|Widget spacing inside a container widget]] [[File:Spacing - layout.png|alt=General UI spacing|General UI spacing]] [[File:Spacing - group space.png|alt=Widget group spacing|Widget group spacing]] | [[File:Spacing - widget margin.png|alt=widget spacing inside a container widget|Widget spacing inside a container widget]] [[File:Spacing - layout.png|alt=General UI spacing|General UI spacing]] [[File:Spacing - group space.png|alt=Widget group spacing|Widget group spacing]] | ||
</div> | </div> |
Revision as of 15:15, 2 February 2025
UI Spacing
Grid
The UI spacing grid follows a rule of 4, 8, 16, 24, 32 etc. In example, button group spacing is 4, widget margin is 8, icon size is 16.
Rules
The standard spacing between layout blocks within a container is 8px.
The inner spacing of a container is always 8px (Qt default is 9). The spacing can either be set in the layout of the container, or in the layout of the widget that is added to the container.
The spacing of widgets within a FormWidgets
(button group) is 4px.
The spacing between 2 FormWidgets
is 16px. There are several ways to define the spacing. If the two FormWidgets
are within a layout, you can set the layoutSpacing property to 16. If that is not possible, you can set a horizontal spacer with a fixed width between the two FormWidgets
. The width of the spacer depends on the layoutSpacing
of the parent layout. With a layoutSpacing
of 4, a horizontal spacer of 12px is required (4 + 12 = 16). Set sizeType = Fixed
and set a width of 12.