mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 22:04:56 +00:00
JohnDoe6345789
58a94d0489
feat(styles): create global styles entry point and organize global styles feat(styles): implement base HTML element styles and utility classes for flexbox feat(styles): establish layout, position, spacing, and text utility classes feat(styles): introduce mixins for animations, cards, dialogs, flexbox, grid, and responsive design test(quick_guide): add component and metadata validation tests for quick_guide package test(ui_level6): implement metadata validation tests for ui_level6 package
46 lines
1.2 KiB
QML
46 lines
1.2 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
/**
|
|
* FlexCol.qml - Vertical flex container (mirrors SCSS .flex, .flex-col utilities)
|
|
* Simplified ColumnLayout with common flex patterns
|
|
*
|
|
* Usage:
|
|
* FlexCol {
|
|
* Text { text: "Top" }
|
|
* Text { text: "Bottom" }
|
|
* }
|
|
*
|
|
* FlexCol {
|
|
* gap: "lg"
|
|
* align: "center"
|
|
* ...
|
|
* }
|
|
*/
|
|
ColumnLayout {
|
|
id: root
|
|
|
|
// Public properties
|
|
property string justify: "start" // start, center, end, space-between
|
|
property string align: "stretch" // start, center, end, stretch
|
|
property string gap: "sm" // none, xs, sm, md, lg, xl, or number
|
|
property bool fill: false // Fill parent height
|
|
|
|
// Apply gap
|
|
spacing: {
|
|
switch (gap) {
|
|
case "none": return 0
|
|
case "xs": return StyleVariables.spacingXs
|
|
case "sm": return StyleVariables.spacingSm
|
|
case "md": return StyleVariables.spacingMd
|
|
case "lg": return StyleVariables.spacingLg
|
|
case "xl": return StyleVariables.spacingXl
|
|
default: return parseInt(gap) || StyleVariables.spacingSm
|
|
}
|
|
}
|
|
|
|
// Fill width by default (column behavior)
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: fill
|
|
}
|