FluentUI/example/qml/page/T_Tooltip.qml

103 lines
2.3 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
2023-08-26 17:20:30 +08:00
import "../component"
2023-03-20 18:22:32 +08:00
FluScrollablePage{
2024-03-09 15:35:48 +08:00
title: qsTr("Tooltip")
2023-03-20 18:22:32 +08:00
FluText{
2024-03-09 15:35:48 +08:00
text: qsTr("Hover over Tultip and it pops up")
2023-03-20 18:22:32 +08:00
}
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-20 18:22:32 +08:00
Layout.topMargin: 20
2024-03-29 16:23:16 +08:00
Layout.preferredHeight: 68
padding: 10
2023-03-20 18:22:32 +08:00
Column{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
2024-03-09 15:35:48 +08:00
text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
2023-03-20 18:22:32 +08:00
}
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
2024-03-09 15:35:48 +08:00
text: qsTr("Delete")
2023-03-20 18:22:32 +08:00
onClicked:{
2024-03-09 15:35:48 +08:00
showSuccess(qsTr("Click IconButton"))
2023-03-20 18:22:32 +08:00
}
}
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2024-03-29 16:23:16 +08:00
Layout.topMargin: -6
2023-04-06 17:32:21 +08:00
code:'FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
2024-03-09 15:35:48 +08:00
text: qsTr("Delete")
2023-04-06 17:32:21 +08:00
onClicked:{
2024-03-09 15:35:48 +08:00
showSuccess(qsTr("Click IconButton"))
2023-04-06 17:32:21 +08:00
}
}
'
}
2023-03-20 18:22:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-20 18:22:32 +08:00
Layout.topMargin: 20
2024-03-29 16:23:16 +08:00
Layout.preferredHeight: 68
padding: 10
2023-03-20 18:22:32 +08:00
Column{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
2024-03-09 15:35:48 +08:00
text: qsTr("Add a Tooltip pop-up to a Button")
2023-03-20 18:22:32 +08:00
}
FluButton{
id:button_1
2024-03-09 15:35:48 +08:00
text: qsTr("Delete")
2023-03-20 18:22:32 +08:00
onClicked:{
2024-03-09 15:35:48 +08:00
showSuccess(qsTr("Click Button"))
2023-03-20 18:22:32 +08:00
}
FluTooltip{
visible: button_1.hovered
text:button_1.text
delay: 1000
}
}
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2024-03-29 16:23:16 +08:00
Layout.topMargin: -6
2023-04-06 17:32:21 +08:00
code:'FluButton{
2024-03-09 15:35:48 +08:00
id: button_1
text: qsTr("Delete")
2023-04-06 17:32:21 +08:00
FluTooltip{
visible: button_1.hovered
text:button_1.text
delay: 1000
}
onClicked:{
2024-03-09 15:35:48 +08:00
showSuccess(qsTr("Click Button"))
2023-04-06 17:32:21 +08:00
}
2023-04-20 09:34:57 +08:00
}'
2023-04-06 17:32:21 +08:00
}
2023-03-20 18:22:32 +08:00
}