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)None
ItemWidth No The width of each item. none FloatVar(Float)None
ColumnSpacing No Spacing between columns. none FloatVar(Float)None
RowSpacing No Spacing between rows. none FloatVar(Float)None
MaxTileHeight No Maximum height of each tile for viewport culling. none FloatVar(Float)None

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
24
25
26
27
28
29
30
31
32
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.Window(
        Title: "Greetings"
        MinWidth: 200.0 // 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
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)


[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)
 

 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
32
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      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
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)


[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)
 

 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
32
33
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      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
              })
            }
          ) 
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)


[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)