Sizing with slots

A bloom.Row places children left to right, and a bloom.Column places them top to bottom. How much of the row or column each child gets is decided by the slot you wrap it in. The child doesn't choose; whoever builds the layout does. That's why the same component can be a fixed-width sidebar in one screen and fill the space in another.

bloom.Row(
	bloom.Fixed(10, nav),   // exactly 10 columns
	toolbar,                // no slot: its natural width
	bloom.Fill(editor),     // a share of what's left
	bloom.Grow(2, preview), // two shares of what's left
)

┌────────┐┌────┐┌────────────┐┌────────────────────────────┐
│fixed   ││auto││fill        ││grow 2                      │
└────────┘└────┘└────────────┘└────────────────────────────┘

Choose a slotCopy Anchor Link

"Space left over" is what remains after the Fixed, Auto, and Percent slots, and the gaps, are placed. Fill is the same as Grow(1, c).

A child's natural size is the space its content needs: the width of its longest line and its number of lines for text, plus the border and padding for a box. See How layout works for how bloom measures a child, and how a component can report its own size.

Set a minimum and a maximumCopy Anchor Link

Min and Max clamp a slot on the row or column's direction:

bloom.Row(
	bloom.Fill(sidebar).Max(32), // grows, but never past 32 columns
	bloom.Fill(editor).Min(40),  // shrinks, but never below 40 columns
)

The minimum is zero unless you set one, so without Min a slot can be squeezed to nothing. When the minimums don't all fit, see Responsive layouts for dropping slots with Collapsible.

Leave empty spaceCopy Anchor Link

• bloom.Fixed(n, nil) is n empty cells, such as a blank line in a column.
• bloom.Space() is empty space that grows, which pushes the children after it to the far end.

bloom.Row(bloom.Text("left"), bloom.Space(), bloom.Text("right"))

left                     right

To put the same space between every pair of children, use Gap, described in Text, boxes, and alignment.

Slots in a columnCopy Anchor Link

Everything above applies to columns too, with heights instead of widths. A common screen shape is a header and a status bar at their natural height, and the content filling the middle:

bloom.Column(
	header,
	bloom.Fill(content),
	statusbar,
)

Give a slot an IDCopy Anchor Link

Slots are where the other per-child options live: ID for focus and lookups, On for mouse handlers, Focusable and Scope for focus, Align for the cross axis, and Animate for layout animation.

bloom.Fixed(24, sidebar).ID(paneSidebar).Collapsible(1)

RelatedCopy Anchor Link

• SlotNode API reference
• Responsive layouts
• How layout works