feat(Controls): introduce `StatusInput`

`StatusInput` is a wrapper around `StatusBaseInput` to provide additional
component composition for labels, error messages and alike

Closes #288
This commit is contained in:
Pascal Precht 2021-07-23 12:36:45 +02:00 committed by Pascal Precht
parent ab3035930b
commit 646c00bd3a
3 changed files with 71 additions and 23 deletions

View File

@ -10,40 +10,45 @@ import Sandbox 0.1
Column {
spacing: 8
StatusBaseInput {
placeholderText: "Placeholder"
StatusInput {
input.placeholderText: "Placeholder"
}
StatusBaseInput {
placeholderText: "Disabled"
enabled: false
StatusInput {
input.placeholderText: "Disabled"
input.enabled: false
}
StatusBaseInput {
placeholderText: "Clearable"
clearable: true
StatusInput {
input.placeholderText: "Clearable"
input.clearable: true
}
StatusBaseInput {
placeholderText: "Invalid"
valid: false
StatusInput {
input.placeholderText: "Invalid"
input.valid: false
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline"
StatusInput {
label: "Label"
input.placeholderText: "Placeholder"
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline with static height"
implicitHeight: 100
StatusInput {
input.multiline: true
input.placeholderText: "Multiline"
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline with max/min"
minimumHeight: 80
maximumHeight: 200
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with static height"
input.implicitHeight: 100
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with max/min"
input.minimumHeight: 80
input.maximumHeight: 200
}
}

View File

@ -0,0 +1,42 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Item {
id: root
implicitWidth: 480
height: label.anchors.topMargin +
label.height +
statusBaseInput.anchors.topMargin +
statusBaseInput.height + 8
property alias input: statusBaseInput
property string label: ""
StatusBaseText {
id: label
height: visible ? implicitHeight : 0
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: visible ? 8 : 0
anchors.leftMargin: 16
visible: !!root.label
text: root.label
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseInput {
id: statusBaseInput
anchors.top: label.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 8
anchors.leftMargin: 16
anchors.rightMargin: 16
}
}

View File

@ -15,4 +15,5 @@ StatusRadioButton 0.1 StatusRadioButton.qml
StatusCheckBox 0.1 StatusCheckBox.qml
StatusSlider 0.1 StatusSlider.qml
StatusBaseInput 0.1 StatusBaseInput.qml
StatusInput 0.1 StatusInput.qml
StatusPickerButton 0.1 StatusPickerButton.qml