amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-10-06 12:13:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

add FluPasswordBox

Browse Source
This commit is contained in:
zhuzihcu 2023-04-20 14:56:09 +08:00
parent b3d1568de4
commit 3ec0841b44
6 changed files with 165 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
example/T_TextBox.qml
View File

@ -51,6 +51,44 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluPasswordBox{
Layout.topMargin: 20
placeholderText: "请输入密码"
Layout.preferredWidth: 300
disabled:password_box_switch.selected
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:"请输入密码"
}'
}
FluArea{
Layout.fillWidth: true

3
example/component/CodeExpander.qml
View File

@ -118,7 +118,8 @@ FluExpander{
"FluColors",
"FluTheme",
"FluStatusView",
"FluRatingControl"
"FluRatingControl",
"FluPasswordBox"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

1
src/Fluent.cpp
View File

@ -88,6 +88,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRadioButton.qml"),uri,major,minor,"FluRadioButton");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluSlider.qml"),uri,major,minor,"FluSlider");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTextBox.qml"),uri,major,minor,"FluTextBox");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPasswordBox.qml"),uri,major,minor,"FluPasswordBox");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluText.qml"),uri,major,minor,"FluText");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFilledButton.qml"),uri,major,minor,"FluFilledButton");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleSwitch.qml"),uri,major,minor,"FluToggleSwitch");

120
src/controls/FluPasswordBox.qml Normal file
View File

@ -0,0 +1,120 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
id:control
width: 300
enabled: !disabled
color: {
if(disabled){
return disableColor
}
return normalColor
}
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
placeholderTextColor: {
if(disabled){
return placeholderDisableColor
}
if(focus){
return placeholderFocusColor
}
return placeholderNormalColor
}
font.bold: {
switch (fontStyle) {
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.SubTitle:
return true
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return text.pixelSize * 4.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{
inputItem: control
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
}
FluIconButton{
id:btn_reveal
iconSource:FluentIcons.RevealPasswordMedium
iconSize: 10
width: 20
height: 20
opacity: 0.5
visible: control.text !== ""
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: icon_end.visible ? 25 : 5
}
}
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: control.echoMode !== TextInput.Password && menu.popup()
}
FluTextBoxMenu{
id:menu
inputItem: control
}
}

4
src/controls/FluRadioButton.qml
View File

@ -48,7 +48,9 @@ Button {
}
Behavior on border.width {
NumberAnimation{
duration: 150
duration: 167
easing.type: Easing.BezierSpline
easing.bezierCurve: [ 0, 0, 0, 1 ]
}
}
border.color: {

1
src/res.qrc
View File

@ -70,5 +70,6 @@
<file>controls/FluStatusView.qml</file>
<file>controls/FluPaneItemEmpty.qml</file>
<file>controls/FluRatingControl.qml</file>
<file>controls/FluPasswordBox.qml</file>
</qresource>
</RCC>