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 { Column {
spacing: 8 spacing: 8
StatusBaseInput { StatusInput {
placeholderText: "Placeholder" input.placeholderText: "Placeholder"
} }
StatusBaseInput { StatusInput {
placeholderText: "Disabled" input.placeholderText: "Disabled"
enabled: false input.enabled: false
} }
StatusBaseInput { StatusInput {
placeholderText: "Clearable" input.placeholderText: "Clearable"
clearable: true input.clearable: true
} }
StatusBaseInput { StatusInput {
placeholderText: "Invalid" input.placeholderText: "Invalid"
valid: false input.valid: false
} }
StatusBaseInput { StatusInput {
multiline: true label: "Label"
placeholderText: "Multiline" input.placeholderText: "Placeholder"
} }
StatusBaseInput { StatusInput {
multiline: true input.multiline: true
placeholderText: "Multiline with static height" input.placeholderText: "Multiline"
implicitHeight: 100
} }
StatusBaseInput { StatusInput {
multiline: true input.multiline: true
placeholderText: "Multiline with max/min" input.placeholderText: "Multiline with static height"
minimumHeight: 80 input.implicitHeight: 100
maximumHeight: 200 }
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 StatusCheckBox 0.1 StatusCheckBox.qml
StatusSlider 0.1 StatusSlider.qml StatusSlider 0.1 StatusSlider.qml
StatusBaseInput 0.1 StatusBaseInput.qml StatusBaseInput 0.1 StatusBaseInput.qml
StatusInput 0.1 StatusInput.qml
StatusPickerButton 0.1 StatusPickerButton.qml StatusPickerButton 0.1 StatusPickerButton.qml