diff --git a/examples/demo/app.gltm b/examples/demo/app.gltm index ccd879c..50f6178 100644 --- a/examples/demo/app.gltm +++ b/examples/demo/app.gltm @@ -18,6 +18,7 @@ @global $alert = 70.0 @global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"] @global $notif = true +@global $show = true @singleton AppInfo { build = "2026-07-22", @@ -191,6 +192,7 @@ Window(title=$title) { Panel(class="op-85") { Text "85%" } Panel(class="op-100") { Text "100%" } } + Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text" } // Panel: Scroll + Sticky @@ -221,13 +223,18 @@ Window(title=$title) { } } - // Panel: Display None + // Panel: Display None (interactive toggle via @if) Panel(class="card") { Header "Display: None" Panel(class="demo-row") { - Panel(class="vis") { Text "Visible" } - Panel(class="hid") { Text "Hidden" } - Panel(class="vis") { Text "Still Here" } + Panel(class="vis") { Text "Always" } + @if $show { + Panel(class="vis") { Text "Toggled" } + } + Panel(class="vis") { Text "Always" } + } + Button(label="Toggle Center Element", class="btn-outline") { + @on click { !rhei: { show = !show; } } } } diff --git a/examples/demo/styles.glts b/examples/demo/styles.glts index dac88b9..f88ac8c 100644 --- a/examples/demo/styles.glts +++ b/examples/demo/styles.glts @@ -46,13 +46,10 @@ Panel { // ── Header ─────────────────────────────────────────────────────────────────── .header { - position: sticky - top: 0px background: $card padding: 8px 20px border-bottom: 1px solid $border width: fill - z-index: 100 } .header-inner { @@ -86,10 +83,6 @@ Panel { @use card-base } -.card:hover { - border-color: $accent -} - // ── Header Component ───────────────────────────────────────────────────────── Header { color: $accent