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 {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
StatusSlider 0.1 StatusSlider.qml
|
||||
StatusBaseInput 0.1 StatusBaseInput.qml
|
||||
StatusInput 0.1 StatusInput.qml
|
||||
StatusPickerButton 0.1 StatusPickerButton.qml
|
||||
|
|
Loading…
Reference in New Issue