Resizable
Let people divide space between neighbouring panels.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn resizable_demo() -> Div {
div().class("demo-wide").h(200.0).child(
cn::resizable_group()
.horizontal()
.panel(
cn::resizable_panel()
.default_size(150.0)
.min_size(80.0)
.child(div().class("demo-resize-panel").child(text("Files"))),
)
.panel(
cn::resizable_panel()
.flex_grow()
.min_size(80.0)
.child(div().class("demo-resize-panel").child(text("Your workspace"))),
),
)
}
@layer components {
.cn-resizable-handle {
background: transparent;
}
.cn-resizable-line {
background: var(--border);
transition: background var(--duration-fast) var(--ease-state);
}
.cn-resizable-handle:hover > .cn-resizable-line,
.cn-resizable-handle[data-state="dragging"] > .cn-resizable-line {
background: var(--primary);
}
}
Usage and properties
Let people divide space between neighbouring panels. Apply CSS after the component layer to restyle the documented parts.
Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
panel | ResizablePanel | Construction | Files and preview |
default_size / min_size | f32 | Construction | 150 / 80 |
Keyboard and interaction
Drag the divider to resize the panels; this example demonstrates pointer resizing.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.cn-resizable.cn-resizable-handle.cn-resizable-line
Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
Panel sizes and limits are pixels. A flex_grow() panel takes the remaining
space, and the group inserts its handles between panels:
resizable_group().horizontal()
.panel(resizable_panel()
.default_size(200.0).min_size(100.0).max_size(400.0)
.child(text("Left panel")))
.panel(resizable_panel().flex_grow().child(text("Right panel")))
.on_resize(|sizes| {
let _ = sizes;
})
A vertical group uses the same panel builder:
resizable_group().vertical()
.panel(resizable_panel().default_size(150.0).child(text("Top panel")))
.panel(resizable_panel().flex_grow().child(text("Bottom panel")))
The .cn-resizable-handle contains .cn-resizable-line. Its hover and
data-state="dragging" rules control the line's appearance. There is no
standalone resizable_handle() builder.
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.