demo: fix header (no sticky), make Display None interactive, add opacity note
This commit is contained in:
@@ -18,6 +18,7 @@
|
|||||||
@global $alert = 70.0
|
@global $alert = 70.0
|
||||||
@global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"]
|
@global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"]
|
||||||
@global $notif = true
|
@global $notif = true
|
||||||
|
@global $show = true
|
||||||
|
|
||||||
@singleton AppInfo {
|
@singleton AppInfo {
|
||||||
build = "2026-07-22",
|
build = "2026-07-22",
|
||||||
@@ -191,6 +192,7 @@ Window(title=$title) {
|
|||||||
Panel(class="op-85") { Text "85%" }
|
Panel(class="op-85") { Text "85%" }
|
||||||
Panel(class="op-100") { Text "100%" }
|
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
|
// Panel: Scroll + Sticky
|
||||||
@@ -221,13 +223,18 @@ Window(title=$title) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Panel: Display None
|
// Panel: Display None (interactive toggle via @if)
|
||||||
Panel(class="card") {
|
Panel(class="card") {
|
||||||
Header "Display: None"
|
Header "Display: None"
|
||||||
Panel(class="demo-row") {
|
Panel(class="demo-row") {
|
||||||
Panel(class="vis") { Text "Visible" }
|
Panel(class="vis") { Text "Always" }
|
||||||
Panel(class="hid") { Text "Hidden" }
|
@if $show {
|
||||||
Panel(class="vis") { Text "Still Here" }
|
Panel(class="vis") { Text "Toggled" }
|
||||||
|
}
|
||||||
|
Panel(class="vis") { Text "Always" }
|
||||||
|
}
|
||||||
|
Button(label="Toggle Center Element", class="btn-outline") {
|
||||||
|
@on click { !rhei: { show = !show; } }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -46,13 +46,10 @@ Panel {
|
|||||||
|
|
||||||
// ── Header ───────────────────────────────────────────────────────────────────
|
// ── Header ───────────────────────────────────────────────────────────────────
|
||||||
.header {
|
.header {
|
||||||
position: sticky
|
|
||||||
top: 0px
|
|
||||||
background: $card
|
background: $card
|
||||||
padding: 8px 20px
|
padding: 8px 20px
|
||||||
border-bottom: 1px solid $border
|
border-bottom: 1px solid $border
|
||||||
width: fill
|
width: fill
|
||||||
z-index: 100
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-inner {
|
.header-inner {
|
||||||
@@ -86,10 +83,6 @@ Panel {
|
|||||||
@use card-base
|
@use card-base
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
border-color: $accent
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Header Component ─────────────────────────────────────────────────────────
|
// ── Header Component ─────────────────────────────────────────────────────────
|
||||||
Header {
|
Header {
|
||||||
color: $accent
|
color: $accent
|
||||||
|
|||||||
Reference in New Issue
Block a user