mirror of
https://github.com/phranck/TUIkit.git
synced 2026-06-20 09:54:37 +00:00
phranck
2232fefc44
- Add StatusBar.bordered style with theme colors and block appearance support - Pass current environment to StatusBar rendering for dynamic theme updates - Implement ButtonRow right-alignment with calculated left padding - Add buttonBackground theme color for lighter buttons in block appearance - Remove button borders and focus indicators for primary buttons in block appearance - Add theme background colors to container body and button content - Adjust theme colors: foregroundSecondary, statusBarForeground, buttonBackground - Update Amber theme header/footer background to #1E110E - Refactor Overlays demo to use real Button components with VStack layout - Center alert modal with HStack and Spacer elements
64 lines
1.9 KiB
Swift
64 lines
1.9 KiB
Swift
//
|
|
// OverlaysPage.swift
|
|
// TUIKitExample
|
|
//
|
|
// Demonstrates overlay and modal capabilities.
|
|
//
|
|
|
|
import TUIKit
|
|
|
|
/// Overlays and modals demo page.
|
|
///
|
|
/// Shows the overlay system including:
|
|
/// - `.overlay()` modifier
|
|
/// - `.dimmed()` modifier
|
|
/// - `.modal()` helper
|
|
/// - Note: The status bar is NOT dimmed by modals!
|
|
struct OverlaysPage: View {
|
|
var body: some View {
|
|
// Background content with modal overlay
|
|
backgroundContent
|
|
.dimmed()
|
|
.overlay {
|
|
HStack {
|
|
Spacer()
|
|
Alert(
|
|
title: "Alert",
|
|
message: "This alert overlays dimmed content!",
|
|
// borderStyle uses appearance default
|
|
borderColor: .theme.border,
|
|
titleColor: .theme.accent
|
|
) {
|
|
VStack(spacing: 1) {
|
|
Button("OK", style: .primary) { }
|
|
Button("Cancel") { }
|
|
}
|
|
}
|
|
.frame(width: 55)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
|
|
var backgroundContent: some View {
|
|
VStack(spacing: 1) {
|
|
HeaderView(title: "Overlays & Modals Demo")
|
|
|
|
DemoSection("Overlay System Features") {
|
|
Text("• .overlay() modifier - layer content on top")
|
|
Text("• .dimmed() modifier - reduce visual emphasis")
|
|
Text("• .modal() helper - combines dimmed + centered overlay")
|
|
}
|
|
|
|
DemoSection("This page demonstrates a modal overlay") {
|
|
Text("The content behind is dimmed automatically")
|
|
Text("Note: The status bar is NOT dimmed!")
|
|
.bold()
|
|
.foregroundColor(.theme.accent)
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|