Skip to content

UI.Grid

Name Mandatory Description Default Type
⬅️ Input The value that will be passed to the Contents shards of the grid. Any
Output ➡️ The output of this shard will be its input. Any
Contents No The UI contents. none NoneShard[Shard]
Striped No Whether to alternate a subtle background color to every other row. false BoolVar(Bool)None
NumColumns No The number of columns in the grid. Setting this will allow the last column to expand to take up the rest of the space of the parent UI. none IntVar(Int)None
MinWidth No Minimum column width. none FloatVar(Float)
MaxWidth No Maximum column width. none FloatVar(Float)
Spacing No Spacing between columns/rows. none Float2Var(Float2)

Simple grid layout.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@wire(ui-wire {
  UI.Window(
    Title: "UI Grid"
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 700
    Height: 400
    Contents: {
      {
        UI.Grid(
          Striped: true
          Contents:
          {"Col 1" | UI.Label
            "Col 2" | UI.Label
            "Col 3" | UI.Label
            UI.NextRow
            "Hello" | UI.Label
            "shards" | UI.Label
            "!" | UI.Label
            UI.NextRow
            "Lorem ipsum dolor sit amet" | UI.Label
            "consectetur adipiscing elit" | UI.Label
            "sed do eiusmod tempor" | UI.Label
          }
        )
      }
    }
  )
} Looped: true)

{ui-behavior: ui-wire}