demo: restructure log header outside scrollable (always visible), remove sticky references, add Iced limitation note

This commit is contained in:
Glint Dev
2026-07-22 14:48:53 +03:00
parent 075533db6a
commit 415de4d6e6
2 changed files with 12 additions and 6 deletions

View File

@@ -2,8 +2,10 @@
// Glint — Full Feature Demonstration // Glint — Full Feature Demonstration
// ============================================================================ // ============================================================================
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each, // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
// @on click, variable binding, positioning (fixed, absolute, sticky), // @on click, variable binding, positioning (fixed, absolute),
// typography, box model, opacity, overflow, grid layout, style inheritance. // typography, box model, opacity, overflow, grid layout, style inheritance.
// Note: true CSS position:sticky requires scroll-tracking not exposed by Iced.
// "Always-visible header above scrollable content" pattern used instead.
// ============================================================================ // ============================================================================
@version 1 @version 1
@@ -64,7 +66,7 @@
// ── 3. Layout ──────────────────────────────────────────────────────────────── // ── 3. Layout ────────────────────────────────────────────────────────────────
Window(title=$title) { Window(title=$title) {
// ── Header (stays at top, body scrolls beneath) ───────────────────────── // ── Header (always visible; body scrolls beneath — closest to sticky in Iced)
Panel(class="header") { Panel(class="header") {
Panel(class="header-inner") { Panel(class="header-inner") {
Icon "◇" Icon "◇"
@@ -197,13 +199,13 @@ Window(title=$title) {
Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text" Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
} }
// Panel: Scroll + Sticky // Panel: Scrollable Log with always-visible header
Panel(class="card") { Panel(class="card") {
Header "Scrollable Log" Header "Scrollable Log"
Panel(class="log-header") {
Text "Event Log (always visible — above scrollable area)"
}
Panel(class="log") { Panel(class="log") {
Panel(class="log-header") {
Text "Event Log (sticky header)"
}
Text "Init: system boot" Text "Init: system boot"
Text "Info: all modules OK" Text "Info: all modules OK"
Text "Warn: CPU at $cpu%" Text "Warn: CPU at $cpu%"

View File

@@ -379,6 +379,10 @@ Slider {
width: fill width: fill
} }
// Note: position:sticky is not supported by Iced. "Always visible header above
// scrollable content" is the working pattern.
// ═══════════════════════════════════════════════════════════════════════════════
// ── Style Inheritance ──────────────────────────────────────────────────────── // ── Style Inheritance ────────────────────────────────────────────────────────
.inherit { .inherit {
background: #f0ece6 background: #f0ece6