diff --git a/modules/storybook/Fields.qml b/modules/storybook/Fields.qml index ff6c1ae..1c76a2f 100644 --- a/modules/storybook/Fields.qml +++ b/modules/storybook/Fields.qml @@ -1,21 +1,33 @@ import qs.components import qs.config import QtQuick -import QtQuick.Controls import QtQuick.Layouts -GridLayout { - flow: GridLayout.TopToBottom - columns: 2 - rows: 10 +ColumnLayout { + + spacing: Styling.layout.spacing.xl + + ColumnLayout { + StyledText { + text: "Button" + font.pixelSize: 18 + } + StyledPane { + StyledButton { + text: "Button" + } + } + } ColumnLayout { StyledText { text: "Icon Button" font.pixelSize: 18 } - StyledIconButton { - text: Styling.lucide.icons.square + StyledPane { + StyledIconButton { + text: Styling.lucide.icons.square + } } } @@ -24,11 +36,18 @@ GridLayout { text: "Slider" font.pixelSize: 18 } - StyledSlider { - id: slider - from: 0 - to: 100 - value: 50 + StyledPane { + StyledSlider { + id: slider + from: 0 + to: 100 + value: 50 + } } } + + component FieldElement: QtObject { + property string title + property Component component + } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 729a49c..0c0851f 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -27,15 +27,17 @@ StyledPanelWindow { } } - ColumnLayout { + Item { id: layout - anchors.fill: parent - spacing: 0 StyledTabBar { id: tabs - Layout.fillWidth: true + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: stack.top + StyledTabButton { text: "Fields" } @@ -48,20 +50,26 @@ StyledPanelWindow { } StackLayout { + id: stack + + anchors.top: tabs.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + currentIndex: tabs.currentIndex ScrollView { - Layout.maximumHeight: 400 + Layout.fillWidth: true padding: 36 Fields {} } ScrollView { - Layout.maximumHeight: 400 padding: 36 Selectors {} } ScrollView { - Layout.maximumHeight: 400 + Layout.fillWidth: true padding: 36 Components {} }