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{StatusSelect}
|
||||
\li \l{StatusBaseInput}
|
||||
\li \l{StatusIconTextButton}
|
||||
\li \l{StatusIdenticonRing}
|
||||
\li \l{StatusInput}
|
||||
\li \l{StatusItemPicker}
|
||||
|
|
|
@ -343,4 +343,26 @@ Column {
|
|||
text: "Button with 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
|
||||
StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
|
||||
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
|
||||
StatusDropdown 0.1 StatusDropdown.qml
|
||||
StatusIconTextButton 0.1 StatusIconTextButton.qml
|
||||
|
|
Loading…
Reference in New Issue