feat(StatusIconTextButton): Created new control
It defines a button composed with an icon and plain text. It has been documented and added to sandbox.
This commit is contained in:
parent
016a0eac46
commit
c98f144fd8
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
|
@ -31,6 +31,7 @@
|
||||||
\li \l{StatusSlider}
|
\li \l{StatusSlider}
|
||||||
\li \l{StatusSelect}
|
\li \l{StatusSelect}
|
||||||
\li \l{StatusBaseInput}
|
\li \l{StatusBaseInput}
|
||||||
|
\li \l{StatusIconTextButton}
|
||||||
\li \l{StatusIdenticonRing}
|
\li \l{StatusIdenticonRing}
|
||||||
\li \l{StatusInput}
|
\li \l{StatusInput}
|
||||||
\li \l{StatusItemPicker}
|
\li \l{StatusItemPicker}
|
||||||
|
|
|
@ -343,4 +343,26 @@ Column {
|
||||||
text: "Button with Emoji"
|
text: "Button with Emoji"
|
||||||
icon.emoji: "🖼️️"
|
icon.emoji: "🖼️️"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
spacing: 20
|
||||||
|
|
||||||
|
StatusIconTextButton {
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
spacing: 0
|
||||||
|
statusIcon: "next"
|
||||||
|
icon.width: 24
|
||||||
|
icon.height: 24
|
||||||
|
iconRotation: 180
|
||||||
|
text: "Previous page"
|
||||||
|
font.pixelSize: 15
|
||||||
|
onClicked: testText.visible = !testText.visible
|
||||||
|
}
|
||||||
|
StatusBaseText {
|
||||||
|
id: testText
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
text: "Click and hide!"
|
||||||
|
font.pixelSize: 15
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,83 @@
|
||||||
|
import QtQuick 2.12
|
||||||
|
import QtQuick.Controls 2.12
|
||||||
|
import QtQuick.Layouts 1.14
|
||||||
|
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
|
||||||
|
/*!
|
||||||
|
\qmltype StatusIconTextButton
|
||||||
|
\inherits Item
|
||||||
|
\inqmlmodule StatusQ.Controls
|
||||||
|
\since StatusQ.Controls 0.1
|
||||||
|
\brief It presents an icon + plain text button. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html}{AbstractButton}.
|
||||||
|
|
||||||
|
The \c StatusIconTextButton is a clickable icon + text control.
|
||||||
|
|
||||||
|
NOTE: It only contemplates `display` property as `AbstractButton.TextBesideIcon`.
|
||||||
|
|
||||||
|
Example of how the component looks like:
|
||||||
|
\image status_icon_text_button.png
|
||||||
|
Example of how to use it:
|
||||||
|
\qml
|
||||||
|
StatusIconTextButton {
|
||||||
|
spacing: 0
|
||||||
|
statusIcon: "next"
|
||||||
|
iconRotation: 180
|
||||||
|
icon.width: 12
|
||||||
|
icon.height: 12
|
||||||
|
text: qsTr("Back")
|
||||||
|
onClicked: console.log("Clicked!")
|
||||||
|
}
|
||||||
|
\endqml
|
||||||
|
For a list of components available see StatusQ.
|
||||||
|
*/
|
||||||
|
AbstractButton {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
/*!
|
||||||
|
\qmlproperty string StatusIconTextButton::statusIcon
|
||||||
|
This property holds the status icon name.
|
||||||
|
*/
|
||||||
|
property string statusIcon
|
||||||
|
/*!
|
||||||
|
\qmlproperty int StatusIconTextButton::iconRotation
|
||||||
|
This property holds the status icon rotation.
|
||||||
|
*/
|
||||||
|
property int iconRotation
|
||||||
|
/*!
|
||||||
|
\qmlproperty color StatusIconTextButton::textColor
|
||||||
|
This property holds the text color.
|
||||||
|
*/
|
||||||
|
property color textColor: Theme.palette.primaryColor1
|
||||||
|
|
||||||
|
icon.color: Theme.palette.primaryColor1
|
||||||
|
icon.height: 24
|
||||||
|
icon.width: 24
|
||||||
|
font.pixelSize: 13
|
||||||
|
contentItem: RowLayout {
|
||||||
|
spacing: root.spacing
|
||||||
|
StatusIcon {
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
icon: root.statusIcon
|
||||||
|
color: root.icon.color
|
||||||
|
width: root.icon.width
|
||||||
|
height: root.icon.height
|
||||||
|
rotation: root.iconRotation
|
||||||
|
}
|
||||||
|
StatusBaseText {
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
text: root.text
|
||||||
|
color: root.textColor
|
||||||
|
font.pixelSize: root.font.pixelSize
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: To remove when switch to Qt 5.15
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
acceptedButtons: Qt.NoButton
|
||||||
|
hoverEnabled: true
|
||||||
|
}
|
||||||
|
}
|
|
@ -45,3 +45,5 @@ StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
|
||||||
StatusImageCrop 0.1 StatusImageCrop.qml
|
StatusImageCrop 0.1 StatusImageCrop.qml
|
||||||
StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
|
StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
|
||||||
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
|
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
|
||||||
|
StatusDropdown 0.1 StatusDropdown.qml
|
||||||
|
StatusIconTextButton 0.1 StatusIconTextButton.qml
|
||||||
|
|
Loading…
Reference in New Issue