demo: header as always-visible top bar with scrollable body beneath (closest to sticky in Iced)

This commit is contained in:
Glint Dev
2026-07-22 14:44:28 +03:00
parent 37a0ea47be
commit 075533db6a
2 changed files with 11 additions and 1 deletions

View File

@@ -64,7 +64,7 @@
// ── 3. Layout ──────────────────────────────────────────────────────────────── // ── 3. Layout ────────────────────────────────────────────────────────────────
Window(title=$title) { Window(title=$title) {
// ── Sticky Header ──────────────────────────────────────────────────────── // ── Header (stays at top, body scrolls beneath) ──────────────────────────
Panel(class="header") { Panel(class="header") {
Panel(class="header-inner") { Panel(class="header-inner") {
Icon "◇" Icon "◇"
@@ -74,6 +74,8 @@ Window(title=$title) {
} }
} }
// ── Scrollable body ─────────────────────────────────────────────────────
Panel(class="body-scroll") {
Panel(class="body") { Panel(class="body") {
// ── LEFT COLUMN ────────────────────────────────────────────────────── // ── LEFT COLUMN ──────────────────────────────────────────────────────
@@ -249,6 +251,7 @@ Window(title=$title) {
} }
} }
} }
}
// ── Fixed Toast ────────────────────────────────────────────────────────── // ── Fixed Toast ──────────────────────────────────────────────────────────
@if $notif { @if $notif {

View File

@@ -60,6 +60,13 @@ Panel {
} }
// ── Layout ─────────────────────────────────────────────────────────────────── // ── Layout ───────────────────────────────────────────────────────────────────
.body-scroll {
overflow-y: auto
flex-grow: 1
padding: 0px
gap: 0px
}
.body { .body {
direction: horizontal direction: horizontal
padding: 12px padding: 12px