wehub-resource-sync
39 lines
1.3 KiB
Plaintext
39 lines
1.3 KiB
Plaintext
import { ComponentPreview } from "@/components/component-preview";
|
|
import { AttrTable } from "@/components/attr-table";
|
|
|
|
# Resizable
|
|
|
|
A single panel with an engine-managed drag handle: `width` sets the initial width and the engine owns the drag from there — no fraction bookkeeping in the model. The drag resizes only the panel itself; neighboring widgets keep their frames. It is a stacking surface — no `gap`; put a row or column inside for flow. When the model should own the pane fraction, or two panes should reflow together as one divider moves, use [split](/components/split) instead.
|
|
|
|
<ComponentPreview name="resizable" alt="A resizable sidebar panel rendered by the engine" caption="a resizable panel — drag its right edge to resize it" />
|
|
|
|
## Markup
|
|
|
|
```html
|
|
<row grow="1">
|
|
<resizable width="260">
|
|
<column padding="12">
|
|
<text foreground="text_muted">Sidebar</text>
|
|
</column>
|
|
</resizable>
|
|
</row>
|
|
```
|
|
|
|
## Programmatic construction (Zig)
|
|
|
|
In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:
|
|
|
|
```zig
|
|
ui.row(.{ .grow = 1 }, .{
|
|
ui.el(.resizable, .{ .width = 260 }, .{
|
|
ui.column(.{ .padding = 12 }, .{
|
|
ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, "Sidebar"),
|
|
}),
|
|
}),
|
|
})
|
|
```
|
|
|
|
## Attributes
|
|
|
|
<AttrTable attrs={["width", "min-width"]} />
|