amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-27 05:38:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu 2023-04-06 17:32:21 +08:00
parent 13abd275b4
commit d89aaec062
28 changed files with 1044 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
example/T_Badge.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -11,6 +12,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -99,5 +101,19 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count: 100
isDot: false
color: Qt.rgba(82/255,196/255,26/255,1)
}
}'
}
}

14
example/T_CalendarPicker.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -19,6 +21,12 @@ FluScrollablePage{
FluCalendarView{
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluCalendarView{
}'
}
FluArea{
Layout.fillWidth: true
@ -34,5 +42,11 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluCalendarPicker{
}'
}
}

12
example/T_Carousel.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -35,4 +37,14 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluCarousel{
width: 400
height: 300
Component.onCompleted: {
setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
}
}'
}
}

14
example/T_ColorPicker.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -37,6 +39,12 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluColorView{
}'
}
FluArea{
Layout.fillWidth: true
@ -54,6 +62,12 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluColorPicker{
}'
}
}

22
example/T_DatePicker.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,44 +11,42 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text:"showYear=true"
}
FluDatePicker{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluDatePicker{
}'
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text:"showYear=false"
}
@ -56,8 +55,13 @@ FluScrollablePage{
showYear:false
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluDatePicker{
showYear:false
}'
}
}

43
example/T_Dialog.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,40 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluButton{
anchors.verticalCenter: parent.verticalCenter
Layout.topMargin: 20
text:"Show Dialog"
onClicked: {
dialog.open()
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluContentDialog{
id:dialog
title:"友情提示"
message:"确定要退出程序么？"
negativeText:"取消"
onNegativeClicked:{
showSuccess("点击取消按钮")
}
positiveText:"确定"
onPositiveClicked:{
showSuccess("点击确定按钮")
}
}
dialog.open()
'
}
FluContentDialog{
id:dialog
@ -25,11 +60,5 @@ FluScrollablePage{
}
}
FluButton{
Layout.topMargin: 20
text:"Show Dialog"
onClicked: {
dialog.open()
}
}
}

44
example/T_Expander.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,20 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
height: layout_column.height+40
paddings: 10
Layout.topMargin: 20
Column{
id:layout_column
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluExpander{
headerText:"打开一个单选框"
@ -62,4 +77,33 @@ FluScrollablePage{
}
}
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluExpander{
headerText:"打开一个单选框"
Item{
anchors.fill: parent
Flickable{
width: parent.width
height: parent.height
contentWidth: width
contentHeight: text_info.height
ScrollBar.vertical: FluScrollBar {}
FluText{
id:text_info
width: scrollview.width
wrapMode: Text.WrapAnywhere
padding: 14
text:"先帝创业未半而中道崩殂，今天下三分......""
}
}
}
}'
}
}

48
example/T_FlipView.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,7 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -26,7 +27,6 @@ FluScrollablePage{
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
sourceSize: Qt.size(400,300)
fillMode:Image.PreserveAspectCrop
}
Image{
@ -42,6 +42,27 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluFlipView{
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
FluArea{
Layout.fillWidth: true
@ -74,5 +95,26 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluFlipView{
vertical:true
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
}

29
example/T_InfoBar.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,33 +11,53 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 200
paddings: 10
ColumnLayout{
spacing: 14
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluButton{
text:"Info"
Layout.topMargin: 20
onClicked: {
showInfo("这是一个Info样式的InfoBar")
}
}
FluButton{
text:"Warning"
Layout.topMargin: 20
onClicked: {
showWarning("这是一个Warning样式的InfoBar")
}
}
FluButton{
text:"Error"
Layout.topMargin: 20
onClicked: {
showError("这是一个Error样式的InfoBar")
}
}
FluButton{
text:"Success"
Layout.topMargin: 20
onClicked: {
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
}
}
}
}
CodeExpander{
Layout.fillWidth: true
code:' showInfo("这是一个Info样式的InfoBar")
showWarning("这是一个Warning样式的InfoBar")
showError("这是一个Error样式的InfoBar")
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
}
}

17
example/T_MediaPlayer.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
onVisibleChanged: {
if(visible){
@ -18,7 +20,6 @@ FluScrollablePage{
player.pause()
}
}
FluArea{
Layout.fillWidth: true
height: 320
@ -35,13 +36,19 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluMediaPlayer{
id:player
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}
'
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluButton{
text:"跳转到视频播放器窗口"
anchors.verticalCenter: parent.verticalCenter
@ -49,8 +56,10 @@ FluScrollablePage{
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
}
}
}
}

41
example/T_Menu.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,20 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
Column{
id:layout_column
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluButton{
text:"左击菜单"
@ -19,7 +34,6 @@ FluScrollablePage{
}
}
FluButton{
text:"右击菜单"
Layout.topMargin: 20
@ -34,6 +48,29 @@ FluScrollablePage{
}
}
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluMenu{
id:menu
FluMenuItem:{
text:"删除"
onClicked: {
showError("删除")
}
}
FluMenuItem:{
text:"修改"
onClicked: {
showInfo"修改")
}
}
}
menu.popup()
'
}
FluMenu{
id:menu
@ -46,7 +83,7 @@ FluScrollablePage{
FluMenuItem{
text:"修改"
onClicked: {
showError("修改")
showInfo("修改")
}
}
}

41
example/T_MultiWindow.qml
View File

@ -3,17 +3,18 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
property string password: ""
property var loginPageRegister: registerForPageResult("/login")
title:"MultiWindow"
leftPadding:10
rightPadding:10
bottomPadding:20
property string password: ""
property var loginPageRegister: registerForPageResult("/login")
spacing: 0
Connections{
target: loginPageRegister
@ -28,7 +29,6 @@ FluScrollablePage{
height: 100
paddings: 10
Layout.topMargin: 20
Column{
spacing: 15
anchors{
@ -46,6 +46,16 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluButton{
text:"点击跳转"
onClicked: {
FluApp.navigate("/about")
}
}
'
}
FluArea{
Layout.fillWidth: true
@ -68,11 +78,30 @@ FluScrollablePage{
loginPageRegister.launch({username:"zhuzichu"})
}
}
FluText{
text:"登录窗口返回过来的密码->"+password
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'property var loginPageRegister: registerForPageResult("/login")
Connections{
target: loginPageRegister
function onResult(data)
{
password = data.password
}
}
FluButton{
text:"点击跳转"
onClicked: {
loginPageRegister.launch({username:"zhuzichu"})
}
}
'
}
}

35
example/T_Pivot.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,7 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -46,6 +47,36 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluPivot{
anchors.fill: parent
FluPivotItem:{
text:"All"
contentItem: FluText{
text:"All emails go here."
}
}
FluPivotItem:{
text:"Unread"
contentItem: FluText{
text:"Unread emails go here."
}
}
FluPivotItem:{
text:"Flagged"
contentItem: FluText{
text:"Flagged emails go here."
}
}
FluPivotItem:{
text:"Urgent"
contentItem: FluText{
text:"Urgent emails go here."
}
}
}
'
}
}

42
example/T_Progress.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,30 +11,59 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluProgressBar{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 260
paddings: 10
ColumnLayout{
spacing: 20
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluProgressBar{
}
FluProgressRing{
Layout.topMargin: 10
}
FluProgressBar{
id:progress_bar
Layout.topMargin: 20
indeterminate: false
}
FluProgressRing{
id:progress_ring
Layout.topMargin: 10
indeterminate: false
}
FluSlider{
Layout.topMargin: 30
value:50
onValueChanged:{
progress_bar.progress = value/100
progress_ring.progress = value/100
}
Layout.bottomMargin: 30
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluProgressBar{
}
FluProgressRing{
}
FluProgressBar{
indeterminate: false
}
FluProgressRing{
indeterminate: false
}'
}
}

34
example/T_Rectangle.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,20 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 480
paddings: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
RowLayout{
Layout.topMargin: 20
@ -114,4 +129,23 @@ FluScrollablePage{
}
Layout.topMargin: 10
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluRectangle{
radius: [25,25,25,25]
width: 50
height: 50
Image{
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_4.svg"
sourceSize: Qt.size(width,height)
}
}'
}
}

26
example/T_TabView.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
@ -99,7 +101,7 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 5
Layout.topMargin: 15
height: 400
paddings: 10
FluTabView{
@ -109,5 +111,27 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTabView{
anchors.fill: parent
Component.onCompleted: {
newTab()
newTab()
newTab()
}
Component{
id:com_page
Rectangle{
anchors.fill: parent
color: argument
}
}
function newTab(){
tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
}
}
'
}
}

125
example/T_TextBox.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,32 +11,122 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluTextBox{
Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300
disabled:toggle_switch.selected
disabled:text_box_switch.selected
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluMultilineTextBox{
Layout.topMargin: 20
Layout.preferredWidth: 300
placeholderText: "多行输入框"
disabled:toggle_switch.selected
}
FluAutoSuggestBox{
Layout.topMargin: 20
items:generateRandomNames(100)
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
disabled:toggle_switch.selected
}
FluToggleSwitch{
id:toggle_switch
text:"Disabled"
Layout.topMargin: 20
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTextBox{
placeholderText:"单行输入框"
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluMultilineTextBox{
Layout.topMargin: 20
placeholderText: "多行输入框"
Layout.preferredWidth: 300
disabled:text_box_multi_switch.selected
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
code:'FluMultilineTextBox{
placeholderText:"多行输入框"
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluAutoSuggestBox{
Layout.topMargin: 20
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
items:generateRandomNames(100)
disabled:text_box_suggest_switch.selected
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
code:'FluAutoSuggestBox{
placeholderText:"AutoSuggestBox"
}'
}
function generateRandomNames(numNames) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

29
example/T_Theme.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,9 +11,20 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
RowLayout{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 210
paddings: 10
ColumnLayout{
spacing:0
anchors{
left: parent.left
}
RowLayout{
Layout.topMargin: 10
Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
delegate: FluRectangle{
@ -43,6 +55,7 @@ FluScrollablePage{
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.dark
clickFunc:function(){
FluTheme.dark = !FluTheme.dark
@ -53,9 +66,23 @@ FluScrollablePage{
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.nativeText
clickFunc:function(){
FluTheme.nativeText = !FluTheme.nativeText
}
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTheme.primaryColor = FluColors.Orange
FluTheme.dark = true
FluTheme.nativeText = true
'
}
}

16
example/T_TimePicker.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
@ -33,7 +35,12 @@ FluScrollablePage{
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTimePicker{
}'
}
FluArea{
Layout.fillWidth: true
@ -49,7 +56,7 @@ FluScrollablePage{
}
FluText{
text:"hourFormat=FluTimePicker.HH"
text:"hourFormat=FluTimePicker.H"
}
FluTimePicker{
@ -58,6 +65,11 @@ FluScrollablePage{
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTimePicker{
hourFormat:FluTimePicker.HH
}'
}
}

22
example/T_ToggleSwitch.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluScrollablePage{
@ -10,12 +11,29 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluToggleSwitch{
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
Row{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluToggleSwitch{
}
FluToggleSwitch{
Layout.topMargin: 20
text:"Text"
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluToggleSwitch{
text:"Text"
}'
}
}

31
example/T_Tooltip.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
@ -10,13 +11,13 @@ FluScrollablePage{
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluText{
Layout.topMargin: 20
text:"鼠标悬停不动，弹出Tooltip"
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
@ -42,6 +43,18 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
text:"删除"
onClicked:{
showSuccess("点击IconButton")
}
}
'
}
FluArea{
Layout.fillWidth: true
@ -72,6 +85,22 @@ FluScrollablePage{
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluButton{
id:button_1
text:"删除"
FluTooltip{
visible: button_1.hovered
text:button_1.text
delay: 1000
}
onClicked:{
showSuccess("点击一个Button")
}
}
'
}
}

131
example/T_TreeView.qml
View File

@ -3,13 +3,15 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "./component"
FluContentPage {
FluScrollablePage {
title:"TreeView"
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@ -50,71 +52,42 @@ FluContentPage {
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
}
FluTreeView{
id:tree_view
width:240
anchors{
top:parent.top
left:parent.left
bottom:parent.bottom
}
onItemClicked:
(model)=>{
showSuccess(model.text)
}
Component.onCompleted: {
var org = createOrg(3, 3, 3)
updateData(org)
}
}
ColumnLayout{
anchors{
left: tree_view.right
right: parent.right
top: parent.top
}
FluText{
text:{
if(tree_view.selectionMode === FluTreeView.None){
return "selectionMode->FluTreeView.None"
}
if(tree_view.selectionMode === FluTreeView.Single){
return "selectionMode->FluTreeView.Single"
}
if(tree_view.selectionMode === FluTreeView.Multiple){
return "selectionMode->FluTreeView.Multiple"
}
}
}
FluButton{
FluArea{
id:layout_actions
Layout.fillWidth: true
Layout.topMargin: 20
height: 50
paddings: 10
RowLayout{
spacing: 14
FluDropDownButton{
id:btn_selection_model
Layout.preferredWidth: 140
text:"None"
items:[
FluMenuItem{
text:"None"
onClicked: {
tree_view.selectionMode = FluTreeView.None
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
}
}
FluButton{
},
FluMenuItem{
text:"Single"
onClicked: {
tree_view.selectionMode = FluTreeView.Single
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
}
FluButton{
text:"Multiple"
},
FluMenuItem{
text:"Muiltple"
onClicked: {
tree_view.selectionMode = FluTreeView.Multiple
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Compact
}
}
]
}
FluFilledButton{
text:"获取选中的数据"
onClicked: {
@ -139,6 +112,50 @@ FluContentPage {
}
}
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
paddings: 10
height: 400
FluTreeView{
id:tree_view
width:240
anchors{
top:parent.top
left:parent.left
bottom:parent.bottom
}
onItemClicked:
(model)=>{
showSuccess(model.text)
}
Component.onCompleted: {
var org = createOrg(3, 3, 3)
createItem()
updateData(org)
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluTreeView{
id:tree_view
width:240
height:600
Component.onCompleted: {
var datas = []
datas.push(createItem("Node1",false))
datas.push(createItem("Node2",false))
datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
updateData(datas)
}
}
'
}
}

23
example/T_Typography.qml
View File

@ -15,15 +15,19 @@ FluContentPage {
slider.seek(0)
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
FluArea{
anchors{
top:parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
topMargin: 20
}
paddings: 10
ColumnLayout{
spacing: 0
FluText{
text:"Display"
Layout.topMargin: 20
padding: 0
pixelSize: textSize
fontStyle: FluText.Display
@ -65,8 +69,6 @@ FluContentPage {
fontStyle: FluText.Caption
}
}
}
FluSlider{
id:slider
@ -82,4 +84,11 @@ FluContentPage {
}
}
}
}

7
example/component/CodeExpander.qml
View File

@ -16,8 +16,13 @@ FluExpander{
width:parent.width
readOnly:true
text:code
focus:false
KeyNavigation.priority: KeyNavigation.BeforeItem
background:Rectangle{
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
}
}

28
example/global/ItemsOriginal.qml
View File

@ -3,7 +3,6 @@
import QtQuick
import FluentUI
FluObject{
property var navigationView
@ -19,7 +18,6 @@ FluObject{
FluPaneItemExpander{
title:"Basic input"
icon:FluentIcons.CheckboxComposite
FluPaneItem{
title:"Buttons"
image:"qrc:/res/image/control/Button.png"
@ -38,7 +36,6 @@ FluObject{
navigationView.push("qrc:/T_Slider.qml")
}
}
FluPaneItem{
title:"CheckBox"
image:"qrc:/res/image/control/Checkbox.png"
@ -48,7 +45,6 @@ FluObject{
navigationView.push("qrc:/T_CheckBox.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
@ -92,11 +88,9 @@ FluObject{
}
}
FluPaneItemExpander{
title:"Surface"
icon:FluentIcons.SurfaceHub
FluPaneItem{
title:"InfoBar"
image:"qrc:/res/image/control/InfoBar.png"
@ -106,42 +100,36 @@ FluObject{
navigationView.push("qrc:/T_InfoBar.qml")
}
}
FluPaneItem{
title:"Progress"
onTap:{
navigationView.push("qrc:/T_Progress.qml")
}
}
FluPaneItem{
title:"Badge"
onTap:{
navigationView.push("qrc:/T_Badge.qml")
}
}
FluPaneItem{
title:"Rectangle"
onTap:{
navigationView.push("qrc:/T_Rectangle.qml")
}
}
FluPaneItem{
title:"Carousel"
onTap:{
navigationView.push("qrc:/T_Carousel.qml")
}
}
FluPaneItem{
title:"Expander"
onTap:{
navigationView.push("qrc:/T_Expander.qml")
}
}
}
FluPaneItemExpander{
@ -153,14 +141,12 @@ FluObject{
navigationView.push("qrc:/T_Dialog.qml")
}
}
FluPaneItem{
title:"Tooltip"
onTap:{
navigationView.push("qrc:/T_Tooltip.qml")
}
}
FluPaneItem{
title:"Menu"
onTap:{
@ -172,7 +158,6 @@ FluObject{
FluPaneItemExpander{
title:"Navigation"
icon:FluentIcons.AllApps
FluPaneItem{
title:"Pivot"
image:"qrc:/res/image/control/Pivot.png"
@ -226,19 +211,18 @@ FluObject{
navigationView.push("qrc:/T_Theme.qml")
}
}
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/T_Awesome.qml")
}
}
FluPaneItem{
title:"Typography"
onTap:{
navigationView.push("qrc:/T_Typography.qml")
}
}
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/T_Awesome.qml")
}
}
}
FluPaneItemExpander{