columns

zng_wgt_grid

Function columns 

Source 
pub fn columns(wgt: &mut WidgetBuilding, columns: impl IntoUiNode)
Expand description

B Column definitions.

Columns are defined by widgets, the column widget width defines the width of cells assigned to the column, the Column! widget is recommended, but you can use any widget to define a column. The column widget is rendered as the background of the column region, behind cells and row backgrounds.

§Layout Modes

The grid uses the WIDGET_SIZE value to select one of three layout modes for columns:

  • Default, used for columns that do not set width or set it to Length::Default.
  • Exact, used for columns that set the width to an unit that is exact or only depends on the grid context.
  • Leftover, used for columns that set width to a lft value.

The column (and row) measure follows these steps:

1 - All Exact column widgets are measured, their final width defines the column width. 2 - All Default sized column widgets are measured twice to find its min and max widths. 3 - All cell widgets with span 1 in Default columns are measured to find the widest cell width. That defines the column width. 4 - All Leftover columns receive the proportional leftover grid width for each.

So given the columns 200 | 1.lft() | 1.lft() and grid width of 1000 with spacing 5 the final widths are 200 | 395 | 395, for 200 + 5 + 395 + 5 + 395 = 1000.

§Overflow Recovery

In case the columns width overflows and all rows are Default height and some columns are Default width these recovery steps are taken:

1 - All cell widgets with span 1 in Default columns are measured to find the minimum width they can wrap down too. 2 - All Default columns are sized to the minimum width plus the extra space now available, proportionally divided. 3 - All cells widgets affected are measured again to define the row heights.

The proportion of each Default is the difference between the previous measured width with the new minimum, this is very similar to the CSS table layout, except the previous measured width is used instead of another measure pass to find the cells maximum width.

§Notes

Note that the column widget is not the parent of the cells that match it. Properties like padding and align only affect the column visual, not the cells, similarly contextual properties like text_color don’t affect the cells.

Note that the Default layout mode scales with the cell count, the other modes scale with the column count. This is fine for small grids (<100 cells) or for simple cell widgets, but for larger grids you should really consider using an Exact width or Leftover proportion, specially if the grid width is bounded.

§Mixin Property

This property is a mixin, it modifies the widget builder during build, it does not produce a standalone UI node.