mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-05-11 23:51:09 +08:00
Compare commits
3 Commits
6b9f7a1c99
...
af573b71a4
| Author | SHA1 | Date | |
|---|---|---|---|
|
af573b71a4 | ||
|
99c77d2786 | ||
|
|
5de9588b93 |
@ -2487,8 +2487,8 @@ Some contents...</source>
|
||||
<location filename="qml/page/T_TextBox.qml" line="33"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="64"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
@ -2507,6 +2507,11 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
||||
@ -2676,8 +2676,8 @@ Some contents...</source>
|
||||
<location filename="qml/page/T_TextBox.qml" line="33"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="64"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished">禁用</translation>
|
||||
</message>
|
||||
@ -2696,6 +2696,11 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished">自动建议框</translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation>按下时显示建议</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
||||
@ -26,7 +26,8 @@ FluScrollablePage{
|
||||
width: parent.width
|
||||
text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
|
||||
}
|
||||
Row{
|
||||
Flow{
|
||||
width: parent.width
|
||||
spacing: 20
|
||||
Rectangle{
|
||||
width: 40
|
||||
@ -34,7 +35,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:0
|
||||
}
|
||||
@ -46,7 +47,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:5
|
||||
}
|
||||
@ -57,7 +58,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:50
|
||||
}
|
||||
@ -68,9 +69,10 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:100
|
||||
count:1000
|
||||
max: 999
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
@ -79,7 +81,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
isDot:true
|
||||
}
|
||||
@ -90,7 +92,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(250/255,173/255,20/255,1)
|
||||
@ -102,12 +104,71 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "bottomLeft"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topLeft"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "bottomRight"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
count: "NEW"
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,7 +181,9 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
count: 100
|
||||
max: 99
|
||||
isDot: false
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
|
||||
@ -114,18 +114,26 @@ FluScrollablePage{
|
||||
placeholderText: qsTr("AutoSuggestBox")
|
||||
items: generateRandomNames(100)
|
||||
disabled: text_box_suggest_switch.checked
|
||||
itemRows: 12
|
||||
showSuggestWhenPressed: text_box_show_suggest_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_box_suggest_switch
|
||||
RowLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text: qsTr("Disabled")
|
||||
FluToggleSwitch{
|
||||
id:text_box_show_suggest_switch
|
||||
text: qsTr("Show suggest when pressed")
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_box_suggest_switch
|
||||
text: qsTr("Disabled")
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
@ -133,6 +141,9 @@ FluScrollablePage{
|
||||
Layout.topMargin: -6
|
||||
code:'FluAutoSuggestBox{
|
||||
placeholderText: qsTr("AutoSuggestBox")
|
||||
itemRows: 12
|
||||
itemHeight: 38
|
||||
showSuggestWhenPressed: false
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
@ -7,9 +7,12 @@ FluTextBox{
|
||||
property var items:[]
|
||||
property string emptyText: qsTr("No results found")
|
||||
property int autoSuggestBoxReplacement: FluentIcons.Search
|
||||
property int itemHeight: 38
|
||||
property int itemRows: 8
|
||||
property bool showSuggestWhenPressed: false
|
||||
property string textRole: "title"
|
||||
property var filter: function(item){
|
||||
if(item.title.indexOf(control.text)!==-1){
|
||||
if(item[textRole].indexOf(control.text)!==-1){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
@ -29,17 +32,11 @@ FluTextBox{
|
||||
control.updateText(modelData[textRole])
|
||||
}
|
||||
function loadData(){
|
||||
var result = []
|
||||
if(items==null){
|
||||
list_view.model = result
|
||||
list_view.model = []
|
||||
return
|
||||
}
|
||||
items.map(function(item){
|
||||
if(control.filter(item)){
|
||||
result.push(item)
|
||||
}
|
||||
})
|
||||
list_view.model = result
|
||||
list_view.model = items.filter(item => control.filter(item))
|
||||
}
|
||||
}
|
||||
onActiveFocusChanged: {
|
||||
@ -69,7 +66,7 @@ FluTextBox{
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
header: Item{
|
||||
width: control.width
|
||||
height: visible ? 38 : 0
|
||||
height: visible ? control.itemHeight : 0
|
||||
visible: list_view.count === 0
|
||||
FluText{
|
||||
text: emptyText
|
||||
@ -82,7 +79,7 @@ FluTextBox{
|
||||
}
|
||||
delegate:FluControl{
|
||||
id: item_control
|
||||
height: 38
|
||||
height: control.itemHeight
|
||||
width: control.width
|
||||
onClicked: {
|
||||
d.handleClick(modelData)
|
||||
@ -114,7 +111,7 @@ FluTextBox{
|
||||
background:Rectangle{
|
||||
id: rect_background
|
||||
implicitWidth: control.width
|
||||
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
|
||||
radius: 5
|
||||
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
|
||||
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||
@ -124,6 +121,14 @@ FluTextBox{
|
||||
}
|
||||
}
|
||||
onTextChanged: {
|
||||
control.showSuggest()
|
||||
}
|
||||
onPressed: {
|
||||
if(control.showSuggestWhenPressed){
|
||||
control.showSuggest()
|
||||
}
|
||||
}
|
||||
function showSuggest(){
|
||||
d.loadData()
|
||||
if(d.flagVisible){
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
|
||||
@ -5,19 +5,15 @@ import FluentUI 1.0
|
||||
Rectangle{
|
||||
property bool isDot: false
|
||||
property bool showZero: false
|
||||
property int count: 0
|
||||
property bool topRight: false
|
||||
property var count: 0
|
||||
property int max: 99
|
||||
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
|
||||
id:control
|
||||
color:Qt.rgba(255/255,77/255,79/255,1)
|
||||
width: {
|
||||
if(isDot)
|
||||
return 10
|
||||
if(count<10){
|
||||
return 20
|
||||
}else if(count<100){
|
||||
return 30
|
||||
}
|
||||
return 40
|
||||
return content_text.implicitWidth + 12
|
||||
}
|
||||
height: {
|
||||
if(isDot)
|
||||
@ -31,49 +27,74 @@ Rectangle{
|
||||
}
|
||||
border.width: 1
|
||||
border.color: Qt.rgba(1,1,1,1)
|
||||
anchors{
|
||||
anchors {
|
||||
left: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
|
||||
}
|
||||
right: {
|
||||
if(parent && topRight)
|
||||
return parent.right
|
||||
return undefined
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
|
||||
}
|
||||
top: {
|
||||
if(parent && topRight)
|
||||
return parent.top
|
||||
return undefined
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
|
||||
}
|
||||
bottom: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
|
||||
}
|
||||
leftMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
}
|
||||
rightMargin: {
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -(control.width/2)
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return 0
|
||||
return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
}
|
||||
topMargin: {
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -10
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return 0
|
||||
return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
bottomMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
}
|
||||
visible: {
|
||||
if(showZero)
|
||||
return true
|
||||
return count!==0
|
||||
if(typeof(count) === "number"){
|
||||
return showZero ? true : count !== 0
|
||||
}
|
||||
return true
|
||||
}
|
||||
FluText{
|
||||
id: content_text
|
||||
anchors.centerIn: parent
|
||||
color: Qt.rgba(1,1,1,1)
|
||||
visible: !isDot
|
||||
text:{
|
||||
if(count<100)
|
||||
if(typeof(count) === "string"){
|
||||
return count
|
||||
return "100+"
|
||||
}else if(typeof(count) === "number"){
|
||||
return count <= max ? count.toString() : "%1+".arg(max.toString())
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,9 +6,12 @@ FluTextBox{
|
||||
property var items:[]
|
||||
property string emptyText: qsTr("No results found")
|
||||
property int autoSuggestBoxReplacement: FluentIcons.Search
|
||||
property int itemHeight: 38
|
||||
property int itemRows: 8
|
||||
property bool showSuggestWhenPressed: false
|
||||
property string textRole: "title"
|
||||
property var filter: function(item){
|
||||
if(item.title.indexOf(control.text)!==-1){
|
||||
if(item[textRole].indexOf(control.text)!==-1){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
@ -28,17 +31,11 @@ FluTextBox{
|
||||
control.updateText(modelData[textRole])
|
||||
}
|
||||
function loadData(){
|
||||
var result = []
|
||||
if(items==null){
|
||||
list_view.model = result
|
||||
list_view.model = []
|
||||
return
|
||||
}
|
||||
items.map(function(item){
|
||||
if(control.filter(item)){
|
||||
result.push(item)
|
||||
}
|
||||
})
|
||||
list_view.model = result
|
||||
list_view.model = items.filter(item => control.filter(item))
|
||||
}
|
||||
}
|
||||
onActiveFocusChanged: {
|
||||
@ -68,7 +65,7 @@ FluTextBox{
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
header: Item{
|
||||
width: control.width
|
||||
height: visible ? 38 : 0
|
||||
height: visible ? control.itemHeight : 0
|
||||
visible: list_view.count === 0
|
||||
FluText{
|
||||
text: emptyText
|
||||
@ -81,7 +78,7 @@ FluTextBox{
|
||||
}
|
||||
delegate:FluControl{
|
||||
id: item_control
|
||||
height: 38
|
||||
height: control.itemHeight
|
||||
width: control.width
|
||||
onClicked: {
|
||||
d.handleClick(modelData)
|
||||
@ -113,7 +110,7 @@ FluTextBox{
|
||||
background:Rectangle{
|
||||
id: rect_background
|
||||
implicitWidth: control.width
|
||||
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
|
||||
radius: 5
|
||||
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
|
||||
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||
@ -123,6 +120,14 @@ FluTextBox{
|
||||
}
|
||||
}
|
||||
onTextChanged: {
|
||||
control.showSuggest()
|
||||
}
|
||||
onPressed: {
|
||||
if(control.showSuggestWhenPressed){
|
||||
control.showSuggest()
|
||||
}
|
||||
}
|
||||
function showSuggest(){
|
||||
d.loadData()
|
||||
if(d.flagVisible){
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
|
||||
@ -5,19 +5,15 @@ import FluentUI
|
||||
Rectangle{
|
||||
property bool isDot: false
|
||||
property bool showZero: false
|
||||
property int count: 0
|
||||
property bool topRight: false
|
||||
property var count: 0
|
||||
property int max: 99
|
||||
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
|
||||
id:control
|
||||
color:Qt.rgba(255/255,77/255,79/255,1)
|
||||
width: {
|
||||
if(isDot)
|
||||
return 10
|
||||
if(count<10){
|
||||
return 20
|
||||
}else if(count<100){
|
||||
return 30
|
||||
}
|
||||
return 40
|
||||
return content_text.implicitWidth + 12
|
||||
}
|
||||
height: {
|
||||
if(isDot)
|
||||
@ -31,49 +27,74 @@ Rectangle{
|
||||
}
|
||||
border.width: 1
|
||||
border.color: Qt.rgba(1,1,1,1)
|
||||
anchors{
|
||||
anchors {
|
||||
left: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
|
||||
}
|
||||
right: {
|
||||
if(parent && topRight)
|
||||
return parent.right
|
||||
return undefined
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
|
||||
}
|
||||
top: {
|
||||
if(parent && topRight)
|
||||
return parent.top
|
||||
return undefined
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
|
||||
}
|
||||
bottom: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
|
||||
}
|
||||
leftMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
}
|
||||
rightMargin: {
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -(control.width/2)
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return 0
|
||||
return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
}
|
||||
topMargin: {
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -10
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return 0
|
||||
return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
bottomMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
}
|
||||
visible: {
|
||||
if(showZero)
|
||||
return true
|
||||
return count!==0
|
||||
if(typeof(count) === "number"){
|
||||
return showZero ? true : count !== 0
|
||||
}
|
||||
return true
|
||||
}
|
||||
FluText{
|
||||
id: content_text
|
||||
anchors.centerIn: parent
|
||||
color: Qt.rgba(1,1,1,1)
|
||||
visible: !isDot
|
||||
text:{
|
||||
if(count<100)
|
||||
if(typeof(count) === "string"){
|
||||
return count
|
||||
return "100+"
|
||||
}else if(typeof(count) === "number"){
|
||||
return count <= max ? count.toString() : "%1+".arg(max.toString())
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user