Separator

A layout leaf that draws a line: a horizontal rule in a column, a thin vertical divider in a row (give the vertical form an explicit width and height). For flexible empty space between siblings, see spacer.

Separators rendered by the engine (dark theme) — a horizontal rule in a column and thin vertical dividers in a row

Markup

<column gap="12" width="300">
  <text>Native SDK</text>
  <text foreground="text_muted">A component catalog rendered by the engine.</text>
  <separator></separator>
  <row gap="12" cross="center" height="20">
    <text>Docs</text>
    <separator width="1" height="16"></separator>
    <text>Source</text>
    <separator width="1" height="16"></separator>
    <text>Changelog</text>
  </row>
</column>

Zig builder

ui.column(.{ .gap = 12, .width = 300 }, .{
    ui.text(.{}, "Native SDK"),
    ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, "A component catalog rendered by the engine."),
    ui.separator(.{}),
    ui.row(.{ .gap = 12, .cross = .center, .height = 20 }, .{
        ui.text(.{}, "Docs"),
        ui.separator(.{ .width = 1, .height = 16 }),
        ui.text(.{}, "Source"),
        ui.separator(.{ .width = 1, .height = 16 }),
        ui.text(.{}, "Changelog"),
    }),
})

Attributes

Attribute	Description
`width`	Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width.
`height`	Definite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.