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:
parent
ab3035930b
commit
646c00bd3a
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue