FluentUI/example/qml/page/T_TextBox.qml

190 lines
4.7 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-02 12:20:16 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
2024-03-09 15:35:48 +08:00
title: qsTr("TextBox")
2023-03-10 18:08:32 +08:00
2023-04-06 17:32:21 +08:00
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
2023-03-10 18:08:32 +08:00
Layout.topMargin: 20
2023-04-06 17:32:21 +08:00
FluTextBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("Single-line Input Box")
disabled: text_box_switch.checked
2023-07-23 21:06:46 +08:00
cleanEnabled: true
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-07-23 21:06:46 +08:00
FluToggleSwitch{
2024-03-09 15:35:48 +08:00
id: text_box_switch
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
2024-03-09 15:35:48 +08:00
text: qsTr("Disabled")
2023-04-06 17:32:21 +08:00
}
2023-03-06 18:08:01 +08:00
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluTextBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("Single-line Input Box")
2023-04-06 17:32:21 +08:00
}'
2023-03-10 18:08:32 +08:00
}
2023-04-06 17:32:21 +08:00
2023-04-20 14:56:09 +08:00
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluPasswordBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("Please enter your password")
2023-05-26 13:49:32 +08:00
disabled:password_box_switch.checked
2023-04-20 14:56:09 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-07-23 21:06:46 +08:00
FluToggleSwitch{
id:password_box_switch
2023-04-20 14:56:09 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
2024-03-09 15:35:48 +08:00
text: qsTr("Disabled")
2023-04-20 14:56:09 +08:00
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPasswordBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("Please enter your password")
2023-04-20 14:56:09 +08:00
}'
}
2023-04-06 17:32:21 +08:00
FluArea{
Layout.fillWidth: true
2023-04-20 09:15:28 +08:00
height: 36+multiine_textbox.height
2023-04-06 17:32:21 +08:00
paddings: 10
2023-03-10 18:08:32 +08:00
Layout.topMargin: 20
2023-04-06 17:32:21 +08:00
FluMultilineTextBox{
2024-03-09 15:35:48 +08:00
id: multiine_textbox
placeholderText: qsTr("Multi-line Input Box")
disabled: text_box_multi_switch.checked
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-07-23 21:06:46 +08:00
FluToggleSwitch{
id:text_box_multi_switch
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
2024-03-09 15:35:48 +08:00
text: qsTr("Disabled")
2023-04-06 17:32:21 +08:00
}
}
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluMultilineTextBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("Multi-line Input Box")
2023-04-06 17:32:21 +08:00
}'
2023-03-20 18:22:32 +08:00
}
2023-04-06 17:32:21 +08:00
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
2023-03-20 18:22:32 +08:00
Layout.topMargin: 20
2023-04-06 17:32:21 +08:00
FluAutoSuggestBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("AutoSuggestBox")
items: generateRandomNames(100)
disabled: text_box_suggest_switch.checked
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-07-23 21:06:46 +08:00
FluToggleSwitch{
id:text_box_suggest_switch
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
2024-03-09 15:35:48 +08:00
text: qsTr("Disabled")
2023-04-06 17:32:21 +08:00
}
}
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluAutoSuggestBox{
2024-03-09 15:35:48 +08:00
placeholderText: qsTr("AutoSuggestBox")
2023-04-06 17:32:21 +08:00
}'
2023-03-09 15:49:37 +08:00
}
2023-06-30 18:47:25 +08:00
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluSpinBox{
2023-07-01 07:54:43 +08:00
disabled: spin_box_switch.checked
2023-06-30 18:47:25 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-07-23 21:06:46 +08:00
FluToggleSwitch{
2024-03-09 15:35:48 +08:00
id: spin_box_switch
2023-06-30 18:47:25 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
2024-03-09 15:35:48 +08:00
text: qsTr("Disabled")
2023-06-30 18:47:25 +08:00
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSpinBox{
2023-07-26 11:02:33 +08:00
2023-06-30 18:47:25 +08:00
}'
}
2023-04-06 17:32:21 +08:00
2023-03-09 15:49:37 +08:00
function generateRandomNames(numNames) {
2023-03-10 18:08:32 +08:00
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const names = [];
function generateRandomName() {
const nameLength = Math.floor(Math.random() * 5) + 4;
let name = '';
for (let i = 0; i < nameLength; i++) {
const letterIndex = Math.floor(Math.random() * 26);
name += alphabet.charAt(letterIndex);
}
return name;
}
for (let i = 0; i < numNames; i++) {
const name = generateRandomName();
2023-03-30 17:16:57 +08:00
names.push({title:name});
2023-03-02 12:20:16 +08:00
}
2023-03-10 18:08:32 +08:00
return names;
2023-03-02 12:20:16 +08:00
}
2023-03-09 15:49:37 +08:00
2023-03-02 12:20:16 +08:00
}