mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-29 00:05:01 +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
71 lines
2.2 KiB
QML
71 lines
2.2 KiB
QML
import QtQuick
|
|
|
|
/**
|
|
* CDivider.qml - Divider/separator component (mirrors _divider.scss)
|
|
* Horizontal or vertical line separator
|
|
*
|
|
* Usage:
|
|
* CDivider {} // Horizontal divider
|
|
* CDivider { orientation: "vertical" } // Vertical divider
|
|
* CDivider { text: "OR" } // Divider with text
|
|
*/
|
|
Item {
|
|
id: root
|
|
|
|
// Public properties
|
|
property string orientation: "horizontal" // horizontal, vertical
|
|
property string text: ""
|
|
property string variant: "fullWidth" // fullWidth, inset, middle
|
|
property int inset: StyleVariables.spacingLg
|
|
|
|
// Size
|
|
implicitWidth: orientation === "horizontal" ? 200 : 1
|
|
implicitHeight: orientation === "horizontal" ? (text ? 24 : 1) : 200
|
|
|
|
// Horizontal divider
|
|
Row {
|
|
visible: root.orientation === "horizontal"
|
|
anchors.fill: parent
|
|
anchors.leftMargin: root.variant === "inset" ? root.inset : (root.variant === "middle" ? root.inset : 0)
|
|
anchors.rightMargin: root.variant === "middle" ? root.inset : 0
|
|
spacing: root.text ? StyleVariables.spacingMd : 0
|
|
|
|
// Left line
|
|
Rectangle {
|
|
width: root.text ? (parent.width - textLabel.width - StyleVariables.spacingMd * 2) / 2 : parent.width
|
|
height: 1
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.divider
|
|
}
|
|
|
|
// Text label
|
|
Text {
|
|
id: textLabel
|
|
visible: root.text
|
|
text: root.text
|
|
font.pixelSize: StyleVariables.fontSizeXs
|
|
font.weight: Font.Medium
|
|
color: Theme.textSecondary
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
|
|
// Right line
|
|
Rectangle {
|
|
visible: root.text
|
|
width: (parent.width - textLabel.width - StyleVariables.spacingMd * 2) / 2
|
|
height: 1
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.divider
|
|
}
|
|
}
|
|
|
|
// Vertical divider
|
|
Rectangle {
|
|
visible: root.orientation === "vertical"
|
|
width: 1
|
|
height: parent.height
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.divider
|
|
}
|
|
}
|