FluentUI/example/qml/page/T_TextBox.qml

226 lines
5.4 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-03-30 21:52:55 +08:00
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-03-02 12:20:16 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
2023-06-20 12:53:32 +08:00
pageMode: FluNavigationView.SingleInstance
2023-03-10 18:08:32 +08:00
2023-06-20 12:53:32 +08:00
title:"TextBox"
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{
Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300
2023-05-26 13:49:32 +08:00
disabled:text_box_switch.checked
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
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{
placeholderText:"单行输入框"
}'
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{
Layout.topMargin: 20
placeholderText: "请输入密码"
Layout.preferredWidth: 300
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
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:password_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPasswordBox{
placeholderText:"请输入密码"
}'
}
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{
2023-04-20 09:15:28 +08:00
id:multiine_textbox
2023-04-06 17:32:21 +08:00
Layout.topMargin: 20
placeholderText: "多行输入框"
Layout.preferredWidth: 300
2023-05-26 13:49:32 +08:00
disabled:text_box_multi_switch.checked
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_multi_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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{
placeholderText:"多行输入框"
}'
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{
Layout.topMargin: 20
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
items:generateRandomNames(100)
2023-05-26 13:49:32 +08:00
disabled:text_box_suggest_switch.checked
2023-04-06 17:32:21 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_suggest_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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{
placeholderText:"AutoSuggestBox"
}'
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{
Layout.topMargin: 20
disabled: spin_box_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:spin_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSpinBox{
}'
}
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
}