Skip to content

UI.Frame

Name Mandatory Description Default Type
⬅️ Input The value that will be passed to the Contents shards of the frame. Any
Output ➡️ The output of this shard will be its input. Any
Contents No The UI contents. none NoneShard[Shard]
InnerMargin No The margin inside the frame, between the outline and the contents. none Float4
OuterMargin No The margin outside the frame. none Float4
Rounding No Rounding radiuses for the corners. none Float4
FillColor No The color filling the background of the frame. none ColorVar(Color)None
StrokeColor No The color for the frame outline. none ColorVar(Color)None
StrokeWidth No The width of the frame outline. none Float

Visually groups the contents together.

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
GFX.MainWindow(Contents: {
  ; Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  ; UI
  UI({
    UI.CentralPanel({
      UI.Frame(
        InnerMargin: @f4(10 10 10 10)
        OuterMargin: @f4(0 0 0 0)
        Rounding: @f4(5 5 5 5)
        FillColor: @color(50 50 21)
        StrokeColor: @color(250 250 32)
        StrokeWidth: 2.0
        Contents: {
          "Frame content" | UI.Label
        }
      )
    })
  })

  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})

[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 31 commandBuffers at release (0 released, 0 kept)
[warning] Context has 2 buffers at release (2 released, 2 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)