portico/Sources/Example/BreakpointDemo.swift

46 lines
1.5 KiB
Swift

import Adw
import Portico
/// Demonstrates breakpoint conditions, typed setters, and apply handlers.
struct BreakpointDemoPage: View {
@State private var isCompact = false
@State private var appliedMessage = "No manual breakpoint applied"
@State private var currentBreakpoint: Breakpoint?
@WidgetRef private var carousel: Adw.Carousel?
var body: some View {
BreakpointBin {
VStack(spacing: 12) {
Label("Breakpoint demo")
.title1()
Label { isCompact ? "Compact layout" : "Wide layout" }
Label { appliedMessage }
.dimmed()
Carousel {
Label("Carousel content")
}
.ref(_carousel)
.hexpand(true)
.vexpand(true)
}
.margin(24)
.hexpand(true)
.vexpand(true)
}
.breakpoint("max-width: 700px", isActive: $isCompact)
.breakpoint(.maxWidth(500)) {
Setter(_carousel, "spacing", double: 0)
}
.breakpoint("max-width: 400px") { configuration in
configuration.onApply {
appliedMessage = "Manual breakpoint applied"
}
configuration.onUnapply {
appliedMessage = "Manual breakpoint unapplied"
}
}
.currentBreakpoint($currentBreakpoint)
.hexpand(true)
.vexpand(true)
}
}