Skip to content

UI.AutoGrid

Name Mandatory Description Default Type
⬅️ Input The input of the shard, if any [Any]
Output ➡️ The resulting output of the shard [Any]
Contents No The UI contents to be generated and inserted in each column for each element in the given sequence. none NoneShard[Shard]
Striped No Whether to alternate a subtle background color to every other row. false BoolVar(Bool)None
MaxGridWidth No Maximum grid width. none FloatVar(Float)
ItemWidth No The width of each item. none FloatVar(Float)
ColumnSpacing No Spacing between columns. none FloatVar(Float)
RowSpacing No Spacing between rows. none FloatVar(Float)
MaxTileHeight No Maximum height of each tile for viewport culling. none FloatVar(Float)

Works like UI.Grid, but given a Sequence, it will, it each object in the Sequence, execute the Shard provided in its Contents and automatically wrap the generated contents when it exceeds the grid's width.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@wire(ui-wire {
  UI.Window(
    Title: "Greetings"
    Contents: {
      [
        "Hello" "World" "Please" "Sort" "Me"
        "Hello" "World" "Please" "Sort" "Me"
      ]
      UI.AutoGrid(
        ItemWidth: 300.0
        MaxGridWidth: 700.0 ; Since item size is 300, max grid width is 700, only two items allowed per row
        Contents: {
          UI.Button(Label: "Test" Action: {
            Log ; Logs the given sequence element
          })
        }
      )
      ; | Log ; Passthrough
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@wire(ui-wire {
  UI.Window(
    Title: "Greetings"
    Contents: {
      [
        "Hello" "World" "Please" "Sort" "Me"
        "Hello" "World" "Please" "Sort" "Me"
      ]
      UI.AutoGrid(
        ItemWidth: 300.0
        MaxGridWidth: 700.0
        ColumnSpacing: 50.0 ; Spacing between columns, not included in MaxGridWidth
        RowSpacing: 30.0 ; Spacing between rows
        Contents: {
          UI.Button(Label: "Test" Action: {
            Log
          })
        }
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@wire(ui-wire {
  UI.Window(
    Title: "Greetings"
    Width: 200 ; Makes window resizable but with a minimum width of 200, allowing resizing window to manipulate number of rows in autogrid
    Contents: {
      [
        "Hello" "World" "Please" "Sort" "Me"
        "Hello" 2 "Please" 4 5.5
      ]
      UI.AutoGrid(
        ItemWidth: 300.0
        Contents: {
          UI.Button(Label: "Test" Action: {
            Log ; Logs the given sequence element
          })
        }
      )
      ; | Log ; Passthrough
    }
  )
} Looped: true)

{ui-behavior: ui-wire}