53 lines
1.7 KiB
Plaintext
53 lines
1.7 KiB
Plaintext
// Page layout component - Fixed header with scrollable content area
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
|
|
export component PageLayout inherits Rectangle {
|
|
in property <string> title;
|
|
in property <bool> show-actions: false;
|
|
|
|
@children
|
|
|
|
background: Theme.colors.background;
|
|
|
|
VerticalLayout {
|
|
// Fixed header
|
|
header := Rectangle {
|
|
height: 48px;
|
|
background: Theme.colors.background;
|
|
|
|
HorizontalLayout {
|
|
padding-left: SpacingSystem.spacing.s4;
|
|
padding-right: SpacingSystem.spacing.s4;
|
|
padding-top: SpacingSystem.spacing.s3;
|
|
padding-bottom: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
alignment: space-between;
|
|
|
|
Text {
|
|
text: root.title;
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
// Right side actions area (inserted via @children)
|
|
if root.show-actions: HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollable content area
|
|
Flickable {
|
|
viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;
|
|
|
|
content-layout := VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
}
|
|
}
|
|
}
|
|
}
|