first

3rd/FluentUI/example/qml/App.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+FluLauncher {
+    id: app
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+        }
+    }
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
+        }
+    }
+    Component.onCompleted: {
+        Network.openLog = false
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
+        FluTheme.animationEnabled = true
+        FluRouter.routes = {
+            "/":"qrc:/example/qml/window/MainWindow.qml",
+            "/about":"qrc:/example/qml/window/AboutWindow.qml",
+            "/login":"qrc:/example/qml/window/LoginWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
+            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
+            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml",
+            "/hotkey":"qrc:/example/qml/window/HotkeyWindow.qml"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluRouter.navigate("/")
+        }
+    }
+
+    property alias hotkeys: object_hotkey
+    FluObject{
+        id: object_hotkey
+        FluHotkey{
+            name: qsTr("Quit")
+            sequence: "Ctrl+Alt+Q"
+            onActivated: {
+                FluRouter.exit()
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test1")
+            sequence: "Alt+A"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test2")
+            sequence: "Alt+B"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test3")
+            sequence: "Alt+C"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test4")
+            sequence: "Alt+D"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test5")
+            sequence: "Alt+E"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test6")
+            sequence: "Alt+F"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test7")
+            sequence: "Alt+G"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test8")
+            sequence: "Alt+H"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/chart/T_BarChart.qml

@@ -0,0 +1,132 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/chart/T_BubbleChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bubble Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/chart/T_LineChart.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    id: root
+    title: qsTr("Line Chart")
+    property var data : []
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            id: chart
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: root.data,
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+        Timer{
+            id: timer
+            interval: 300
+            repeat: true
+            onTriggered: {
+                root.data.push(Math.random()*100)
+                if(root.data.length>7){
+                    root.data.shift()
+                }
+                chart.animateToNewData()
+            }
+        }
+        Component.onCompleted: {
+            timer.restart()
+        }
+    }
+}

3rd/FluentUI/example/qml/chart/T_PieChart.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Pie Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/chart/T_PolarAreaChart.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Polar Area Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/chart/T_RadarChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Radar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/chart/T_ScatterChart.qml

@@ -0,0 +1,122 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Scatter Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'scatter'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'My First dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-1',
+                            borderColor: '#ff5555',
+                            backgroundColor: 'rgba(255,192,192,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }, {
+                            label: 'My Second dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-2',
+                            borderColor: '#5555ff',
+                            backgroundColor: 'rgba(192,192,255,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart - Multi Axis'
+                    },
+                    scales: {
+                        xAxes: [{
+                                position: 'bottom',
+                                gridLines: {
+                                    zeroLineColor: 'rgba(0,0,0,1)'
+                                }
+                            }],
+                        yAxes: [{
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'left',
+                                id: 'y-axis-1',
+                            }, {
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'right',
+                                reverse: true,
+                                id: 'y-axis-2',
+
+                                // grid line settings
+                                gridLines: {
+                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+                                },
+                            }],
+                    }
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/component/CodeExpander.qml

@@ -0,0 +1,151 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluExpander{
+
+    id:control
+    property string code: ""
+    headerText: qsTr("Source")
+    contentHeight:content.height
+    focus: false
+
+    FluCopyableText{
+        id:content
+        width:parent.width
+        text:highlightQmlCode(code)
+        textFormat: FluCopyableText.RichText
+        padding: 10
+        topPadding: 10
+        leftPadding: 10
+        rightPadding: 10
+        bottomPadding: 10
+    }
+
+    FluIconButton{
+        iconSource:FluentIcons.Copy
+        anchors{
+            right: parent.right
+            top: parent.top
+            rightMargin: 5
+            topMargin: 5
+        }
+        onClicked:{
+            FluTools.clipText(FluTools.html2PlantText(content.text))
+            showSuccess(qsTr("The Copy is Successful"))
+        }
+    }
+
+    function htmlEncode(e){
+        var i,s;
+        for(i in s={
+                "&":/&/g,//""//":/"/g,"'":/'/g,
+                "<":/</g,">":/>/g,"<br/>":/\n/g,
+                " ":/ /g,"  ":/\t/g
+            })e=e.replace(s[i],i);
+        return e;
+    }
+
+    function highlightQmlCode(code) {
+        var qmlKeywords = [
+                    "FluTextButton",
+                    "FluAppBar",
+                    "FluAutoSuggestBox",
+                    "FluBadge",
+                    "FluButton",
+                    "FluCalendarPicker",
+                    "FluCalendarView",
+                    "FluCarousel",
+                    "FluCheckBox",
+                    "FluColorPicker",
+                    "FluColorView",
+                    "FluComboBox",
+                    "FluContentDialog",
+                    "FluContentPage",
+                    "FluDatePicker",
+                    "FluDivider",
+                    "FluDropDownButton",
+                    "FluExpander",
+                    "FluFilledButton",
+                    "FluFlipView",
+                    "FluFocusRectangle",
+                    "FluIcon",
+                    "FluIconButton",
+                    "FluInfoBar",
+                    "FluMediaPlayer",
+                    "FluMenu",
+                    "FluMenuItem",
+                    "FluMultilineTextBox",
+                    "FluNavigationView",
+                    "FluObject",
+                    "FluPaneItem",
+                    "FluPaneItemExpander",
+                    "FluPaneItemHeader",
+                    "FluPaneItemSeparator",
+                    "FluPivot",
+                    "FluPivotItem",
+                    "FluProgressBar",
+                    "FluProgressRing",
+                    "FluRadioButton",
+                    "FluRectangle",
+                    "FluScrollablePage",
+                    "FluScrollBar",
+                    "FluShadow",
+                    "FluSlider",
+                    "FluTabView",
+                    "FluText",
+                    "FluTextArea",
+                    "FluTextBox",
+                    "FluTextBoxBackground",
+                    "FluTextBoxMenu",
+                    "FluTextButton",
+                    "FluTextFiled",
+                    "FluTimePicker",
+                    "FluToggleSwitch",
+                    "FluTooltip",
+                    "FluTreeView",
+                    "FluWindow",
+                    "FluWindowResize",
+                    "FluToggleButton",
+                    "FluTableView",
+                    "FluColors",
+                    "FluTheme",
+                    "FluStatusLayout",
+                    "FluRatingControl",
+                    "FluPasswordBox",
+                    "FluBreadcrumbBar",
+                    "FluCopyableText",
+                    "FluAcrylic",
+                    "FluRemoteLoader",
+                    "FluMenuBar",
+                    "FluPagination",
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox",
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode",
+                    "FluTimeline",
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker",
+                    "FluWindowResultLauncher",
+                    "FluRouter",
+                    "FluGroupBox",
+                    "FluSheet",
+                    "FluBubbleBox",
+                    "FluCountTimer",
+                    "FluParallaxView"
+                ];
+        code = code.replace(/\n/g, "<br>");
+        code = code.replace(/ /g, "&nbsp;");
+        return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
+    }
+}

3rd/FluentUI/example/qml/global/GlobalModel.qml

@@ -0,0 +1,10 @@
+pragma Singleton
+
+import QtQuick 2.15
+import FluentUI 1.0
+
+QtObject{
+
+    property int displayMode: FluNavigationViewType.Auto
+
+}

3rd/FluentUI/example/qml/global/ItemsFooter.qml

@@ -0,0 +1,42 @@
+pragma Singleton
+
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluObject{
+
+    property var navigationView
+    property var paneItemMenu
+
+    id:footer_items
+
+    FluPaneItemSeparator{}
+
+    FluPaneItem{
+        title:qsTr("About")
+        icon:FluentIcons.Contact
+        onTapListener:function(){
+            FluRouter.navigate("/about")
+        }
+    }
+
+    FluPaneItem{
+        title:qsTr("Settings")
+        menuDelegate: paneItemMenu
+        icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onTap:{
+            navigationView.push(url)
+        }
+    }
+
+    FluPaneItem{
+        title:qsTr("FluentUI Pro")
+        menuDelegate: paneItemMenu
+        icon: FluentIcons.Airplane
+        url:"qrc:/example/qml/page/T_FluentPro.qml"
+        onTap:{
+            navigationView.push(url)
+        }
+    }
+}

3rd/FluentUI/example/qml/global/ItemsOriginal.qml

@@ -0,0 +1,582 @@
+pragma Singleton
+
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluObject{
+
+    property var navigationView
+    property var paneItemMenu
+
+    function rename(item, newName){
+        if(newName && newName.trim().length>0){
+            item.title = newName;
+        }
+    }
+
+    FluPaneItem{
+        id:item_home
+        count: 9
+        title: qsTr("Home")
+        menuDelegate: paneItemMenu
+        infoBadge: FluBadge{
+            count: item_home.count
+        }
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
+            if(navigationView.getCurrentUrl()){
+                item_home.count = 0
+            }
+            navigationView.push(url)
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("PaneItemExpander Disabled")
+        iconVisible: false
+        disabled: true
+    }
+
+    FluPaneItemExpander{
+        id: item_expander_basic_input
+        title: qsTr("Basic Input")
+        icon: FluentIcons.CheckboxComposite
+        FluPaneItem{
+            id: item_buttons
+            count: 99
+            infoBadge: FluBadge{
+                count: item_buttons.count
+            }
+            title: qsTr("Buttons")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("A control that responds to user input and raisesa Click event.")})
+            url: "qrc:/example/qml/page/T_Buttons.qml"
+            onTap: {
+                item_buttons.count = 0
+                navigationView.push(url)
+            }
+        }
+        FluPaneItem{
+            id: item_text
+            title: qsTr("Text")
+            menuDelegate: paneItemMenu
+            count: 5
+            infoBadge: FluBadge{
+                count: item_text.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
+                item_text.count = 0
+                navigationView.push(url)
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Image")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Slider")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:qsTr("A control that lets the user select from a rangeof values by moving a Thumb control along atrack.")})
+            url: "qrc:/example/qml/page/T_Slider.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("CheckBox")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
+            url: "qrc:/example/qml/page/T_CheckBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("RadioButton")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ToggleSwitch")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("GroupBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_GroupBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("PaneItem Disabled")
+            disabled: true
+            icon: FluentIcons.Error
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("TimePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("DatePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("CalendarPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ColorPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ShortcutPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ShortcutPicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Surface")
+        icon: FluentIcons.SurfaceHub
+        FluPaneItem{
+            title: qsTr("InfoBar")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
+            url: "qrc:/example/qml/page/T_InfoBar.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Progress")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("RatingControl")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Badge")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Rectangle")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Clip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Carousel")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Expander")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Watermark")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("BubbleBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_BubbleBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("SplitLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_SplitLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("StatusLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StatusLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Popus")
+        icon: FluentIcons.ButtonMenu
+        FluPaneItem{
+            title: qsTr("Dialog")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Dialog.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            id: item_combobox
+            title: qsTr("ComboBox")
+            menuDelegate: paneItemMenu
+            count: 9
+            infoBadge:FluBadge{
+                count: item_combobox.count
+                color: Qt.rgba(250/255,173/255,20/255,1)
+            }
+            url: "qrc:/example/qml/page/T_ComboBox.qml"
+            onTap: {
+                item_combobox.count = 0
+                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Tooltip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Menu")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Menu.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Sheet")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Sheet.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Navigation")
+        icon: FluentIcons.AllApps
+        FluPaneItem{
+            title: qsTr("Pivot")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
+            url: "qrc:/example/qml/page/T_Pivot.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("BreadcrumbBar")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("TabView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:qsTr("A control that displays a collection of tabs thatcan be used to display several documents.")})
+            url: "qrc:/example/qml/page/T_TabView.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("TreeView")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("TableView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:qsTr("The TableView control provides a flexible way to display a collection of data in rows and columns")})
+            url: "qrc:/example/qml/page/T_TableView.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Pagination")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("MultiWindow")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("FlipView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:qsTr("Presents a collection of items that the user canflip through, one item at a time.")})
+            url: "qrc:/example/qml/page/T_FlipView.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ParallaxView")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ParallaxView.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Theming")
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title: qsTr("Acrylic")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Theme")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Typography")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Icons")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Icons.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
+        FluPaneItem{
+            title: qsTr("Bar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Line Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_LineChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Pie Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PieChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Polar Area Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Bubble Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Scatter Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Radar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemSeparator{
+        spacing:10
+        size:1
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
+        FluPaneItem{
+            title: qsTr("OpenGL")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_OpenGL.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("QCustomPlot")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CustomPlot.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("QCustomPlot2")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CustomPlot2.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("QRCode")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Tour")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Timeline")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Pinyin")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pinyin.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("CountTimer")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CountTimer.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Captcha")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Network")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            id: item_other
+            title: qsTr("Remote Loader")
+            menuDelegate: paneItemMenu
+            count: 99
+            infoBadge:FluBadge{
+                count: item_other.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
+            url: "qrc:/example/qml/page/T_RemoteLoader.qml"
+            onTap: {
+                item_other.count = 0
+                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Hot Loader")
+            onTapListener: function(){
+                FluRouter.navigate("/hotload")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Test Crash")
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
+                arr.push(item)
+            }
+        }
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        if(!navigationView){
+            return
+        }
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem){
+                if (item.parent instanceof FluPaneItemExpander)
+                {
+                    arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
+                }
+                else
+                    arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(data){
+        navigationView.startPageByItem(data)
+    }
+
+}

3rd/FluentUI/example/qml/global/qmldir

@@ -0,0 +1,3 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml
+singleton GlobalModel 1.0 GlobalModel.qml

3rd/FluentUI/example/qml/page/T_Acrylic.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Acrylic")
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("tintColor:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("tintOpacity:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_tint_opacity
+            value: 65
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("blurRadius:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_blur_radius
+            value: 32
+        }
+    }
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 1200/4+20
+        padding: 10
+        Layout.topMargin: 10
+        FluClip{
+            width: 1920/4
+            height: 1200/4
+            radius:[8,8,8,8]
+            Image {
+                id:image
+                asynchronous: true
+                source: "qrc:/example/res/image/bg_scenic.jpg"
+                anchors.fill: parent
+                sourceSize: Qt.size(2*width,2*height)
+            }
+            FluAcrylic {
+                id:acrylic
+                target: image
+                width: 200
+                height: 200
+                tintOpacity: slider_tint_opacity.value/100
+                tintColor: color_picker.current
+                blurRadius: slider_blur_radius.value
+                x:(image.width-width)/2
+                y:(image.height-height)/2
+                FluText {
+                    anchors.centerIn: parent
+                    text: qsTr("Acrylic")
+                    color: "#FFFFFF"
+                    font: FluTextStyle.Subtitle
+                }
+                MouseArea {
+                    property point clickPos: Qt.point(0,0)
+                    id:drag_area
+                    preventStealing: true
+                    anchors.fill: parent
+                    onPressed: (mouse)=>{
+                                   clickPos = Qt.point(mouse.x, mouse.y)
+                               }
+                    onPositionChanged: (mouse)=>{
+                                           var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
+                                           acrylic.x = acrylic.x + delta.x
+                                           acrylic.y = acrylic.y + delta.y
+                                       }
+                }
+            }
+            Layout.topMargin: 20
+        }
+
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'Image{
+    id:image
+    width: 800
+    height: 600
+    source: "qrc:/example/res/image/image_huoyin.webp"
+    radius: 8
+    }
+    FluAcrylic{
+        target:image
+        width: 100
+        height: 100
+        anchors.centerIn: parent
+    }
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Badge.qml

@@ -0,0 +1,193 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Badge")
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: 120
+        padding: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: parent.right
+            }
+            FluText{
+                wrapMode: Text.WrapAnywhere
+                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")
+            }
+            Flow{
+                width: parent.width
+                spacing: 20
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:0
+                    }
+                }
+
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:5
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:50
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:1000
+                        max: 999
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        isDot:true
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:99
+                        color: Qt.rgba(250/255,173/255,20/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: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)
+                    }
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'Rectangle{
+    width: 40
+    height: 40
+    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)
+    }
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_BreadcrumbBar.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("BreadcurmbBar")
+
+    Component.onCompleted: {
+        var items = []
+        for(var i=0;i<10;i++){
+            items.push({title: qsTr("Item_%1").arg(i+1)})
+        }
+        breadcrumb_1.items = items
+        breadcrumb_2.items = items
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+
+        FluBreadcrumbBar{
+            id:breadcrumb_1
+            width:parent.width
+            anchors.verticalCenter: parent.verticalCenter
+            onClickItem:
+                (model)=>{
+                    showSuccess(model.title)
+                }
+        }
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            width:parent.width
+            spacing: 10
+
+            FluFilledButton{
+                text: qsTr("Reset sample")
+                onClicked:{
+                    var items = []
+                    for(var i=0;i<10;i++){
+                        items.push({title: qsTr("Item_")+(i+1)})
+                    }
+                     breadcrumb_2.items = items
+                }
+            }
+
+            FluBreadcrumbBar{
+                id:breadcrumb_2
+                separator:">"
+                spacing:8
+                textSize:18
+                Layout.fillWidth: true
+                onClickItem:
+                    (model)=>{
+                        if(model.index+1!==count()){
+                            breadcrumb_2.remove(model.index+1,count()-model.index-1)
+                        }
+                        showSuccess(model.title)
+                    }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluBreadcrumbBar{
+    width:parent.width
+    separator:">"
+    spacing:8
+    textSize:18
+    onClickItem: (model)=>{
+
+    }
+}'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_BubbleBox.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage {
+
+    title: qsTr("BubbleBox")
+
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: grid.height + topPadding + bottomPadding
+        padding: 10
+        Grid {
+            id: grid
+            width: parent.width
+            columns: 2
+            spacing: 20
+            RowLayout {
+                FluText {
+                    text: qsTr("bubblebox offset:")
+                }
+                FluSlider {
+                    id: boxSlider
+                    value: 0.5
+                    stepSize: 0.1
+                    from: 0
+                    to: 1
+                }
+            }
+            RowLayout {
+                FluText {
+                    text: qsTr("traingle offset:")
+                }
+                FluSlider {
+                    id: traingleSlider
+                    value: 0.5
+                    stepSize: 0.1
+                    from: 0
+                    to: 1
+                }
+            }
+            RowLayout {
+                FluText {
+                    text: qsTr("direction:")
+                }
+                FluComboBox {
+                    id: directionBox
+                    textRole: "key"
+                    valueRole: "value"
+                    model: ListModel {
+                        ListElement {
+                            key: qsTr("top")
+                            value: "top"
+                        }
+                        ListElement {
+                            key: qsTr("right")
+                            value: "right"
+                        }
+                        ListElement {
+                            key: qsTr("bottom")
+                            value: "bottom"
+                        }
+                        ListElement {
+                            key: qsTr("left")
+                            value: "left"
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 200 + topPadding + bottomPadding + bubbleBox.triangleHeight
+        padding: 10
+        FluButton {
+            id: btn
+            anchors.centerIn: parent
+            text: qsTr("Standard Button")
+        }
+        FluBubbleBox {
+            id: bubbleBox
+            width: 150
+            height: 50
+            attachTarget: btn
+            attachDirection: directionBox.currentValue
+            targetAlignRatio: boxSlider.value
+            triangleWidth: 30
+            triangleHeight: 20
+            triangleOffsetRatio: traingleSlider.value
+            FluText {
+                anchors.centerIn: parent
+                text: qsTr("BubbleBox")
+            }
+        }
+    }
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluButton {
+    id: btn
+    anchors.centerIn: parent
+    text: "Button"
+}
+FluBubbleBox {
+    id: bubbleBox
+    width: 150
+    height: 50
+    attachTarget: btn
+    attachDirection: "top"
+    targetAlignRatio: 0.5
+    triangleWidth: 30
+    triangleHeight: 20
+    triangleOffsetRatio: 0.5
+    FluText {
+        anchors.centerIn: parent
+        text: "BubbleBox"
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_Buttons.qml

@@ -0,0 +1,435 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Buttons")
+
+    FluText{
+        text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 10
+        padding: 10
+
+        FluTextButton{
+            disabled: text_button_switch.checked
+            text: qsTr("Text Button")
+            onClicked: {
+                showInfo("点击Text Button")
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: text_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTextButton{
+    text:"Text Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+
+        FluButton{
+            disabled: button_switch.checked
+            text: qsTr("Standard Button")
+            onClicked: {
+                showInfo(qsTr("Click StandardButton"))
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluButton{
+    text:"Standard Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 20
+        padding: 10
+
+        FluFilledButton{
+            disabled: filled_button_switch.checked
+            text: qsTr("Filled Button")
+            onClicked: {
+                showWarning(qsTr("Click FilledButton"))
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: filled_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluFilledButton{
+    text:"Filled Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 20
+        padding: 10
+
+        FluToggleButton{
+            disabled:toggle_button_switch.checked
+            text: qsTr("Toggle Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: toggle_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluToggleButton{
+    text:"Toggle Button"
+    onClicked: {
+        checked = !checked
+    }
+}'
+    }
+
+    Timer{
+        id: timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 20
+        padding: 10
+
+        FluProgressButton{
+            id: btn_progress
+            disabled: progress_button_switch.checked
+            text: qsTr("Progress Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
+            }
+        }
+        FluToggleSwitch{
+            id: progress_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluProgressButton{
+    text:"Progress Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 20
+        padding: 10
+
+        FluLoadingButton{
+            id: btn_loading
+            loading: loading_button_switch.checked
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Loading Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id: loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Normal")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: layout_icon_button.height + 30
+        padding: 10
+        Layout.topMargin: 20
+        Flow{
+            id: layout_icon_button
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: icon_button_switch.left
+            }
+            FluIconButton{
+                disabled: icon_button_switch.checked
+                iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
+                onClicked:{
+                    showSuccess(qsTr("Click IconButton"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("IconOnly")
+                display: Button.IconOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.IconOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextOnly")
+                display: Button.TextOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.TextOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextBesideIcon")
+                display: Button.TextBesideIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextBesideIcon"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextUnderIcon")
+                display: Button.TextUnderIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextUnderIcon"))
+                }
+            }
+        }
+        FluToggleSwitch{
+            id: icon_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluIconButton{
+    iconSource:FluentIcons.ChromeCloseContrast
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+        FluDropDownButton{
+            disabled: drop_down_button_switch.checked
+            text: qsTr("DropDownButton")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluMenuItem{
+                text: qsTr("Menu_1")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_2")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_3")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_4")
+                onClicked: {
+
+                }
+            }
+        }
+        FluToggleSwitch{
+            id: drop_down_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluDropDownButton{
+    text:"DropDownButton"
+    FluMenuItem{
+        text:"Menu_1"
+    },
+    FluMenuItem{
+        text:"Menu_2"
+    },
+    FluMenuItem{
+        text:"Menu_3"
+    },
+    FluMenuItem{
+        text:"Menu_4"
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            spacing: 8
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            enabled: !radio_button_switch.checked
+            FluRadioButton{
+                text: qsTr("Radio Button_1")
+                checked: true
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_2")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRadioButton{
+    checked:true
+    text:"Text Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_CalendarPicker.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("CalendarPicker")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluCalendarPicker{
+                onAccepted:{
+                    showSuccess(current.toLocaleString())
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCalendarPicker{
+
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Captcha.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Captcha")
+
+    FluCaptcha{
+        id: captcha
+        ignoreCase:switch_case.checked
+        MouseArea{
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                captcha.refresh()
+            }
+        }
+    }
+
+    FluButton{
+        text: qsTr("Refresh")
+        Layout.topMargin: 20
+        onClicked: {
+            captcha.refresh()
+        }
+    }
+
+    FluToggleSwitch{
+        id: switch_case
+        text: qsTr("Ignore Case")
+        checked: true
+        Layout.topMargin: 10
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluTextBox{
+            id:text_box
+            placeholderText: qsTr("Please enter a verification code")
+            Layout.preferredWidth: 240
+        }
+        FluButton{
+            text: qsTr("verify")
+            onClicked: {
+                var success =  captcha.verify(text_box.text)
+                if(success){
+                    showSuccess(qsTr("The verification code is correct"))
+                }else{
+                    showError(qsTr("Error validation, please re-enter"))
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Carousel.qml

@@ -0,0 +1,159 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Carousel")
+
+    ListModel{
+        id:data_model
+        ListElement{
+            url:"qrc:/example/res/image/banner_1.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_2.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_3.jpg"
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        padding: 10
+        ColumnLayout {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            FluText {
+                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
+            }
+            RowLayout {
+                FluText {
+                    text: qsTr("Play orientation:")
+                }
+                FluComboBox {
+                    id: orientation_box
+                    textRole: "key"
+                    valueRole: "value"
+                    model: ListModel {
+                        ListElement {
+                            key: qsTr("Horizontal")
+                            value: Qt.Horizontal
+                        }
+                        ListElement {
+                            key: qsTr("Vertical")
+                            value: Qt.Vertical
+                        }
+                    }
+                }
+                FluText {
+                    text: qsTr("Indicator position:")
+                }
+                FluComboBox {
+                    id: position_box
+                    textRole: "key"
+                    valueRole: "value"
+                    model: orientation_box.currentValue === Qt.Horizontal ? [{
+                                                                                 "key": qsTr("top"),
+                                                                                 "value": Qt.AlignHCenter | Qt.AlignTop
+                                                                             }, {
+                                                                                 "key": qsTr("bottom"),
+                                                                                 "value": Qt.AlignHCenter | Qt.AlignBottom
+                                                                             }] : [{
+                                                                                       "key": qsTr("right"),
+                                                                                       "value": Qt.AlignVCenter | Qt.AlignRight
+                                                                                   }, {
+                                                                                       "key": qsTr("left"),
+                                                                                       "value": Qt.AlignVCenter | Qt.AlignLeft
+                                                                                   }]
+                }
+            }
+            FluToggleSwitch{
+                id: auto_play_switch
+                text: qsTr("Auto play")
+                checked: true
+                textRight: false
+            }
+            Item{
+                Layout.preferredWidth: 400
+                Layout.preferredHeight: 300
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    orientation: orientation_box.currentValue
+                    autoPlay: auto_play_switch.checked
+                    loopTime:1500
+                    indicatorGravity: position_box.currentValue
+                    indicatorMarginTop: 15
+                    indicatorMarginBottom: 15
+                    indicatorMarginLeft: 15
+                    indicatorMarginRight: 15
+                    delegate: Component{
+                        Item{
+                            anchors.fill: parent
+                            Image {
+                                anchors.fill: parent
+                                source: model.url
+                                asynchronous: true
+                                fillMode:Image.PreserveAspectCrop
+                            }
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                }
+                            }
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
+                    }
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCarousel{
+    id:carousel
+    width: 400
+    height: 300
+    orientation: Qt.Vertical
+    indicatorGravity: Qt.AlignTop | Qt.AlignHCenter
+    autoPlay: true
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
+    Component.onCompleted: {
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_CheckBox.qml

@@ -0,0 +1,126 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("CheckBox")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 72
+        padding: 10
+
+        FluText{
+            text: qsTr("A 2-state CheckBox")
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
+                text: qsTr("Right")
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
+                text: qsTr("Left")
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id:check_box_switch_two
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCheckBox{
+    text:"Text"
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 72
+        padding: 10
+        Layout.topMargin: 20
+
+        FluText{
+            text: qsTr("A 3-state CheckBox")
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                text: qsTr("Three State")
+                disabled: check_box_switch_three.checked
+                tristate: true
+            }
+        }
+        FluToggleSwitch{
+            id:  check_box_switch_three
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCheckBox{
+    text:"Text"
+    tristate: true
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        padding: 10
+        Layout.topMargin: 20
+
+        ColumnLayout {
+            FluText{
+                text: qsTr("Using a 3-state CheckBox")
+            }
+            ButtonGroup {
+                id: group
+                exclusive: false
+                checkState: check_box_all.checkState
+            }
+            FluCheckBox {
+                id: check_box_all
+                text: qsTr("Select all")
+                checkState: group.checkState
+            }
+            Repeater {
+                model: 3
+                FluCheckBox {
+                    Layout.leftMargin: 24
+                    text: qsTr("Option %1").arg(index)
+                    ButtonGroup.group: group
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Clip.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Clip")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 380
+        padding: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Use with images (this component will have no effect under software rendering)")
+                Layout.topMargin: 20
+            }
+            RowLayout{
+                spacing: 14
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,0,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        source: "qrc:/example/res/svg/avatar_1.svg"
+                        sourceSize: Qt.size(width,height)
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [10,10,10,10]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_2.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_3.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [0,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_4.svg"
+                    }
+                }
+            }
+            FluClip{
+                width: 1920/5
+                height: 1200/5
+                radius: [8,8,8,8]
+                Image {
+                    asynchronous: true
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    anchors.fill: parent
+                    sourceSize: Qt.size(2*width,2*height)
+                }
+                Layout.topMargin: 20
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluClip{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/example/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_ColorPicker.qml

@@ -0,0 +1,32 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ColorPicker")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+        padding: 10
+        RowLayout{
+            FluText{
+                text: qsTr("Click to Select a Color - >")
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluColorPicker{}
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluColorPicker{
+
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_ComboBox.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ComboBox")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 5
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("editable=false")
+                x:10
+            }
+            FluComboBox {
+                model: ListModel {
+                    id: model_1
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
+                }
+            }
+        }
+    }
+
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 5
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("disabled=true")
+                x:10
+            }
+            FluComboBox {
+                disabled: true
+                model: ListModel {
+                    id: model_2
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: 80
+        padding: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("editable=true")
+                x:5
+            }
+            FluComboBox {
+                editable: true
+                model: ListModel {
+                    id: model_3
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
+                }
+                onAccepted: {
+                    if (find(editText) === -1)
+                        model_3.append({text: editText})
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:qsTr('FluComboBox{
+    editable: true
+    model: ListModel {
+        id: model
+        ListElement { text: "%1" }
+        ListElement { text: "%2" }
+        ListElement { text: "%3" }
+    }
+    onAccepted: {
+        if (find(editText) === -1)
+            model.append({text: editText})
+    }
+}').arg(qsTr("Banana"))
+   .arg(qsTr("Apple"))
+   .arg(qsTr("Coconut"))
+    }
+
+}

3rd/FluentUI/example/qml/page/T_CountTimer.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage {
+
+    title: qsTr("CountTimer")
+
+    FluFrame {
+        Layout.fillWidth: true
+        padding: 10
+        ColumnLayout {
+            RowLayout {
+                FluCountTimer {
+                    id: t1
+                    value: 25 * 3600 * 1000
+                    interval: 33
+                    format: "hh:mm:ss.zzz"
+                    Component.onCompleted: {
+                        t1.start()
+                    }
+                }
+                FluText {
+                    text: qsTr("Countdown milliseconds: %1").arg(t1.time)
+                }
+            }
+            RowLayout {
+                FluCountTimer {
+                    id: t2
+                    value: 10000
+                    Component.onCompleted: {
+                        t2.start()
+                    }
+                }
+                FluText {
+                    text: qsTr("Countdown seconds: %1").arg(t2.time)
+                }
+                FluButton {
+                    text: t2.running ? "Stop" : "Start"
+                    onClicked: {
+                        if (t2.running) {
+                            t2.stop()
+                        } else {
+                            t2.start()
+                        }
+                    }
+                }
+                FluButton {
+                    text: "Reset"
+                    onClicked: {
+                        t2.reset(10000)
+                    }
+                }
+            }
+            RowLayout {
+                FluCountTimer {
+                    id: t3
+                    countType: FluCountTimer.Countup
+                    Component.onCompleted: {
+                        t3.start()
+                    }
+                }
+                FluText {
+                    text: qsTr("Countup seconds: %1").arg(t3.time)
+                }
+                FluButton {
+                    text: t3.running ? "Stop" : "Start"
+                    onClicked: {
+                        if (t3.running) {
+                            t3.stop()
+                        } else {
+                            t3.start()
+                        }
+                    }
+                }
+                FluButton {
+                    text: "Reset"
+                    onClicked: {
+                        t3.reset(0)
+                    }
+                }
+            }
+        }
+    }
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluCountTimer {
+    countType: FluCountTimer.Countdown
+    value: 24 * 3600 * 1000
+    interval: 33
+    format: "hh:mm:ss.zzz"
+    Component.onCompleted: {
+        start()
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_CustomPlot.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluPage{
+
+    title: qsTr("QCustomPlot")
+    TimePlot {
+        id: timePlot
+        anchors.fill: parent
+        plotTimeRangeInMilliseconds: 10
+        xAxis.visible: true
+        yAxis.visible: true
+        x1Axis.visible: false
+        y1Axis.visible: false
+        yAxis.ticker.tickCount: 6
+        yAxis.ticker.ticks: false
+        yAxis.ticker.subTicks: false
+        yAxis.ticker.baseColor: "transparent"
+        yAxis.grid.lineColor: "mediumaquamarine"
+        xAxis.ticker.baseColor: "midnightblue"
+        xAxis.ticker.baseWidth: 2
+        xAxis.grid.lineColor: "transparent"
+        backgroundColor: "mistyrose"
+        Component.onCompleted: {
+            yAxis.setRange(0, 100)
+            addGraph("1")
+            graphs["1"].graphColor = "slategrey"
+        }
+    }
+    Timer {
+        running: true
+        repeat: true
+        interval: 20
+        property int data: 60
+        onTriggered: {
+            data = data - 1
+            if(data == 20) {
+                data = 60
+            }
+            timePlot.addCurrentTimeValue("1", data)
+        }
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_CustomPlot2.qml

@@ -0,0 +1,137 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import example 1.0
+import "../component"
+
+FluPage{
+    title: qsTr("QCustomPlot2")
+    RealTimePlot {
+        anchors.fill: parent          // 关键：给容器确定尺寸
+
+        id: realtimePlot
+        xAxis.visible: true
+        yAxis.visible: true
+
+        xAxis.ticker.tickCount: 2
+        xAxis.ticker.ticks: true
+        xAxis.ticker.subTicks: false
+        yAxis.ticker.tickCount: 10
+        yAxis.ticker.ticks: true
+        yAxis.ticker.subTicks: false
+
+        backgroundColor: FluTheme.dark ? Qt.rgba(39/255, 39/255, 39/255, 1) : "white"
+        baseColor: FluTheme.dark ? "white" : Qt.rgba(39/255, 39/255, 39/255, 1)
+        labelColor: FluTheme.dark ? "white" : Qt.rgba(39/255, 39/255, 39/255, 1)
+        maxBufferPoints: 20000
+        refreshMs: 30
+        initialXRange : ({"lower":0, "upper":1.0})
+        initialYRange : ({"lower":-2, "upper":2})
+        Component.onCompleted: {
+            realtimePlot.addGraph("main");
+        }
+
+        Component.onDestruction: {
+
+        }
+        // 鼠标滚轮缩放
+        MouseArea {
+            id: rtMouse
+            anchors.fill: parent
+            hoverEnabled: true
+            property double posX : 0
+            property double posY : 0
+            // 框选缩放相关
+            property bool dragging: false
+            property real startX: 0
+            property real startY: 0
+            property real curX: 0
+            property real curY: 0
+
+            onPositionChanged: function(mouse) {
+                // console.log("mouse:", mouse.x, mouse.y)
+                posX = mouse.x
+                posY = mouse.y
+                if (dragging) {
+                    curX = mouse.x
+                    curY = mouse.y
+                }
+            }
+            onPressed: function(mouse) {
+                if (mouse.button === Qt.LeftButton) {
+                    dragging = true
+                    startX = mouse.x
+                    startY = mouse.y
+                    curX = mouse.x
+                    curY = mouse.y
+                }
+            }
+            onReleased: function(mouse) {
+                if (dragging && mouse.button === Qt.LeftButton) {
+                    dragging = false
+                    // 计算选择框
+                    var x1 = Math.min(startX, curX)
+                    var y1 = Math.min(startY, curY)
+                    var x2 = Math.max(startX, curX)
+                    var y2 = Math.max(startY, curY)
+                    var selW = Math.abs(x2 - x1)
+                    var selH = Math.abs(y2 - y1)
+                    // 阈值，避免误触
+                    if (selW > 8 && selH > 8) {
+                        // 将像素坐标转换为数据坐标
+                        realtimePlot.setRangeByPixels(x1, y1, x2, y2)
+                    }
+                }
+            }
+            onWheel: function(wheel){
+                let delta = wheel.angleDelta.y;
+                if (wheel.modifiers & Qt.ControlModifier) {
+                    realtimePlot.zoomXY(posX, posY, delta > 0 ? 0.9 : 1.1, true);
+                } else {
+                    realtimePlot.moveY( delta > 0 ? -0.05 : 0.05);
+                }
+                wheel.accepted = true;
+            }
+            onDoubleClicked: function(mouse) {
+                if (mouse.button === Qt.LeftButton) {
+                    realtimePlot.resetRange();
+                }
+            }
+        }
+        // 框选可视化选区
+        Rectangle {
+            id: realtimeSelection
+            x: Math.min(rtMouse.startX, rtMouse.curX)
+            y: Math.min(rtMouse.startY, rtMouse.curY)
+            width: Math.abs(rtMouse.curX - rtMouse.startX)
+            height: Math.abs(rtMouse.curY - rtMouse.startY)
+            visible: rtMouse.dragging && width > 4 && height > 4
+            color: Qt.rgba(0, 120/255, 215/255, 0.15) // Windows 风格选区蓝
+            border.color: Qt.rgba(0, 120/255, 215/255, 0.8)
+            border.width: 1
+            z: 10
+        }
+    }
+
+    DataGenerator {
+        id: dataGenerator
+        Component.onCompleted: {
+            dataGenerator.start();
+        }
+    }
+
+    // 使用数据的示例
+    Timer {
+        interval: 50
+        running: true
+        repeat: true
+        onTriggered: {
+            // 获取最新数据
+            var xData = dataGenerator.xData
+            var yData = dataGenerator.yData
+            realtimePlot.appendBatch(xData, yData);
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_DatePicker.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("DatePicker")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("showYear=true")
+            }
+            FluDatePicker{
+                current: new Date()
+                onAccepted: {
+                    showSuccess(current.toLocaleDateString())
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluDatePicker{
+
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 80
+        padding: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("showYear=false")
+            }
+            FluDatePicker{
+                showYear: false
+                onAccepted: {
+                    showSuccess(current.toLocaleDateString())
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluDatePicker{
+    showYear:false
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Dialog.qml

@@ -0,0 +1,231 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Dialog")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        FluButton{
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Show Double Button Dialog")
+            onClicked: {
+                double_btn_dialog.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluContentDialog{
+    id:dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
+    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+    onNegativeClicked:{
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText: qsTr("OK")
+    onPositiveClicked:{
+        showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id:double_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Show Triple Button Dialog")
+            onClicked: {
+                triple_btn_dialog.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluContentDialog{
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
+    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+    negativeText: qsTr("Cancel")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText: qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+    }
+    neutralText: qsTr("Minimize")
+    onNeutralClicked: {
+        showSuccess(qsTr("Click Minimize"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id: triple_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
+        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
+        }
+        neutralText: qsTr("Minimize")
+        onNeutralClicked: {
+            showSuccess(qsTr("Click Minimize"))
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            text: qsTr("Custom Content Dialog")
+            onClicked: {
+                custom_btn_dialog.open()
+            }
+        }
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 48
+            text: qsTr("Custom Content Dialog2")
+            onClicked: {
+                custom_btn_dialog2.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluContentDialog{
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Data is loading, please wait...")
+    negativeText: qsTr("Unload")
+    contentDelegate: Component{
+        Item{
+            width: parent.width
+            height: 80
+            FluProgressRing{
+                anchors.centerIn: parent
+            }
+        }
+    }
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText :qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id: custom_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Data is loading, please wait...")
+        negativeText: qsTr("Unload")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 80
+                FluProgressRing{
+                    anchors.centerIn: parent
+                }
+            }
+        }
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClickListener: function(){
+            showError(qsTr("Test the InfoBar level on top of the Popup"))
+        }
+    }
+
+    FluContentDialog{
+        id:custom_btn_dialog2
+        title: qsTr("Line Chart")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 300
+                FluChart{
+                    anchors.fill: parent
+                    chartType: 'line'
+                    chartData: { return {
+                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                            datasets: [{
+                                    label: 'My First Dataset',
+                                    data: [65, 59, 80, 81, 56, 55, 40],
+                                    fill: false,
+                                    borderColor: 'rgb(75, 192, 192)',
+                                    tension: 0.1
+                                }]
+                        }
+                    }
+                    chartOptions: { return {
+                            maintainAspectRatio: false,
+                            title: {
+                                display: true,
+                                text: 'Chart.js Line Chart - Stacked'
+                            },
+                            tooltips: {
+                                mode: 'index',
+                                intersect: false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        buttonFlags: FluContentDialogType.PositiveButton
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Expander.qml

@@ -0,0 +1,251 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Expander")
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: layout_column.height+20
+        padding: 10
+        Column{
+            id:layout_column
+            spacing: 15
+            anchors{
+                top:parent.top
+                left:parent.left
+            }
+
+            FluExpander{
+                headerText: qsTr("Open a radio box")
+                Layout.topMargin: 20
+                Item{
+                    anchors.fill: parent
+                    ColumnLayout{
+                        spacing: 8
+                        anchors{
+                            top: parent.top
+                            left: parent.left
+                            topMargin: 15
+                            leftMargin: 15
+                        }
+                        FluRadioButton{
+                            text:"Radio Button_1"
+                        }
+                        FluRadioButton{
+                            text:"Radio Button_2"
+                        }
+                        FluRadioButton{
+                            text:"Radio Button_3"
+                        }
+                    }
+                }
+            }
+
+            FluExpander{
+                Layout.topMargin: 20
+                headerText: qsTr("Open a sliding text box")
+                Item{
+                    anchors.fill: parent
+                    Flickable{
+                        id:scrollview
+                        width: parent.width
+                        height: parent.height
+                        contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
+                        contentHeight: text_info.height
+                        ScrollBar.vertical: FluScrollBar {}
+                        FluText{
+                            id:text_info
+                            width: scrollview.width
+                            wrapMode: Text.WrapAnywhere
+                            padding: 14
+                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
+The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
+Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
+I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
+Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
+My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluExpander{
+    headerText: qsTr("Open a radio box")
+    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: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
+            }
+        }
+    }
+}'
+    }
+
+    FluFrame {
+        Layout.fillWidth: true
+        padding: 10
+        Layout.topMargin: 20
+        Column {
+            spacing: 15
+            FluExpander {
+                headerHeight: 60
+                contentHeight: content_layout.implicitHeight
+                headerDelegate: Component {
+                    Item {
+                        RowLayout {
+                            anchors {
+                                verticalCenter: parent.verticalCenter
+                                left: parent.left
+                                leftMargin: 15
+                            }
+                            spacing: 15
+                            FluImage {
+                                width: 20
+                                height: 20
+                                sourceSize.width: 20
+                                sourceSize.height: 20
+                                source: "qrc:/example/res/image/favicon.ico"
+                            }
+                            ColumnLayout {
+                                spacing: 0
+                                FluText {
+                                    text: "FluentUI"
+                                }
+                                FluText {
+                                    text: "%1".arg(AppInfo.version)
+                                    textColor: FluTheme.fontSecondaryColor
+                                    font.pixelSize: 12
+                                }
+                            }
+                        }
+                        FluLoadingButton {
+                            id: btn_checkupdate
+                            anchors {
+                                verticalCenter: parent.verticalCenter
+                                right: parent.right
+                                rightMargin: 15
+                            }
+                            text: qsTr("Check for Updates")
+                            onClicked: {
+                                loading = true;
+                                FluEventBus.post("checkUpdate");
+                            }
+                        }
+                        FluEvent {
+                            name: "checkUpdateFinish"
+                            onTriggered: {
+                                btn_checkupdate.loading = false;
+                            }
+                        }
+                    }
+                }
+                content: ColumnLayout {
+                    id: content_layout
+                    spacing: 0
+                    RowLayout {
+                        Layout.topMargin: 15
+                        Layout.leftMargin: 15
+                        spacing: 0
+                        FluText {
+                            text: "GitHub: "
+                        }
+                        FluTextButton {
+                            text: "https://github.com/zhuzichu520/FluentUI"
+                            onClicked: {
+                                Qt.openUrlExternally(text);
+                            }
+                        }
+                    }
+                    RowLayout {
+                        Layout.bottomMargin: 15
+                        Layout.leftMargin: 15
+                        spacing: 0
+                        FluText {
+                            text: "bilibili: "
+                        }
+                        FluTextButton {
+                            text: "https://www.bilibili.com/video/BV1mg4y1M71w"
+                            onClicked: {
+                                Qt.openUrlExternally(text);
+                            }
+                        }
+                    }
+                }
+            }
+
+            FluExpander {
+                contentHeight: 100
+                headerHeight: 45
+                headerDelegate: Component {
+                    Item {
+                        FluToggleButton {
+                            anchors.centerIn: parent
+                            text: qsTr("This is a ToggleButton in the header")
+                        }
+                    }
+                }
+                content: Item {
+                    anchors.fill: parent
+                    FluButton {
+                        anchors.centerIn: parent
+                        text: qsTr("This is a StandardButton in the content")
+                        onClicked: {
+                            showInfo(qsTr("Click StandardButton"))
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluExpander {
+    contentHeight: 100
+    headerHeight: 45
+    headerDelegate: Component {
+        Item {
+            FluToggleButton {
+                anchors.centerIn: parent
+                text: qsTr("This is a ToggleButton in the header")
+            }
+        }
+    }
+    content: Item {
+        anchors.fill: parent
+        FluButton {
+            anchors.centerIn: parent
+            text: qsTr("This is a StandardButton in the content")
+            onClicked: {
+                showInfo(qsTr("Click StandardButton"))
+            }
+        }
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_FlipView.qml

@@ -0,0 +1,116 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("FlipView")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 340
+        padding: 10
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("Horizontal FlipView")
+            }
+            FluFlipView{
+                Image{
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/example/res/image/banner_2.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/example/res/image/banner_3.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluFlipView{
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+}
+'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: 340
+        padding: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("Vertical FlipView")
+            }
+            FluFlipView{
+                vertical:true
+                Image{
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/example/res/image/banner_2.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/example/res/image/banner_3.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluFlipView{
+    vertical:true
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/example/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+}
+'
+    }
+}

3rd/FluentUI/example/qml/page/T_FluentPro.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: "FluentUI Pro"
+
+    Image{
+        id: iamge_logo
+        width: 80
+        height: 80
+        source: "qrc:/example/res/image/logo_pro.png"
+    }
+
+    Flickable{
+        anchors{
+            top: iamge_logo.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        ScrollBar.vertical: FluScrollBar {}
+        ScrollBar.horizontal: FluScrollBar {}
+        contentWidth: text.width
+        contentHeight: text.height
+        clip: true
+        FluText{
+            id: text
+            textFormat: Text.MarkdownText
+            onLinkActivated:
+                (link)=> {
+                    Qt.openUrlExternally(link)
+                }
+            onLinkHovered:
+                (link)=> {
+                    if(link === ""){
+                        FluTools.restoreOverrideCursor()
+                    }else{
+                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
+                    }
+                }
+            text:'
+基于[FluentUI](https://github.com/zhuzichu520/FluentUI)开源版本重新打造的项目,代码更加漂亮,API更加好用,界面更加细腻
+
+## 与开源版本有啥不同?
+
+1. 开源版本支持Qt6与Qt5.15.2,Pro版本仅支持Qt6
+2. 开源版本所有组件都有Flu前缀,Pro版本去掉Flu前缀,只需添加一行```qputenv("QT_QUICK_CONTROLS_STYLE", "FluentUI");```代码,就能将原有Button换成FluentUI样式
+3. 项目整体架构不同,开源版本代码都写在一个模块下,Pro版本分为FluentUI,FluentUI.Controls,FluentUI.impl三个模块
+4. 开源版本不支持热加载，Pro版本支持热加载，运行之后修改代码可实时关注QML界面变化，支持一键关闭开启
+5. 开源版不支持wasm编译，Pro版本支持wasm编译
+6. 开源版本过于臃肿，Pro版本做了减法，去其糟粕，取其精华，重新打造
+7. 开源版默认动态库依赖，Pro版本默认静态库依赖
+8. 开源版MIT协议免费，Pro版本付费，如有需要请联系作者wx购买：FluentUI
+
+## 下载Pro版本
+[下载地址](https://github.com/zhuzichu520/FluentUI-Pro-Installer/releases)'
+        }
+    }
+
+}

3rd/FluentUI/example/qml/page/T_GroupBox.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("GroupBox")
+
+    FluGroupBox {
+        title: qsTr("CheckBox Group")
+        ColumnLayout {
+            spacing: 10
+            anchors.fill: parent
+            FluCheckBox { text: qsTr("E-mail") }
+            FluCheckBox { text: qsTr("Calendar") }
+            FluCheckBox { text: qsTr("Contacts") }
+        }
+    }
+
+    FluGroupBox {
+        title: qsTr("RadioButton Group")
+        Layout.fillWidth: true
+        Layout.preferredHeight: 150
+        Layout.topMargin: 20
+        ColumnLayout {
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            spacing: 10
+            enabled: !radio_button_switch.checked
+            FluRadioButton { text: qsTr("E-mail") }
+            FluRadioButton { text: qsTr("Calendar") }
+            FluRadioButton { text: qsTr("Contacts") }
+        }
+        
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: 4
+        code:`
+FluGroupBox {
+    title: qsTr("CheckBox Group")
+    ColumnLayout {
+        spacing: 10
+        anchors.fill: parent
+        FluCheckBox { text: qsTr("E-mail") }
+        FluCheckBox { text: qsTr("Calendar") }
+        FluCheckBox { text: qsTr("Contacts") }
+    }
+}
+
+FluGroupBox {
+    title: qsTr("RadioButton Group")
+    ColumnLayout {
+        spacing: 10
+        FluRadioButton { text: qsTr("E-mail") }
+        FluRadioButton { text: qsTr("Calendar") }
+        FluRadioButton { text: qsTr("Contacts") }
+    }
+}
+`
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Home.qml

@@ -0,0 +1,300 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../window"
+import "../global"
+
+FluScrollablePage{
+
+    launchMode: FluPageType.SingleTask
+    animationEnabled: false
+    header: Item{}
+
+    ListModel{
+        id: model_header
+        ListElement{
+            icon: "qrc:/example/res/image/logo_pro.png"
+            title: qsTr("FluentUI Pro")
+            desc: qsTr("The latest FluentUI Pro controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI-Pro-Installer"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/ic_home_github.png"
+            title: qsTr("FluentUI GitHub")
+            desc: qsTr("The latest FluentUI controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/favicon.ico"
+            title: qsTr("FluentUI Initializr")
+            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                fluent_Initializr.showDialog()
+            }
+        }
+    }
+    Item{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 320
+        Image {
+            id: bg
+            fillMode:Image.PreserveAspectCrop
+            anchors.fill: parent
+            verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
+            source: "qrc:/example/res/image/bg_home_header.png"
+        }
+        Rectangle{
+            anchors.fill: parent
+            gradient: Gradient{
+                GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
+                GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
+            }
+        }
+        FluText{
+            text:"FluentUI Gallery"
+            font: FluTextStyle.TitleLarge
+            anchors{
+                top: parent.top
+                left: parent.left
+                topMargin: 20
+                leftMargin: 20
+            }
+        }
+        Component{
+            id:com_grallery
+            Item{
+                id: control
+                width: 220
+                height: 240
+                FluShadow{
+                    radius:5
+                    anchors.fill: item_content
+                }
+                FluClip{
+                    id:item_content
+                    radius: [5,5,5,5]
+                    width: 200
+                    height: 220
+                    anchors.centerIn: parent
+                    FluAcrylic{
+                        anchors.fill: parent
+                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        target: bg
+                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
+                        blurRadius : 40
+                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
+                    }
+                    ColumnLayout{
+                        Image {
+                            Layout.topMargin: 20
+                            Layout.leftMargin: 20
+                            Layout.preferredWidth: 50
+                            Layout.preferredHeight: 50
+                            source: model.icon
+                        }
+                        FluText{
+                            text: model.title
+                            font: FluTextStyle.Body
+                            Layout.topMargin: 20
+                            Layout.leftMargin: 20
+                        }
+                        FluText{
+                            text: model.desc
+                            Layout.topMargin: 5
+                            Layout.preferredWidth: 160
+                            Layout.leftMargin: 20
+                            color: FluColors.Grey120
+                            font.pixelSize: 12
+                            font.family: FluTextStyle.family
+                            wrapMode: Text.WrapAnywhere
+                        }
+                    }
+                    FluIcon{
+                        iconSource: FluentIcons.OpenInNewWindow
+                        iconSize: 15
+                        anchors{
+                            bottom: parent.bottom
+                            right: parent.right
+                            rightMargin: 10
+                            bottomMargin: 10
+                        }
+                    }
+                    MouseArea{
+                        id:item_mouse
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onWheel:
+                            (wheel)=>{
+                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                                else scrollbar_header.increase()
+                            }
+                        onClicked: {
+                            model.clicked(model)
+                        }
+                    }
+                }
+            }
+        }
+
+        ListView{
+            id: list
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate: com_grallery
+        }
+    }
+
+    Component{
+        id:com_item
+        Item{
+            property string desc: modelData.extra.desc
+            width: 320
+            height: 120
+            FluFrame{
+                radius: 8
+                width: 300
+                height: 100
+                anchors.centerIn: parent
+                Rectangle{
+                    anchors.fill: parent
+                    radius: 8
+                    color:{
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
+                        }
+                        return FluTheme.itemNormalColor
+                    }
+                }
+                Image{
+                    id:item_icon
+                    height: 40
+                    width: 40
+                    source: modelData.extra.image
+                    anchors{
+                        left: parent.left
+                        leftMargin: 20
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+                FluText{
+                    id:item_title
+                    text:modelData.title
+                    font: FluTextStyle.BodyStrong
+                    anchors{
+                        left: item_icon.right
+                        leftMargin: 20
+                        top: item_icon.top
+                    }
+                }
+                FluText{
+                    id:item_desc
+                    text:desc
+                    color:FluColors.Grey120
+                    wrapMode: Text.WrapAnywhere
+                    elide: Text.ElideRight
+                    font: FluTextStyle.Caption
+                    maximumLineCount: 2
+                    anchors{
+                        left: item_title.left
+                        right: parent.right
+                        rightMargin: 20
+                        top: item_title.bottom
+                        topMargin: 5
+                    }
+                }
+
+                Rectangle{
+                    height: 12
+                    width: 12
+                    radius:  6
+                    color: FluTheme.primaryColor
+                    anchors{
+                        right: parent.right
+                        top: parent.top
+                        rightMargin: 14
+                        topMargin: 14
+                    }
+                }
+
+                MouseArea{
+                    id:item_mouse
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: {
+                        ItemsOriginal.startPageByItem(modelData)
+                    }
+                }
+            }
+        }
+    }
+
+    FluText{
+        text: "Recently added samples"
+        font: FluTextStyle.Title
+        Layout.topMargin: 20
+        Layout.leftMargin: 20
+    }
+
+    GridView{
+        Layout.fillWidth: true
+        Layout.preferredHeight: contentHeight
+        cellHeight: 120
+        cellWidth: 320
+        model:ItemsOriginal.getRecentlyAddedData()
+        interactive: false
+        delegate: com_item
+    }
+
+    FluText{
+        text: "Recently updated samples"
+        font: FluTextStyle.Title
+        Layout.topMargin: 20
+        Layout.leftMargin: 20
+    }
+
+    GridView{
+        Layout.fillWidth: true
+        Layout.preferredHeight: contentHeight
+        cellHeight: 120
+        cellWidth: 320
+        interactive: false
+        model: ItemsOriginal.getRecentlyUpdatedData()
+        delegate: com_item
+    }
+
+}
+

3rd/FluentUI/example/qml/page/T_Icons.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    title: qsTr("Icons")
+
+    FluTextBox{
+        id: text_box
+        placeholderText: qsTr("Please enter a keyword")
+        anchors{
+            top: parent.top
+        }
+        onTextChanged: {
+            grid_view.model = FluApp.iconData(text_box.text, false)
+        }
+    }
+    FluToggleSwitch{
+        id: toggle_switch
+        anchors{
+            left: text_box.right
+            verticalCenter: text_box.verticalCenter
+            leftMargin: 10
+        }
+        text: qsTr("Disabled")
+    }
+    GridView{
+        id: grid_view
+        cellWidth: 110
+        cellHeight: 110
+        clip: true
+        boundsBehavior: GridView.StopAtBounds
+        model: FluApp.iconData()
+        ScrollBar.vertical: FluScrollBar {}
+        anchors{
+            topMargin: 10
+            top: text_box.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        delegate: Item {
+            width: 100
+            height: 100
+            FluIconButton{
+                id:item_icon
+                iconSource: modelData.icon
+                iconSize: 30
+                padding: 0
+                verticalPadding: 0
+                horizontalPadding: 0
+                bottomPadding: 30
+                anchors.fill: parent
+                disabled: toggle_switch.checked
+                onClicked: {
+                    var text  ="FluentIcons."+modelData.name;
+                    FluTools.clipText(text)
+                    showSuccess(qsTr("You Copied ")+text)
+                }
+                FluText{
+                    width: parent.width
+                    horizontalAlignment: Qt.AlignHCenter
+                    wrapMode: Text.WrapAnywhere
+                    text: modelData.name
+                    anchors.top: parent.top
+                    anchors.topMargin: 60
+                    enabled: !toggle_switch.checked
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Image.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Image")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 260
+        padding: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluImage{
+                width: 384
+                height: 240
+                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
+                onStatusChanged:{
+                    if(status === Image.Error){
+                        showError(qsTr("The image failed to load, please reload"))
+                    }
+                }
+                clickErrorListener: function(){
+                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluImage{
+    width: 400
+    height: 300
+    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_InfoBar.qml

@@ -0,0 +1,126 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("InfoBar")
+
+    property var info1
+    property var info2
+    property var info3
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 350
+        padding: 10
+        ColumnLayout{
+            spacing: 14
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluButton{
+                text: qsTr("Info")
+                onClicked: {
+                    showInfo(qsTr("This is an InfoBar in the Info Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("Warning")
+                onClicked: {
+                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("Error")
+                onClicked: {
+                    showError(qsTr("This is an InfoBar in the Error Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("Success")
+                onClicked: {
+                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("InfoBar that needs to be turned off manually")
+                onClicked: {
+                    showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
+                }
+            }
+            FluText{
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("Manually close the info message box")
+            }
+            Row{
+                spacing: 5
+                FluButton{
+                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info1"))
+                    onClicked: {
+                        if(info1) {
+                            info1.close()
+                            return
+                        }
+                        info1 = showInfo(qsTr("This is an '%1'").arg(qsTr("info1")), 0)
+                        info1.close()
+                    }
+                }
+                FluButton{
+                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info2"))
+                    onClicked: {
+                        if(info2) {
+                            info2.close()
+                            return
+                        }
+                        info2 = showInfo(qsTr("This is an '%1'").arg(qsTr("info2")), 0)
+                    }
+                }
+                FluButton{
+                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info3"))
+                    onClicked: {
+                        if(info3) {
+                            info3.close()
+                            return
+                        }
+                        info3 = showInfo(qsTr("This is an '%1'").arg(qsTr("info3")), 0)
+                    }
+                }
+                FluButton{
+                    text: qsTr("clear all info")
+                    onClicked: {
+                        clearAllInfo()
+                    }
+                }
+            }
+
+            FluButton{
+                text: qsTr("Loading")
+                onClicked: {
+                    showLoading()
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:`
+showInfo(qsTr("This is an InfoBar in the Info Style"))
+
+showWarning(qsTr("This is an InfoBar in the Warning Style"))
+
+showError(qsTr("This is an InfoBar in the Error Style"))
+
+showSuccess(qsTr("This is an InfoBar in the Success Style"))
+
+var info1 = showInfo(qsTr("This is an 'Info1'"), 0)
+info1.close()
+`
+    }
+}

3rd/FluentUI/example/qml/page/T_Menu.qml

@@ -0,0 +1,170 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Menu")
+
+    FluMenu {
+        id:menu
+        title: qsTr("File")
+        Action { text: qsTr("New...")}
+        Action { text: qsTr("Open...") }
+        Action { text: qsTr("Save") }
+        FluMenuSeparator { }
+        FluMenuItem{
+            text: qsTr("Quit")
+            onTriggered: {
+                showError("Quit")
+            }
+        }
+        FluMenuItem{
+            text: qsTr("Search")
+            iconSource: FluentIcons.Zoom
+            iconSpacing: 3
+            onTriggered: {
+                showError(qsTr("Search"))
+            }
+        }
+        Action {
+            text: qsTr("Disable")
+            enabled:false
+            onTriggered: {
+                showError(qsTr("Disable"))
+            }
+        }
+        FluMenuSeparator { }
+        Action { text: qsTr("Check");checkable: true;checked: true}
+        FluMenu{
+            title: qsTr("Save As...")
+            Action { text: qsTr("Doc") }
+            Action { text: qsTr("PDF") }
+        }
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Column{
+            id: layout_column
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+
+            FluText{
+                text: qsTr("Menu")
+            }
+
+            FluButton{
+                text: qsTr("Show Menu Popup")
+                Layout.topMargin: 20
+                onClicked:{
+                    menu.popup()
+                }
+            }
+
+
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluMenu{
+    id:menu
+    FluMenuItem:{
+        text:"删除"
+        onClicked: {
+            showError("删除")
+        }
+    }
+    FluMenuItem:{
+        text:"修改"
+        onClicked: {
+            showInfo("修改")
+        }
+    }
+}
+menu.popup()
+'
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+
+            FluText{
+                text: qsTr("MenuBar")
+            }
+
+            FluMenuBar {
+                id:menu_bar
+                FluMenu {
+                    title: qsTr("File")
+                    Action { text: qsTr("New...") }
+                    Action { text: qsTr("Open...") }
+                    Action { text: qsTr("Save") }
+                    FluMenuSeparator { }
+                    Action { text: qsTr("Quit") }
+                    Action {
+                        text: qsTr("Disable")
+                        enabled:false
+                    }
+                    FluMenu{
+                        title: qsTr("Save As...")
+                        Action { text: qsTr("Doc") }
+                        Action { text: qsTr("PDF") }
+                    }
+                }
+                FluMenu {
+                    title: qsTr("Edit")
+                    Action { text: qsTr("Cut") }
+                    Action { text: qsTr("Copy") }
+                    Action { text: qsTr("Paste") }
+                }
+                FluMenu {
+                    title: qsTr("Help")
+                    Action { text: qsTr("About") }
+                }
+            }
+
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluMenuBar{
+    id:menu
+    FluMenu:{
+        title:"File"
+        Action { text: qsTr("New...") }
+    }
+    FluMenu:{
+        title:"Edit"
+        Action { text: qsTr("Cut") }
+        Action { text: qsTr("Copy") }
+        Action { text: qsTr("Paste") }
+    }
+}
+menu.popup()
+'
+    }
+}

3rd/FluentUI/example/qml/page/T_MultiWindow.qml

@@ -0,0 +1,185 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    property string password: ""
+
+    title: qsTr("MultiWindow")
+
+    FluWindowResultLauncher{
+        id:loginResultLauncher
+        path: "/login"
+        onResult:
+            (data)=>{
+                password = data.password
+            }
+
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 86
+        padding: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    FluRouter.navigate("/standardWindow")
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 86
+        padding: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
+                textFormat: Text.RichText
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    FluRouter.navigate("/singleTaskWindow")
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 86
+        padding: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    FluRouter.navigate("/singleInstanceWindow")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluWindow{
+  //launchMode: FluWindowType.Standard
+  //launchMode: FluWindowType.SingleTask
+     launchMode: FluWindowType.SingleInstance
+}
+'
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Create the window without carrying any parameters")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    FluRouter.navigate("/about")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluButton{
+    text: qsTr("Create Window")
+    onClicked: {
+        FluRouter.navigate("/about")
+    }
+}
+'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 130
+        padding: 10
+        Layout.topMargin: 20
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Create a window with the parameter username: zhuzichu")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    loginResultLauncher.launch({username:"zhuzichu"})
+                }
+            }
+            FluText{
+                text:qsTr("Login Window Returned Password - >")+password
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluWindowResultLauncher{
+    id:loginResultLauncher
+    path: "/login"
+    onResult:
+        (data)=>{
+            password = data.password
+     }
+}
+
+FluButton{
+    text: qsTr("Create Window")
+    onClicked: {
+        loginResultLauncher.launch({username:"zhuzichu"})
+    }
+}
+'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Network.qml

@@ -0,0 +1,560 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import Qt.labs.platform 1.0
+import example 1.0
+import "../component"
+
+FluContentPage{
+
+    id:root
+    title: qsTr("Network")
+
+    NetworkCallable{
+        id:callable
+        onStart: {
+            showLoading()
+        }
+        onFinish: {
+            hideLoading()
+        }
+        onError:
+            (status,errorString,result)=>{
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onCache:
+            (result)=>{
+                text_info.text = result
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+    }
+
+    Flickable{
+        id:layout_flick
+        width: 200
+        clip: true
+        anchors{
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+        }
+        boundsBehavior: Flickable.StopAtBounds
+        ScrollBar.vertical: FluScrollBar {}
+        contentHeight:layout_column.height
+        Column{
+            spacing: 2
+            id:layout_column
+            width: parent.width
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Get"
+                onClicked: {
+                    text_info.text = ""
+                    Network.get("https://httpbingo.org/get")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Head"
+                onClicked: {
+                    text_info.text = ""
+                    Network.head("https://httpbingo.org/head")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Body"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postBody("https://httpbingo.org/post")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Form"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postForm("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post JSON"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJsonArray("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put Body"
+                onClicked: {
+                    text_info.text = ""
+                    Network.putBody("https://httpbingo.org/put")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put Form"
+                onClicked: {
+                    text_info.text = ""
+                    Network.putForm("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put JSON"
+                onClicked: {
+                    text_info.text = ""
+                    Network.putJson("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    Network.putJsonArray("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch Body"
+                onClicked: {
+                    text_info.text = ""
+                    Network.patchBody("https://httpbingo.org/patch")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch Form"
+                onClicked: {
+                    text_info.text = ""
+                    Network.patchForm("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch JSON"
+                onClicked: {
+                    text_info.text = ""
+                    Network.patchJson("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    Network.patchJsonArray("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete Body"
+                onClicked: {
+                    text_info.text = ""
+                    Network.deleteBody("https://httpbingo.org/delete")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete Form"
+                onClicked: {
+                    text_info.text = ""
+                    Network.deleteForm("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete JSON"
+                onClicked: {
+                    text_info.text = ""
+                    Network.deleteJson("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    Network.deleteJsonArray("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Open Log"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .openLog(true)
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Custom Header"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .addHeader("os","PC")
+                    .addHeader("version","1.0.0")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "RequestFailedReadCache"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.RequestFailedReadCache)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","RequestFailedReadCache")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "IfNoneCacheRequest"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.IfNoneCacheRequest)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","IfNoneCacheRequest")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "FirstCacheThenRequest"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.FirstCacheThenRequest)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","FirstCacheThenRequest")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Timeout And Retry"
+                onClicked: {
+                    text_info.text = ""
+                    Network.postJson("https://httpbingo.org/post")
+                    .setTimeout(5000)
+                    .setRetry(3)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("timeout","5000")
+                    .add("retry","3")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluProgressButton{
+                id:btn_upload
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Upload File"
+                onClicked: {
+                    file_dialog.open()
+                }
+            }
+            FluProgressButton{
+                id:btn_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Download File"
+                onClicked: {
+                    folder_dialog.showDialog(function(path){
+                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        .toDownload(path)
+                        .bind(root)
+                        .go(callable_download_file)
+                    })
+                }
+            }
+            FluProgressButton{
+                id:btn_download_breakpoint
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Breakpoint Download File"
+                onClicked: {
+                    folder_dialog.showDialog(function(path){
+                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        .toDownload(path,true)
+                        .bind(root)
+                        .go(callable_breakpoint_download_file)
+                    })
+                }
+            }
+        }
+    }
+
+    NetworkCallable{
+        id:callable_upload_file
+        onStart: {
+            btn_upload.disabled = true
+        }
+        onFinish: {
+            btn_upload.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_upload.progress = 0
+                text_info.text = result
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onUploadProgress:
+            (sent,total)=>{
+                btn_upload.progress = sent/total
+            }
+    }
+
+    NetworkCallable{
+        id:callable_download_file
+        onStart: {
+            btn_download.progress = 0
+            btn_download.disabled = true
+        }
+        onFinish: {
+            btn_download.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_download.progress = 0
+                showError(errorString)
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                showSuccess(result)
+            }
+        onDownloadProgress:
+            (recv,total)=>{
+                btn_download.progress = recv/total
+            }
+    }
+
+    NetworkCallable{
+        id:callable_breakpoint_download_file
+        onStart: {
+            btn_download_breakpoint.progress = 0
+            btn_download_breakpoint.disabled = true
+        }
+        onFinish: {
+            btn_download_breakpoint.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_download_breakpoint.progress = 0
+                showError(errorString)
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                showSuccess(result)
+            }
+        onDownloadProgress:
+            (recv,total)=>{
+                btn_download_breakpoint.progress = recv/total
+            }
+    }
+
+    FileDialog {
+        id: file_dialog
+        onAccepted: {
+            Network.postForm("https://httpbingo.org/post")
+            .setRetry(1)//只请求一次
+            .add("accessToken","12345678")
+            .addFile("file",FluTools.toLocalPath(file_dialog.currentFile))
+            .bind(root)
+            .go(callable_upload_file)
+        }
+    }
+
+    FileDialog {
+        property var onSelectListener
+        id: folder_dialog
+        folder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+        currentFile: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]+"/oceans.mp4"
+        fileMode: FileDialog.SaveFile
+        onAccepted: {
+            folder_dialog.onSelectListener(FluTools.toLocalPath(folder_dialog.currentFile))
+        }
+        function showDialog(listener){
+            folder_dialog.onSelectListener = listener
+            folder_dialog.open()
+        }
+    }
+
+    FluFrame{
+        anchors{
+            top: layout_flick.top
+            bottom: layout_flick.bottom
+            left: layout_flick.right
+            right: parent.right
+            leftMargin: 8
+        }
+        Flickable{
+            clip: true
+            id:scrollview
+            boundsBehavior:Flickable.StopAtBounds
+            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
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_OpenGL.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import example 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("OpenGL")
+
+    FluFrame{
+        anchors.fill: parent
+        OpenGLItem{
+            anchors.fill: parent
+            SequentialAnimation on t {
+                NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad }
+                NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad }
+                loops: Animation.Infinite
+                running: true
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Pagination.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import "../component"
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title: qsTr("Pagination")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 200
+        padding: 10
+        ColumnLayout{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluPagination{
+                pageCurrent: 1
+                pageButtonCount: 5
+                itemCount: 5000
+            }
+            FluPagination{
+                pageCurrent: 2
+                itemCount: 5000
+                pageButtonCount: 7
+            }
+            FluPagination{
+                pageCurrent: 3
+                itemCount: 5000
+                pageButtonCount: 9
+            }
+        }
+
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluPagination{
+    pageCurrent: 1
+    itemCount: 1000
+    pageButtonCount: 9
+}'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_ParallaxView.qml

@@ -0,0 +1,161 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage {
+
+    title: qsTr("ParallaxView")
+
+    FluFrame {
+        Layout.fillWidth: true
+        padding: 10
+        ColumnLayout {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            RowLayout {
+                FluText {
+                    text: qsTr("Background size mode:")
+                }
+                FluComboBox {
+                    id: mode_box
+                    textRole: "key"
+                    valueRole: "value"
+                    model: ListModel {
+                        ListElement {
+                            key: qsTr("Auto")
+                            value: "auto"
+                        }
+                        ListElement {
+                            key: qsTr("Cover")
+                            value: "cover"
+                        }
+                        ListElement {
+                            key: qsTr("Fixed")
+                            value: "fixed"
+                        }
+                    }
+                }
+            }
+            RowLayout {
+                FluText {
+                    text: qsTr("Speed:")
+                }
+                FluSlider{
+                    id: speed_slider
+                    from: 0
+                    to: 1
+                    stepSize: 0.1
+                    value: 0.5
+                }
+            }
+            FluParallaxView {
+                id: view1
+                width: 1920 / 4
+                height: 1200 / 4
+                backgroundSizeMode: mode_box.currentValue
+                speed: speed_slider.value
+                backgroundItem: FluImage {
+                    source: "qrc:/example/res/image/bg_scenic.jpg"
+                    sourceSize: Qt.size(2 * width, 2 * height)
+                }
+                backgroundAcrylic.blurRadius: 16
+                Repeater {
+                    model: 20
+                    Item {
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: view1.height / 10
+                        FluText {
+                            anchors.centerIn: parent
+                            text: "Item %1".arg(index + 1)
+                            color: FluColors.Grey10
+                        }
+                    }
+                }
+            }
+        }
+    }
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluParallaxView {
+    id: view1
+    width: 1920 / 4
+    height: 1200 / 4
+    backgroundItem: FluImage {
+        source: "qrc:/example/res/image/bg_scenic.jpg"
+        sourceSize: Qt.size(2 * width, 2 * height)
+    }
+    backgroundAcrylic.blurRadius: 16
+    Repeater {
+        model: 20
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: view1.height / 10
+            FluText {
+                anchors.centerIn: parent
+                text: "Item %1".arg(index + 1)
+                color: FluColors.Grey10
+            }
+        }
+    }
+}'
+    }
+
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: view2.height + topPadding + bottomPadding
+        Layout.topMargin: 20
+        padding: 10
+        FluParallaxView {
+            id: view2
+            width: 1920 / 4
+            height: 1200 / 4
+            radius: [8, 8, 8, 8]
+            backgroundItem: Rectangle {
+                gradient: Gradient.RainyAshville
+            }
+            Repeater {
+                model: 50
+                Item {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: view2.height / 10
+                    FluText {
+                        anchors.centerIn: parent
+                        text: "Item %1".arg(index + 1)
+                        color: FluColors.Grey10
+                    }
+                }
+            }
+        }
+    }
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluParallaxView {
+    id: view2
+    width: 1920 / 4
+    height: 1200 / 4
+    radius: [8, 8, 8, 8]
+    backgroundItem: Rectangle {
+        gradient: Gradient.RainyAshville
+    }
+    Repeater {
+        model: 50
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: view2.height / 10
+            FluText {
+                anchors.centerIn: parent
+                text: "Item %1".arg(index + 1)
+                color: FluColors.Grey10
+            }
+        }
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_Pivot.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Pivot")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 400
+        padding: 10
+
+        FluPivot{
+            anchors.fill: parent
+            currentIndex: 2
+
+            FluPivotItem{
+                title: qsTr("All")
+                contentItem:FluText{
+                    text: qsTr("All emails go here.")
+                }
+            }
+            FluPivotItem{
+                title: qsTr("Unread")
+                contentItem: FluText{
+                    text: qsTr("Unread emails go here.")
+                }
+            }
+            FluPivotItem{
+                title: qsTr("Flagged")
+                contentItem: FluText{
+                    text: qsTr("Flagged emails go here.")
+                }
+            }
+            FluPivotItem{
+                title: qsTr("Urgent")
+                contentItem: FluText{
+                    text: qsTr("Urgent emails go here.")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluPivot{
+    anchors.fill: parent
+    FluPivotItem {
+        title: qsTr("All")
+        contentItem: FluText{
+            text: qsTr("All emails go here.")
+        }
+    }
+    FluPivotItem {
+        title: qsTr("Unread")
+        contentItem: FluText{
+            text: qsTr("Unread emails go here.")
+        }
+    }
+    FluPivotItem {
+        title: qsTr("Flagged")
+        contentItem: FluText{
+            text: qsTr("Flagged emails go here.")
+        }
+    }
+    FluPivotItem {
+        title: qsTr("Urgent")
+        contentItem: FluText{
+            text: qsTr("Urgent emails go here.")
+        }
+    }
+}
+'
+    }
+}

3rd/FluentUI/example/qml/page/T_Progress.qml

@@ -0,0 +1,102 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Progress")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 130
+        padding: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: "indeterminate = true"
+            }
+            FluProgressBar{
+            }
+            FluProgressRing{
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluProgressBar{
+
+}
+FluProgressRing{
+
+}
+'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 286
+        padding: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: "indeterminate = false"
+            }
+            FluProgressBar{
+                indeterminate: false
+                value:slider.value/100
+                Layout.topMargin: 10
+            }
+            FluProgressBar{
+                indeterminate: false
+                value:slider.value/100
+                progressVisible: true
+                Layout.topMargin: 10
+            }
+            FluProgressRing{
+                indeterminate: false
+                value: slider.value/100
+                Layout.topMargin: 10
+            }
+            FluProgressRing{
+                progressVisible: true
+                indeterminate: false
+                value: slider.value/100
+            }
+            FluSlider{
+                id:slider
+                Component.onCompleted: {
+                    value = 50
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluProgressBar{
+    indeterminate: false
+}
+FluProgressRing{
+    indeterminate: false
+    progressVisible: true
+}
+'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_QRCode.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("QRCode")
+
+    FluQRCode{
+        id:qrcode
+        size:slider_size.value
+        text:text_box.text
+        color:color_picker.current
+        bgColor: bgcolor_picker.current
+        margins:slider_margins.value
+        Layout.preferredWidth: size
+        Layout.preferredHeight: size
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 20
+        FluText{
+            text: qsTr("text:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluTextBox{
+            id:text_box
+            text:"会磨刀的小猪"
+            Layout.preferredWidth: 240
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text: qsTr("color:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+            current: Qt.rgba(0,0,0,1)
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text: qsTr("bgColor:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:bgcolor_picker
+            current: Qt.rgba(1,1,1,1)
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("margins:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_margins
+            from:0
+            to:80
+            value: 0
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("size:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_size
+            from:120
+            to:260
+            value: 120
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        code:'FluQRCode{
+    color:"red"
+    text:"会磨刀的小猪"
+    size:100
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_RadioButton.qml

@@ -0,0 +1,179 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("RadioButton")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            ButtonGroup {
+                id: group1
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                autoExclusive: false
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                text: qsTr("Right")
+                ButtonGroup.group: group1
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                text: qsTr("Left")
+                textRight: false
+                ButtonGroup.group: group1
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'Row{
+    spacing: 30
+    ButtonGroup {
+        id: group
+    }
+    FluRadioButton{
+        autoExclusive: false
+    }
+    FluRadioButton{
+        text: Right
+        ButtonGroup.group: group
+    }
+    FluRadioButton{
+        text: "Left"
+        textRight: false
+        ButtonGroup.group: group
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            spacing: 8
+            enabled: !radio_button_switch2.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            ButtonGroup {
+                id: group2
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_1")
+                ButtonGroup.group: group2
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_2")
+                checked: true
+                ButtonGroup.group: group2
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_3")
+                ButtonGroup.group: group2
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch2
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'ColumnLayout{
+    spacing: 8
+    ButtonGroup{
+        id: group
+    }
+    FluRadioButton{
+        text:"Radio Button_1"
+        ButtonGroup.group: group
+    }
+    FluRadioButton{
+        text:"Radio Button_2"
+        ButtonGroup.group: group
+    }
+    FluRadioButton{
+        text:"Radio Button_3"
+        ButtonGroup.group: group
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+        padding: 10
+        Layout.topMargin: 20
+        RowLayout{
+            spacing: 8
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            enabled: !radio_button_switch3.checked
+            FluRadioButton{
+                text: qsTr("Radio Button_1")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_2")
+                checked: true
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch3
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'RowLayout{
+    spacing: 8
+    FluRadioButton{
+        text:"Radio Button_1"
+    }
+    FluRadioButton{
+        text:"Radio Button_2"
+    }
+    FluRadioButton{
+        text:"Radio Button_3"
+    }
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_RatingControl.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage {
+
+    title: qsTr("RatingControl")
+
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+
+        Column {
+            spacing: 10
+            anchors.verticalCenter: parent.verticalCenter
+            FluRatingControl {}
+            FluRatingControl {
+                number: 10
+            }
+        }
+    }
+
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluRatingControl{
+
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_Rectangle.qml

@@ -0,0 +1,95 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Rectangle")
+
+    FluFrame{
+        Layout.fillWidth: true
+        padding: 10
+
+        Flow{
+            width: parent.width
+            spacing: 15
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#0078d4"
+                radius:[0,0,0,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#744da9"
+                radius:[15,15,15,15]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#ffeb3b"
+                radius:[15,0,0,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#f7630c"
+                radius:[0,15,0,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#e71123"
+                radius:[0,0,15,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#b4009e"
+                radius:[0,0,0,15]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#a8d5ba"
+                radius:[15,15,15,15]
+                borderWidth: 3
+                borderColor: "#5b8a72"
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                radius:[15,0,0,0]
+                borderWidth: 2
+                borderColor: "#3f72af"
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                borderWidth: 2
+                borderColor: "#3f72af"
+                borderStyle: Qt.DashLine
+                dashPattern: [4,2]
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRectangle{
+    radius: [25,25,25,25]
+    borderWidth: 2
+    borderColor: "#000000"
+    borderStyle: Qt.DashLine
+    dashPattern: [4,2]
+    width: 50
+    height: 50
+}'
+    }
+}

3rd/FluentUI/example/qml/page/T_RemoteLoader.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluPage{
+    launchMode: FluPageType.SingleTop
+    FluRemoteLoader{
+        anchors.fill: parent
+        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
+    }
+}

3rd/FluentUI/example/qml/page/T_Settings.qml

@@ -0,0 +1,191 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+import "../global"
+
+FluScrollablePage{
+
+    title: qsTr("Settings")
+
+    FluEvent{
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 60
+        padding: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id: btn_checkupdate
+                text: qsTr("Check for Updates")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        padding: 10
+        FluCheckBox{
+            text: qsTr("Use System AppBar")
+            checked: FluApp.useSystemAppBar
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        padding: 10
+        FluCheckBox{
+            text:qsTr("Fits AppBar Windows")
+            checked: window.fitsAppBarWindows
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                window.fitsAppBarWindows = !window.fitsAppBarWindows
+            }
+        }
+    }
+
+    FluContentDialog{
+        id: dialog_restart
+        title: qsTr("Friendly Reminder")
+        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            FluRouter.exit(931)
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 128
+        padding: 10
+
+        ColumnLayout{
+            spacing: 5
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Dark Mode")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Repeater{
+                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("Dark"),mode:FluThemeType.Dark}]
+                delegate: FluRadioButton{
+                    checked : FluTheme.darkMode === modelData.mode
+                    text:modelData.title
+                    clickListener:function(){
+                        FluTheme.darkMode = modelData.mode
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 160
+        padding: 10
+
+        ColumnLayout{
+            spacing: 5
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text:qsTr("Navigation View Display Mode")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Repeater{
+                model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
+                delegate: FluRadioButton{
+                    text: modelData.title
+                    checked: GlobalModel.displayMode === modelData.mode
+                    clickListener:function(){
+                        GlobalModel.displayMode = modelData.mode
+                    }
+                }
+            }
+        }
+    }
+
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        padding: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text:qsTr("Language")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Flow{
+                spacing: 5
+                Repeater{
+                    model: TranslateHelper.languages
+                    delegate: FluRadioButton{
+                        checked: TranslateHelper.current === modelData
+                        text:modelData
+                        clickListener:function(){
+                            TranslateHelper.current = modelData
+                            dialog_restart.open()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Sheet.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Sheet")
+
+    FluSheet{
+        id:sheet
+        title: qsTr("Title")
+        FluText{
+            text: qsTr("Some contents...\nSome contents...\nSome contents...")
+            anchors{
+                left: parent.left
+                leftMargin: 10
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 280
+        padding: 10
+        Column{
+            anchors.centerIn: parent
+            spacing: 10
+            Row{
+                spacing: 10
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("top")
+                    onClicked: {
+                        sheet.open(FluSheetType.Top)
+                    }
+                }
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("right")
+                    onClicked: {
+                        sheet.open(FluSheetType.Right)
+                    }
+                }
+            }
+            Row{
+                spacing: 10
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("bottom")
+                    onClicked: {
+                        sheet.open(FluSheetType.Bottom)
+                    }
+                }
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("left")
+                    onClicked: {
+                        sheet.open(FluSheetType.Left)
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluSheet{
+    id:sheet
+    title: qsTr("Title")
+    FluText{
+        text: qsTr("Some contents...")
+        anchors{
+            left: parent.left
+            leftMargin: 10
+        }
+    }
+}
+sheet.open(FluSheetType.Bottom)
+'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_ShortcutPicker.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ShortcutPicker")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: childrenRect.height
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            Item{
+                Layout.preferredHeight: 15
+            }
+            Repeater{
+                model: FluApp.launcher.hotkeys.children
+                delegate: FluShortcutPicker{
+                    text: model.name
+                    syncHotkey: FluApp.launcher.hotkeys.children[index]
+                    Layout.leftMargin: 15
+                }
+            }
+            Item{
+                Layout.preferredHeight: 15
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluShortcutPicker{
+
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Slider.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Slider")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 200
+        padding: 10
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluSlider{
+    value:50
+}'
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 200
+        Layout.topMargin: 20
+        padding: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRangeSlider{
+    orientation: Qt.Vertical
+}'
+    }
+}
+

3rd/FluentUI/example/qml/page/T_SplitLayout.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("SplitLayout")
+
+    RowLayout{
+        id:layout_dropdown
+        anchors{
+            top: parent.top
+        }
+        FluText{
+            text: qsTr("orientation:")
+        }
+        FluDropDownButton{
+            id:btn_orientation
+            Layout.preferredWidth: 120
+            text: qsTr("Horizontal")
+            FluMenuItem{
+                text: qsTr("Horizontal")
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Horizontal
+                }
+            }
+            FluMenuItem{
+                text: qsTr("Vertical")
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Vertical
+                }
+            }
+        }
+    }
+    FluSplitLayout {
+        id:split_layout
+        anchors{
+            top: layout_dropdown.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            topMargin: 8
+        }
+        orientation: Qt.Horizontal
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            SplitView.maximumWidth: 400
+            SplitView.maximumHeight: 400
+            FluText {
+                text: qsTr("Page 1")
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            id: centerItem
+            SplitView.minimumWidth: 50
+            SplitView.minimumHeight: 50
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            FluText {
+                text: qsTr("Page 2")
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            FluText {
+                text: qsTr("Page 3")
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_StaggeredLayout.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("StaggeredLayout")
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+    ListModel{
+        id:list_model
+        Component.onCompleted: {
+            for(var i=0;i<=100;i++){
+                var item = {}
+                item.color = colors[rand(0,7)]
+                item.height = rand(100,300)
+                append(item)
+            }
+        }
+
+    }
+
+    Flickable{
+        id: scroll
+        anchors.fill: parent
+        boundsBehavior:Flickable.StopAtBounds
+        contentHeight: staggered_view.implicitHeight
+        clip: true
+        ScrollBar.vertical: FluScrollBar {}
+        FluStaggeredLayout{
+            id:staggered_view
+            width: parent.width
+            itemWidth: 160
+            model:list_model
+            delegate: Rectangle{
+                height: model.height
+                color:model.color.normal
+                FluText{
+                    color:"#FFFFFF"
+                    text:model.index
+                    font: FluTextStyle.Title
+                    anchors.centerIn: parent
+                }
+            }
+        }
+    }
+
+    function rand(minNum, maxNum){
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+    }
+
+}

3rd/FluentUI/example/qml/page/T_StatusLayout.qml

@@ -0,0 +1,85 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("StatusLayout")
+
+    FluFrame{
+        id:layout_actions
+        Layout.fillWidth: true
+        Layout.preferredHeight: 50
+        padding: 10
+        RowLayout{
+            spacing: 14
+            FluDropDownButton{
+                id:btn_status_mode
+                Layout.preferredWidth: 140
+                text: qsTr("Loading")
+                FluMenuItem{
+                    text: qsTr("Loading")
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusLayoutType.Loading
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("Empty")
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusLayoutType.Empty
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("Error")
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusLayoutType.Error
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("Success")
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusLayoutType.Success
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 10
+        Layout.preferredHeight: 380
+        padding: 10
+        FluStatusLayout{
+            id:status_view
+            anchors.fill: parent
+            onErrorClicked:{
+                status_view.statusMode = FluStatusLayoutType.Loading
+            }
+            Rectangle {
+                anchors.fill: parent
+                color:FluTheme.primaryColor
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluStatusLayout{
+    anchors.fill: parent
+    statusMode: FluStatusLayoutType.Loading
+    Rectangle{
+        anchors.fill: parent
+        color:FluTheme.primaryColor
+    }
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_TabView.qml

@@ -0,0 +1,134 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+    title: qsTr("TabView")
+
+    Component{
+        id:com_page
+        Rectangle{
+            anchors.fill: parent
+            color: argument.normal
+        }
+    }
+
+    function newTab(){
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
+    }
+
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 50
+        padding: 10
+        RowLayout{
+            spacing: 14
+            FluCopyableText{
+                text: qsTr("Tab Width Behavior:")
+            }
+            FluDropDownButton{
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:  qsTr("Equal")
+                FluMenuItem{
+                    text: qsTr("Equal")
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.Equal
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("SizeToContent")
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("Compact")
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.Compact
+                    }
+                }
+            }
+            FluCopyableText{
+                text: qsTr("Tab Close Button Visibility:")
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text: qsTr("Always")
+                Layout.preferredWidth: 120
+                FluMenuItem{
+                    text: qsTr("Never")
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("Always")
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.Always
+                    }
+                }
+                FluMenuItem{
+                    text: qsTr("OnHover")
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 15
+        Layout.preferredHeight: 400
+        padding: 10
+        FluTabView{
+            id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        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:/example/res/image/favicon.ico","Document 1",com_page,argument)
+    }
+}
+'
+    }
+}

3rd/FluentUI/example/qml/page/T_TableView.qml

@@ -0,0 +1,624 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    id:root
+    title: qsTr("TableView")
+    property int sortType: 0
+    property int allCheckState: Qt.Checked
+    property string nameKeyword: ""
+    signal checkBoxChanged
+
+    onNameKeywordChanged: {
+        table_view.filter(function(item){
+            if(item.name.includes(nameKeyword)){
+                return true
+            }
+            return false
+        })
+    }
+
+    Component.onCompleted: {
+        loadData(1,1000)
+    }
+
+    onCheckBoxChanged: {
+        updateAllCheck()
+    }
+
+    onSortTypeChanged: {
+        table_view.closeEditor()
+        if(sortType === 0){
+            table_view.sort()
+        }else if(sortType === 1){
+            table_view.sort(
+                        (l, r) =>{
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage>rage
+                        });
+        }else if(sortType === 2){
+            table_view.sort(
+                        (l, r) => {
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage<rage
+                        });
+        }
+    }
+
+    FluContentDialog{
+        id:custom_update_dialog
+        property var text
+        property var onAccpetListener
+        title: qsTr("Modify the column name")
+        negativeText: qsTr("Cancel")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 60
+                FluTextBox{
+                    id:textbox_text
+                    anchors.centerIn: parent
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
+                    }
+                }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
+            }
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            if(custom_update_dialog.onAccpetListener){
+                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
+            }
+        }
+        function showDialog(text,listener){
+            custom_update_dialog.text = text
+            custom_update_dialog.onAccpetListener = listener
+            custom_update_dialog.open()
+        }
+    }
+
+    FluMenu{
+        id:pop_filter
+        width: 200
+        height: 89
+
+        contentItem: Item{
+
+            onVisibleChanged: {
+                if(visible){
+                    name_filter_text.text = root.nameKeyword
+                    name_filter_text.cursorPosition = name_filter_text.text.length
+                    name_filter_text.forceActiveFocus()
+                }
+            }
+
+            FluTextBox{
+                id:name_filter_text
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    leftMargin: 10
+                    rightMargin: 10
+                    topMargin: 10
+                }
+                iconSource: FluentIcons.Search
+            }
+
+            FluButton{
+                text: qsTr("Search")
+                anchors{
+                    bottom: parent.bottom
+                    right: parent.right
+                    bottomMargin: 10
+                    rightMargin: 10
+                }
+                onClicked: {
+                    root.nameKeyword = name_filter_text.text
+                    pop_filter.close()
+                }
+            }
+
+        }
+
+        function showPopup(){
+            table_view.closeEditor()
+            pop_filter.popup()
+        }
+
+    }
+
+    Component{
+        id:com_checbox
+        Item{
+            FluCheckBox{
+                anchors.centerIn: parent
+                checked: true === options.checked
+                animationEnabled: false
+                clickListener: function(){
+                    var obj = table_view.getRow(row)
+                    obj.checkbox = table_view.customItem(com_checbox,{checked})
+                    table_view.setRow(row,obj)
+                    root.checkBoxChanged()
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_filter_name
+        Item{
+            FluText{
+                text: qsTr("Name")
+                anchors.centerIn: parent
+            }
+            FluIconButton{
+                width: 20
+                height: 20
+                iconSize: 12
+                verticalPadding:0
+                horizontalPadding:0
+                iconSource: FluentIcons.Filter
+                iconColor: {
+                    if("" !== root.nameKeyword){
+                        return FluTheme.primaryColor
+                    }
+                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                }
+                anchors{
+                    right: parent.right
+                    rightMargin: 3
+                    verticalCenter: parent.verticalCenter
+                }
+                onClicked: {
+                    pop_filter.showPopup()
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_action
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluButton{
+                    text: qsTr("Delete")
+                    onClicked: {
+                        table_view.closeEditor()
+                        table_view.removeRow(row)
+                    }
+                }
+                FluFilledButton{
+                    text: qsTr("Edit")
+                    onClicked: {
+                        var obj = table_view.getRow(row)
+                        obj.name = "12345"
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
+                    }
+                }
+            }
+        }
+    }
+
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text: qsTr("Select All")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox {
+                    Layout.alignment: Qt.AlignVCenter
+                    checkState: root.allCheckState
+                    animationEnabled: false
+                    clickListener: function () {
+                        root.allCheckState = checkState
+                        for (let i = 0; i < table_view.rows; i++) {
+                            const rowData = table_view.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox, {"checked": checkState === Qt.Checked})
+                            table_view.setRow(i, rowData)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_combobox
+        FluComboBox {
+            anchors.fill: parent
+            focus: true
+            editText: display
+            editable: true
+            model: ListModel {
+                ListElement { text: "100" }
+                ListElement { text: "300" }
+                ListElement { text: "500" }
+                ListElement { text: "1000" }
+            }
+            Component.onCompleted: {
+                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
+                textBox.forceActiveFocus()
+                textBox.selectAll()
+            }
+            onCommit: {
+                editTextChaged(editText)
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    Component{
+        id:com_auto_suggestbox
+        FluAutoSuggestBox {
+            id: textbox
+            anchors.fill: parent
+            focus: true
+            Component.onCompleted: {
+                var data = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+                var result = data.map(function(item) {
+                    return {title: item};
+                });
+                items = result
+                textbox.text= String(display)
+                forceActiveFocus()
+                selectAll()
+            }
+            onCommit: {
+                editTextChaged(textbox.text)
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: 40
+                height: 40
+                radius: [20,20,20,20]
+                Image{
+                    anchors.fill: parent
+                    source: options && options.avatar ? options.avatar : ""
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_update_title
+        Item{
+            FluText{
+                id:text_title
+                text: {
+                    if(options.title){
+                        return options.title
+                    }
+                    return ""
+                }
+                anchors.fill: parent
+                verticalAlignment: Qt.AlignVCenter
+                horizontalAlignment: Qt.AlignHCenter
+                elide: Text.ElideRight
+            }
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    custom_update_dialog.showDialog(options.title,function(text){
+                        var columnModel = model.display
+                        columnModel.title = table_view.customItem(com_column_update_title,{"title":text})
+                        model.display = columnModel
+                    })
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_sort_age
+        Item{
+            FluText{
+                text: qsTr("Age")
+                anchors.centerIn: parent
+            }
+            ColumnLayout{
+                spacing: 0
+                anchors{
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 4
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronUp
+                    iconColor: {
+                        if(1 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 1){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 1
+                    }
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronDown
+                    iconColor: {
+                        if(2 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 2){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 2
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 20
+        }
+        height: 60
+
+        Row{
+            spacing: 5
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+
+            FluButton{
+                text: qsTr("Clear All")
+                onClicked: {
+                    table_view.dataSource = []
+                }
+            }
+
+            FluButton{
+                text: qsTr("Delete Selection")
+                onClicked: {
+                    var data = []
+                    var rows = []
+                    for (var i = 0; i < table_view.rows; i++) {
+                        var item = table_view.getRow(i)
+                        rows.push(item)
+                        if (!item.checkbox.options.checked) {
+                            data.push(item);
+                        }
+                    }
+                    var sourceModel = table_view.sourceModel
+                    for (i = 0; i < sourceModel.rowCount; i++) {
+                        var sourceItem = sourceModel.getRow(i)
+                        const foundItem = rows.find(item=> item._key === sourceItem._key)
+                        if (!foundItem) {
+                            data.push(sourceItem);
+                        }
+                    }
+                    table_view.dataSource = data
+                }
+            }
+            FluButton{
+                text: qsTr("Add a row of Data")
+                onClicked: {
+                    table_view.appendRow(genTestObject())
+                }
+            }
+            FluButton{
+                text: qsTr("Insert a Row")
+                onClicked: {
+                    var index = table_view.currentIndex()
+                    if(index !== -1){
+                        var testObj = genTestObject()
+                        table_view.insertRow(index,testObj)
+                    }else{
+                        showWarning(qsTr("Focus not acquired: Please click any item in the form as the target for insertion!"))
+                    }
+                }
+            }
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: layout_controls.bottom
+            bottom: gagination.top
+        }
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
+        startRowIndex: (gagination.pageCurrent - 1) * gagination.__itemPerPage + 1
+        columnSource:[
+            {
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                frozen: true
+            },
+            {
+                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
+                dataIndex: 'name',
+                readOnly:true
+            },
+            {
+                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
+                dataIndex: 'avatar',
+                width:100,
+                frozen:true
+            },
+            {
+                title: table_view.customItem(com_column_sort_age,{sort:0}),
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
+            {
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                editDelegate: com_auto_suggestbox,
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
+            },
+            {
+                title: qsTr("Nickname"),
+                dataIndex: 'nickname',
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: qsTr("Long String"),
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300,
+                editMultiline: true
+            },
+            {
+                title: qsTr("Options"),
+                dataIndex: 'action',
+                width:160,
+                frozen:true
+            }
+        ]
+    }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+    function genTestObject(){
+        var ages = ["100", "300", "500", "1000"];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
+        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
+        function getAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+        return {
+            checkbox: table_view.customItem(com_checbox,{checked:true}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+            name: getRandomName(),
+            age:getRandomAge(),
+            address: getRandomAddresses(),
+            nickname: getRandomNickname(),
+            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push(genTestObject())
+        }
+        table_view.dataSource = dataSource
+    }
+    function updateAllCheck() {
+        let checkedCount = 0
+        for (let i = 0; i < table_view.rows; i++) {
+            if (table_view.getRow(i).checkbox.options.checked) {
+                checkedCount += 1
+            }
+        }
+        if (checkedCount > 0 && checkedCount === table_view.rows) {
+            root.allCheckState = Qt.Checked
+        } else if (checkedCount > 0 && checkedCount < table_view.rows) {
+            root.allCheckState = Qt.PartiallyChecked
+        } else {
+            root.allCheckState = Qt.Unchecked
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Text.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Text")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+        padding: 10
+
+        FluCopyableText{
+            enabled: !toggle_switch.checked
+            text: qsTr("This is a text that can be copied")
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        FluToggleSwitch{
+            id: toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCopyableText{
+    text: qsTr("This is a text that can be copied")
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_TextBox.qml

@@ -0,0 +1,199 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("TextBox")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+
+        FluTextBox{
+            placeholderText: qsTr("Single-line Input Box")
+            disabled: text_box_switch.checked
+            cleanEnabled: true
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        FluToggleSwitch{
+            id: text_box_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTextBox{
+    placeholderText: qsTr("Single-line Input Box")
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+
+        FluPasswordBox{
+            placeholderText: qsTr("Please enter your password")
+            disabled:password_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id:password_box_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluPasswordBox{
+    placeholderText: qsTr("Please enter your password")
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 36+multiine_textbox.height
+        padding: 10
+        Layout.topMargin: 20
+
+        FluMultilineTextBox{
+            id: multiine_textbox
+            placeholderText: qsTr("Multi-line Input Box")
+            disabled: text_box_multi_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        FluToggleSwitch{
+            id:text_box_multi_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluMultilineTextBox{
+    placeholderText: qsTr("Multi-line Input Box")
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+        FluAutoSuggestBox{
+            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
+            }
+        }
+        RowLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_show_suggest_switch
+                text: qsTr("Show suggest when pressed")
+            }
+            FluToggleSwitch{
+                id:text_box_suggest_switch
+                text: qsTr("Disabled")
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluAutoSuggestBox{
+    placeholderText: qsTr("AutoSuggestBox")
+    itemRows: 12
+    itemHeight: 38
+    showSuggestWhenPressed: false
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Layout.topMargin: 20
+        FluSpinBox{
+            disabled: spin_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: spin_box_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluSpinBox{
+
+}'
+    }
+
+    function generateRandomNames(numNames) {
+        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();
+            names.push({title:name});
+        }
+        return names;
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_Theme.qml

@@ -0,0 +1,203 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    id: root
+    title: qsTr("Theme")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        padding: 10
+
+        ColumnLayout{
+            spacing:0
+            anchors{
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Theme colors")
+                Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
+                Repeater{
+                    model: root.colorData
+                    delegate:  Rectangle{
+                        width: 42
+                        height: 42
+                        radius: 4
+                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        border.color: modelData.darker
+                        FluIcon {
+                            anchors.centerIn: parent
+                            iconSource: FluentIcons.AcceptMedium
+                            iconSize: 15
+                            visible: modelData === FluTheme.accentColor
+                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        }
+                        MouseArea{
+                            id:mouse_item
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onClicked: {
+                                FluTheme.accentColor = modelData
+                            }
+                        }
+                    }
+                }
+            }
+            Row{
+                Layout.topMargin: 10
+                spacing: 10
+                FluText{
+                    text: qsTr("Customize the Theme Color")
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    current: FluTheme.accentColor.normal
+                    onAccepted: {
+                       FluTheme.accentColor = FluColors.createAccentColor(current)
+                    }
+                    FluIcon {
+                        anchors.centerIn: parent
+                        iconSource: FluentIcons.AcceptMedium
+                        iconSize: 15
+                        visible: {
+                            for(var i =0 ;i< root.colorData.length; i++){
+                                if(root.colorData[i] === FluTheme.accentColor){
+                                    return false
+                                }
+                            }
+                            return true
+                        }
+                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    }
+                }
+            }
+            FluText{
+                text: qsTr("Dark Mode")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.dark
+                onClicked: {
+                    if(FluTheme.dark){
+                        FluTheme.darkMode = FluThemeType.Light
+                    }else{
+                        FluTheme.darkMode = FluThemeType.Dark
+                    }
+                }
+            }
+            FluText{
+                text: qsTr("Native Text")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.nativeText
+                onClicked: {
+                    FluTheme.nativeText = !FluTheme.nativeText
+                }
+            }
+            FluText{
+                text: qsTr("Open Animation")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.animationEnabled
+                onClicked: {
+                    FluTheme.animationEnabled = !FluTheme.animationEnabled
+                }
+            }
+            FluText{
+                text: qsTr("Open Blur Window")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                id: toggle_blur
+                Layout.topMargin: 5
+                checked: FluTheme.blurBehindWindowEnabled
+                onClicked: {
+                    FluTheme.blurBehindWindowEnabled = !FluTheme.blurBehindWindowEnabled
+                }
+            }
+            FluText{
+                text: qsTr("window effect")
+                Layout.topMargin: 20
+            }
+            Row{
+                spacing: 10
+                Repeater{
+                    model: window.availableEffects
+                    delegate: FluRadioButton{
+                        checked: window.effect === modelData
+                        text: qsTr(`${modelData}`)
+                        clickListener:function(){
+                            window.effect = modelData
+                            if(window.effective){
+                                FluTheme.blurBehindWindowEnabled = false
+                                toggle_blur.checked = Qt.binding( function() {return FluTheme.blurBehindWindowEnabled})
+                            }
+                        }
+                    }
+
+                }
+            }
+            FluText{
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
+                text: qsTr("window tintOpacity")
+                Layout.topMargin: 20
+            }
+            FluSlider{
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
+                Layout.topMargin: 5
+                to:1
+                stepSize:0.1
+                onValueChanged: {
+                    window.tintOpacity = value
+                }
+                Component.onCompleted: {
+                    value = window.tintOpacity
+                }
+            }
+            FluText{
+                visible: FluTheme.blurBehindWindowEnabled
+                text: qsTr("window blurRadius")
+                Layout.topMargin: 20
+            }
+            FluSlider{
+                visible: FluTheme.blurBehindWindowEnabled
+                Layout.topMargin: 5
+                to:100
+                stepSize:1
+                onValueChanged: {
+                    window.blurRadius = value
+                }
+                Component.onCompleted: {
+                    value = window.blurRadius
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTheme.accentColor = FluColors.Orange
+
+FluTheme.dark = true
+
+FluTheme.nativeText = true'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_TimePicker.qml

@@ -0,0 +1,91 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("TimePicker")
+    launchMode: FluPageType.SingleInstance
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text: qsTr("hourFormat=FluTimePickerType.H")
+            }
+
+            FluTimePicker{
+                current: new Date()
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                onAccepted: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTimePicker{
+
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 80
+        padding: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text: qsTr("hourFormat=FluTimePickerType.HH")
+            }
+
+            FluTimePicker{
+                hourFormat:FluTimePickerType.HH
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                onAccepted: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTimePicker{
+    hourFormat:FluTimePickerType.HH
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_Timeline.qml

@@ -0,0 +1,169 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Timeline")
+
+    Component{
+        id:com_dot
+        Rectangle{
+            width: 16
+            height: 16
+            radius: 8
+            border.width: 4
+            border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+        }
+    }
+
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            font.bold: true
+            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
+            text: modelData.lable
+            color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.lable)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_text
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
+            text: modelData.text
+            linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+            onLinkActivated:
+                (link)=> {
+                    Qt.openUrlExternally(link)
+                }
+            onLinkHovered:
+                (link)=> {
+                    if(link === ""){
+                        FluTools.restoreOverrideCursor()
+                    }else{
+                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
+                    }
+                }
+        }
+    }
+
+    ListModel{
+        id:list_model
+        ListElement{
+            lable:"2013-09-01"
+            text:'&nbsp;<img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4">&nbsp;考上中国皮城大学，杰斯武器工坊专业'
+        }
+        ListElement{
+            lable:"2017-07-01"
+            text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽，害"
+        }
+        ListElement{
+            lable:"2017-09-01"
+            text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田"
+        }
+        ListElement{
+            lable:"2018-02-01"
+            text:"玩了一年没钱，惨，出去找工作上班"
+        }
+        ListElement{
+            lable:"2018-03-01"
+            text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
+        }
+        ListElement{
+            lable:"2021-06-01"
+            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
+        }
+        ListElement{
+            lable:"2022-08-01"
+            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里'，老板：'无语'"
+        }
+        ListElement{
+            lable:"2023-02-28"
+            text:"开发FluentUI组件库"
+        }
+        ListElement{
+            lable:"2023-03-28"
+            text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>，并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
+            lableDelegate:()=>com_lable
+            textDelegate:()=>com_text
+            dot:()=>com_dot
+        }
+    }
+
+    RowLayout{
+        spacing: 20
+        FluTextBox{
+            id: text_box
+            text: "Technical testing 2015-09-01"
+            Layout.preferredWidth: 240
+        }
+        FluFilledButton{
+            text: qsTr("Append")
+            onClicked: {
+                list_model.append({text:text_box.text})
+            }
+        }
+        FluFilledButton{
+            text: qsTr("clear")
+            onClicked: {
+                list_model.clear()
+            }
+        }
+    }
+
+    RowLayout{
+        Layout.topMargin: 10
+        FluText{
+            text: qsTr("mode:")
+        }
+        FluDropDownButton{
+            id: btn_mode
+            Layout.preferredWidth: 100
+            text:  qsTr("Alternate")
+            FluMenuItem{
+                text: qsTr("Left")
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Left
+                }
+            }
+            FluMenuItem{
+                text: qsTr("Right")
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Right
+                }
+            }
+            FluMenuItem{
+                text: qsTr("Alternate")
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Alternate
+                }
+            }
+        }
+    }
+
+    FluTimeline{
+        id: time_line
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.bottomMargin: 20
+        mode: FluTimelineType.Alternate
+        model: list_model
+    }
+
+}

3rd/FluentUI/example/qml/page/T_ToggleSwitch.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ToggleSwitch")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        padding: 10
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+            }
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+                text: qsTr("Right")
+            }
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+                text: qsTr("Left")
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id: toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluToggleSwitch{
+    text:"Text"
+}'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_Tooltip.qml

@@ -0,0 +1,102 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Tooltip")
+
+    FluText{
+        text: qsTr("Hover over Tultip and it pops up")
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
+            }
+            FluIconButton{
+                iconSource:FluentIcons.ChromeCloseContrast
+                iconSize: 15
+                text: qsTr("Delete")
+                onClicked:{
+                    showSuccess(qsTr("Click IconButton"))
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluIconButton{
+    iconSource:FluentIcons.ChromeCloseContrast
+    iconSize: 15
+    text: qsTr("Delete")
+    onClicked:{
+        showSuccess(qsTr("Click IconButton"))
+    }
+}
+'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Add a Tooltip pop-up to a Button")
+            }
+            FluButton{
+                id:button_1
+                text: qsTr("Delete")
+                onClicked:{
+                    showSuccess(qsTr("Click Button"))
+                }
+                FluTooltip{
+                    visible: button_1.hovered
+                    text:button_1.text
+                    delay: 1000
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluButton{
+    id: button_1
+    text: qsTr("Delete")
+    FluTooltip{
+        visible: button_1.hovered
+        text:button_1.text
+        delay: 1000
+    }
+    onClicked:{
+        showSuccess(qsTr("Click Button"))
+    }
+}'
+    }
+
+
+}

3rd/FluentUI/example/qml/page/T_Tour.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Tour")
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
+            {title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
+            {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
+        ]
+    }
+    FluTour{
+        id:tour_custom_indicator
+        steps:[
+            {title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
+            {title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
+            {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
+        ]
+        indicator: Component{
+            FluText {
+                text: "%1 / %2".arg(current + 1).arg(total)
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 130
+        padding: 10
+
+        Row{
+            anchors{
+                top: parent.top
+                topMargin: 14
+            }
+            spacing: 20
+            FluFilledButton{
+                text: qsTr("Begin Tour")
+                onClicked: {
+                    tour.open()
+                }
+            }
+            FluFilledButton{
+                text: qsTr("Begin Tour with custom indicator")
+                onClicked: {
+                    tour_custom_indicator.open()
+                }
+            }
+        }
+
+        Row{
+            spacing: 20
+            anchors{
+                top: parent.top
+                topMargin: 60
+            }
+            FluButton{
+                id: btn_upload
+                text: qsTr("Upload")
+                onClicked: {
+                    showInfo(qsTr("Upload"))
+                }
+            }
+            FluFilledButton{
+                id: btn_save
+                text: qsTr("Save")
+                onClicked: {
+                    showInfo(qsTr("Save"))
+                }
+            }
+            FluIconButton{
+                id: btn_more
+                iconSource: FluentIcons.More
+                onClicked: {
+                    showInfo(qsTr("More"))
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTour{
+    id:tour
+    steps:[
+        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+        {title:"Save",description: "Save your changes.",target:()=>btn_save},
+        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+    ]
+}'
+    }
+
+}

3rd/FluentUI/example/qml/page/T_TreeView.qml

@@ -0,0 +1,204 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage {
+
+    title: qsTr("TreeView")
+
+    function treeData(){
+        const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length)
+            return names[randomIndex]
+        }
+        const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length)
+            return addresses[randomIndex]
+        }
+        const avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"]
+        function getRandomAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+        const dig = (path = '0', level = 5) => {
+            const list = [];
+            for (let i = 0; i < 4; i += 1) {
+                const key = `${path}-${i}`;
+                const treeNode = {
+                    title: key,
+                    _key: key,
+                    name: getRandomName(),
+                    avatar:tree_view.customItem(com_avatar,{avatar:getRandomAvatar()}),
+                    address: getRandomAddresses()
+                };
+                if (level > 0) {
+                    treeNode.children = dig(key, level - 1);
+                }
+                list.push(treeNode);
+            }
+            return list;
+        };
+        return dig();
+    }
+
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: height
+                height: parent.height/3*2
+                radius: [height/2,height/2,height/2,height/2]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
+                        }
+                        return ""
+                    }
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+    FluFrame{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 10
+        }
+        height: 80
+        clip: true
+        Row{
+            spacing: 12
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+            Column{
+                anchors.verticalCenter: parent.verticalCenter
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: qsTr("cellHeight:")
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_cell_height
+                        value: 38
+                        from: 38
+                        to:100
+                    }
+                }
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: qsTr("depthPadding:")
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_depth_padding
+                        value: 15
+                        from: 15
+                        to:100
+                    }
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluToggleSwitch{
+                    id: switch_showline
+                    text: qsTr("showLine")
+                    checked: false
+                }
+                FluToggleSwitch{
+                    id: switch_checkable
+                    text: qsTr("checkable")
+                    checked: false
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluButton{
+                    text: qsTr("all expand")
+                    onClicked: {
+                        tree_view.allExpand()
+                    }
+                }
+                FluButton{
+                    text: qsTr("all collapse")
+                    onClicked: {
+                        tree_view.allCollapse()
+                    }
+                }
+            }
+            FluButton{
+                text: qsTr("print selection model")
+                onClicked: {
+                    var printData = []
+                    var data = tree_view.selectionModel();
+                    console.debug(data.length)
+                    for(var i = 0; i <= data.length-1 ; i++){
+                        const newObj = Object.assign({}, data[i].data);
+                        delete newObj["__parent"];
+                        delete newObj["children"];
+                        printData.push(newObj)
+                    }
+                    console.debug(JSON.stringify(printData))
+                }
+            }
+        }
+    }
+
+    FluTreeView{
+        id:tree_view
+        anchors{
+            left: parent.left
+            top: layout_controls.bottom
+            topMargin: 10
+            bottom: parent.bottom
+            right: parent.right
+        }
+        cellHeight: slider_cell_height.value
+        showLine: switch_showline.checked
+        checkable:switch_checkable.checked
+        depthPadding: slider_depth_padding.value
+        onCurrentChanged: {
+            showInfo(current.data.title)
+        }
+        columnSource:[
+            {
+                title: qsTr("Title"),
+                dataIndex: 'title',
+                width: 300
+            },{
+                title: qsTr("Name"),
+                dataIndex: 'name',
+                width: 100
+            },{
+                title: qsTr("Avatar"),
+                dataIndex: 'avatar',
+                width: 100
+            },{
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                width: 200
+            },
+        ]
+        Component.onCompleted: {
+            var data = treeData()
+            dataSource = data
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Typography.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    property real textScale: 1
+
+    title: qsTr("Typography")
+    rightPadding: 10
+
+    FluFrame{
+        anchors{
+            top:parent.top
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        padding: 10
+        ColumnLayout{
+            spacing: 0
+            scale: textScale
+            transformOrigin: Item.TopLeft
+            FluText{
+                id:text_Display
+                text: qsTr("Display")
+                padding: 0
+                font: FluTextStyle.Display
+            }
+            FluText{
+                id:text_TitleLarge
+                text: qsTr("Title Large")
+                padding: 0
+                font: FluTextStyle.TitleLarge
+            }
+            FluText{
+                id:text_Title
+                text: qsTr("Title")
+                padding: 0
+                font: FluTextStyle.Title
+            }
+            FluText{
+                id:text_Subtitle
+                text:  qsTr("Subtitle")
+                padding: 0
+                font: FluTextStyle.Subtitle
+            }
+            FluText{
+                id:text_BodyStrong
+                text: qsTr("Body Strong")
+                padding: 0
+                font: FluTextStyle.BodyStrong
+            }
+            FluText{
+                id:text_Body
+                text: qsTr("Body")
+                padding: 0
+                font: FluTextStyle.Body
+            }
+            FluText{
+                id:text_Caption
+                text: qsTr("Caption")
+                padding: 0
+                font: FluTextStyle.Caption
+            }
+        }
+
+        FluSlider{
+            id:slider
+            orientation: Qt.Vertical
+            anchors{
+                right: parent.right
+                rightMargin: 45
+                top: parent.top
+                topMargin: 30
+            }
+            onValueChanged:{
+                textScale = 1+value/100
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/page/T_Watermark.qml

@@ -0,0 +1,130 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("Watermark")
+
+    FluFrame{
+        anchors.fill: parent
+
+        ColumnLayout{
+            anchors{
+                left: parent.left
+                leftMargin: 14
+            }
+
+            RowLayout{
+                spacing: 10
+                Layout.topMargin: 14
+                FluText{
+                    text: qsTr("text:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluTextBox{
+                    id: text_box
+                    text: "会磨刀的小猪"
+                    Layout.preferredWidth: 240
+                }
+            }
+
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("textSize:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id: slider_text_size
+                    value: 20
+                    from: 13
+                    to:50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("gapX:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_gap_x
+                    value: 100
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("gapY:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id: slider_gap_y
+                    value: 100
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("offsetX:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_offset_x
+                    value: 50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("offsetY:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id: slider_offset_y
+                    value: 50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("rotate:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id: slider_rotate
+                    value: 22
+                    from: 0
+                    to:360
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text: qsTr("textColor:")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluColorPicker{
+                    id: color_picker
+                    current: Qt.rgba(0,0,0,0.1)
+                }
+            }
+        }
+
+        FluWatermark{
+            id: water_mark
+            anchors.fill: parent
+            text:text_box.text
+            textColor: color_picker.current
+            textSize: slider_text_size.value
+            rotate: slider_rotate.value
+            gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
+            offset: Qt.point(slider_offset_x.value,slider_offset_y.value)
+        }
+    }
+
+}

3rd/FluentUI/example/qml/window/AboutWindow.qml

@@ -0,0 +1,165 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    title:"关于"
+    width: 600
+    height: 580
+    fixSize: true
+    launchMode: FluWindowType.SingleTask
+
+    ColumnLayout{
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        spacing: 5
+
+        RowLayout{
+            Layout.topMargin: 10
+            Layout.leftMargin: 15
+            spacing: 14
+            FluText{
+                text:"FluentUI"
+                font: FluTextStyle.Title
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        FluRouter.navigate("/")
+                    }
+                }
+            }
+            FluText{
+                text:"v%1".arg(AppInfo.version)
+                font: FluTextStyle.Body
+                Layout.alignment: Qt.AlignBottom
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"作者："
+            }
+            FluText{
+                text:"朱子楚"
+                Layout.alignment: Qt.AlignBottom
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"微信号："
+            }
+            FluText{
+                text:"FluentUI"
+                Layout.alignment: Qt.AlignBottom
+            }
+            FluText{
+                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"GitHub："
+            }
+            FluTextButton{
+                id:text_hublink
+                topPadding:0
+                bottomPadding:0
+                text:"https://github.com/zhuzichu520/FluentUI"
+                Layout.alignment: Qt.AlignBottom
+                onClicked: {
+                    Qt.openUrlExternally(text_hublink.text)
+                }
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"B站："
+            }
+            FluTextButton{
+                topPadding:0
+                bottomPadding:0
+                text:"https://www.bilibili.com/video/BV1mg4y1M71w/"
+                Layout.alignment: Qt.AlignBottom
+                onClicked: {
+                    Qt.openUrlExternally(text)
+                }
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                id:text_info
+                text:"如果该项目对你有作用，就请点击上方链接给一个免费的star，或者一键三连，谢谢！"
+                ColorAnimation {
+                    id: animation
+                    target: text_info
+                    property: "color"
+                    from: "red"
+                    to: "blue"
+                    duration: 1000
+                    running: true
+                    loops: Animation.Infinite
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.topMargin: 20
+            Layout.leftMargin: 15
+            FluText{
+                text:"捐赠："
+            }
+        }
+
+        Item{
+            Layout.preferredWidth: parent.width
+            Layout.preferredHeight: 252
+            Row{
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 30
+                Image{
+                    width: 250
+                    height: 250
+                    source: "qrc:/example/res/image/qrcode_wx.jpg"
+                }
+                Image{
+                    width: 250
+                    height: 250
+                    source: "qrc:/example/res/image/qrcode_zfb.jpg"
+                }
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            Layout.topMargin: 20
+            FluText{
+                id:text_desc
+                text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/window/CrashWindow.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import Qt.labs.platform 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    title: qsTr("Friendly Reminder")
+    width: 300
+    height: 400
+    fixSize: true
+    showMinimize: false
+
+    property string crashFilePath
+
+    Component.onCompleted: {
+        window.stayTop = true
+    }
+    Component.onDestruction: {
+        FluRouter.exit()
+    }
+
+    onInitArgument:
+        (argument)=>{
+            crashFilePath = argument.crashFilePath
+        }
+
+    Image{
+        width: 540/2
+        height: 285/2
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: 40
+        }
+        source: "qrc:/example/res/image/ic_crash.png"
+    }
+
+    FluText{
+        id:text_info
+        anchors{
+            top: parent.top
+            topMargin: 240
+            left: parent.left
+            right: parent.right
+            leftMargin: 10
+            rightMargin: 10
+        }
+        wrapMode: Text.WrapAnywhere
+        text: qsTr("We apologize for the inconvenience caused by an unexpected error")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout{
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        FluButton{
+            text: qsTr("Report Logs")
+            onClicked: {
+                FluTools.showFileInFolder(crashFilePath)
+            }
+        }
+        Item{
+            width: 30
+            height: 1
+        }
+        FluFilledButton{
+            text: qsTr("Restart Program")
+            onClicked: {
+                FluRouter.exit(931)
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/window/FluentInitializrWindow.qml

@@ -0,0 +1,113 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import Qt.labs.platform 1.1
+import "../component"
+
+FluWindowDialog {
+
+    id:window
+    title:qsTr("FluentUI Initializr")
+    width: 600
+    height: 400
+
+    contentDelegate:Component{
+        Item{
+            Connections{
+                target: InitializrHelper
+                function onError(message){
+                    showError(message)
+                }
+                function onSuccess(path){
+                    FluTools.showFileInFolder(path)
+                    window.close()
+                }
+            }
+
+            FluText{
+                id:text_title
+                text:qsTr("FluentUI Initializr")
+                font: FluTextStyle.Title
+                anchors{
+                    left: parent.left
+                    top: parent.top
+                    leftMargin: 20
+                    topMargin: 20
+                }
+            }
+
+            Column{
+                spacing: 14
+                anchors{
+                    left: parent.left
+                    top: text_title.bottom
+                    leftMargin: 20
+                    topMargin: 20
+                }
+                FluTextBox{
+                    id:text_box_name
+                    width: 180
+                    placeholderText: qsTr("Name")
+                    focus: true
+                }
+                Row{
+                    spacing: 8
+                    FluTextBox{
+                        id:text_box_path
+                        width: 300
+                        placeholderText: qsTr("Create In")
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                    FluButton{
+                        text:qsTr("Browse")
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: {
+                            folder_dialog.open()
+                        }
+                    }
+                }
+            }
+
+            FolderDialog{
+                id:folder_dialog
+                onAccepted: {
+                    text_box_path.text = FluTools.toLocalPath(currentFolder)
+                }
+            }
+
+            Rectangle{
+                id:layout_actions
+                width: parent.width
+                height: 60
+                anchors.bottom: parent.bottom
+                color: FluTheme.backgroundColor
+                Row{
+                    height: parent.height
+                    spacing: 20
+                    anchors{
+                        right: parent.right
+                        rightMargin: 20
+                    }
+                    FluButton{
+                        text:qsTr("Cancel")
+                        width: 120
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: {
+                            window.close()
+                        }
+                    }
+                    FluFilledButton{
+                        text:qsTr("Create")
+                        width: 120
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: {
+                            InitializrHelper.generate(text_box_name.text,text_box_path.text)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

3rd/FluentUI/example/qml/window/HotkeyWindow.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id: window
+    property string sequence: ""
+    title: qsTr("Hotkey")
+    width: 250
+    height: 250
+    fixSize: true
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (argument)=>{
+            window.sequence = argument.sequence
+        }
+    FluText{
+        anchors.centerIn: parent
+        color: FluTheme.primaryColor
+        font: FluTextStyle.Title
+        text: window.sequence
+    }
+}

3rd/FluentUI/example/qml/window/HotloadWindow.qml

@@ -0,0 +1,97 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import example 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    title: qsTr("Hot Loader")
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleTask
+    FileWatcher{
+        id:watcher
+        onFileChanged: {
+            loader.reload()
+        }
+    }
+    FluFrame{
+        anchors.fill: parent
+        FluRemoteLoader{
+            id:loader
+            anchors.fill: parent
+            statusMode: FluStatusLayoutType.Success
+            lazy: true
+            errorItem: Item{
+                FluText{
+                    text:loader.itemLodaer().sourceComponent.errorString()
+                    color:"red"
+                    anchors.fill: parent
+                    wrapMode: Text.WrapAnywhere
+                    padding: 20
+                    verticalAlignment: Qt.AlignVCenter
+                    horizontalAlignment: Qt.AlignHCenter
+                }
+            }
+        }
+        FluText{
+            text: qsTr("Drag in a qml file")
+            font: FluTextStyle.Title
+            anchors.centerIn: parent
+            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.Success
+        }
+        Rectangle{
+            radius: 4
+            anchors.fill: parent
+            color: "#33333333"
+            visible: drop_area.containsDrag
+        }
+        DropArea{
+            id:drop_area
+            anchors.fill: parent
+            onEntered:
+                (event)=>{
+                    if(!event.hasUrls){
+                        event.accepted = false
+                        return
+                    }
+                    var url = getUrlByEvent(event)
+                    if(url === ""){
+                        event.accepted = false
+                        return
+                    }
+                    var fileExtension = url.substring(url.lastIndexOf(".") + 1)
+                    if (fileExtension !== "qml") {
+                        event.accepted = false
+                        return
+                    }
+                    return true
+                }
+            onDropped:
+                (event)=>{
+                    var url = getUrlByEvent(event)
+                    if(url !== ""){
+                        loader.source = url
+                        watcher.path = url
+                        loader.reload()
+                    }
+                }
+        }
+    }
+
+    function getUrlByEvent(event){
+        var url = ""
+        if (event.urls.length === 0) {
+            url = "file:///"+event.getDataAsString("text/plain")
+        }else{
+            url = event.urls[0].toString()
+        }
+        return url
+    }
+
+}

3rd/FluentUI/example/qml/window/LoginWindow.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("Login")
+    width: 400
+    height: 400
+    fixSize: true
+    modality: Qt.ApplicationModal
+    onInitArgument:
+        (argument)=>{
+            textbox_uesrname.updateText(argument.username)
+            textbox_password.focus =  true
+        }
+
+    ColumnLayout{
+        anchors{
+            left: parent.left
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+
+        FluAutoSuggestBox{
+            id: textbox_uesrname
+            items:[{title:"Admin"},{title:"User"}]
+            placeholderText: qsTr("Please enter the account")
+            Layout.preferredWidth: 260
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        FluTextBox{
+            id: textbox_password
+            Layout.topMargin: 20
+            Layout.preferredWidth: 260
+            placeholderText: qsTr("Please enter your password")
+            echoMode:TextInput.Password
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        FluFilledButton{
+            text: qsTr("Login")
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 20
+            onClicked:{
+                if(textbox_password.text === ""){
+                    showError(qsTr("Please feel free to enter a password"))
+                    return
+                }
+                setResult({password:textbox_password.text})
+                window.close()
+            }
+        }
+    }
+}

3rd/FluentUI/example/qml/window/MainWindow.qml

@@ -0,0 +1,386 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
+import Qt.labs.platform 1.1
+import FluentUI 1.0
+import example 1.0
+import "../component"
+import "../global"
+
+FluWindow {
+
+    id:window
+    title: "FluentUI"
+    width: 1000
+    height: 668
+    minimumWidth: 668
+    minimumHeight: 320
+    launchMode: FluWindowType.SingleTask
+    fitsAppBarWindows: true
+    appBar: FluAppBar {
+        height: 30
+        showDark: true
+        darkClickListener:(button)=>handleDarkChanged(button)
+        closeClickListener: ()=>{dialog_close.open()}
+        z:7
+    }
+
+    FluentInitializrWindow{
+        id:fluent_Initializr
+    }
+
+    FluEvent{
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
+    onLazyLoad: {
+        tour.open()
+    }
+
+    Component.onCompleted: {
+        checkUpdate(true)
+    }
+
+    Component.onDestruction: {
+        FluRouter.exit()
+    }
+
+    SystemTrayIcon {
+        id:system_tray
+        visible: true
+        icon.source: "qrc:/example/res/image/favicon.ico"
+        tooltip: "FluentUI"
+        menu: Menu {
+            MenuItem {
+                text: "退出"
+                onTriggered: {
+                    FluRouter.exit()
+                }
+            }
+        }
+        onActivated:
+            (reason)=>{
+                if(reason === SystemTrayIcon.Trigger){
+                    window.show()
+                    window.raise()
+                    window.requestActivate()
+                }else if(reason === SystemTrayIcon.Context){
+                    system_tray.menu.open()
+                }
+            }
+    }
+
+    Timer{
+        id: timer_window_hide_delay
+        interval: 150
+        onTriggered: {
+            window.hide()
+        }
+    }
+
+    FluContentDialog{
+        id: dialog_close
+        title: qsTr("Quit")
+        message: qsTr("Are you sure you want to exit the program?")
+        negativeText: qsTr("Minimize")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
+        onNegativeClicked: {
+            system_tray.showMessage(qsTr("Friendly Reminder"),qsTr("FluentUI is hidden from the tray, click on the tray to activate the window again"));
+            timer_window_hide_delay.restart()
+        }
+        positiveText: qsTr("Quit")
+        neutralText: qsTr("Cancel")
+        onPositiveClicked:{
+            FluRouter.exit(0)
+        }
+    }
+
+    Component{
+        id: nav_item_right_menu
+        FluMenu{
+            width: 186
+            FluMenuItem{
+                text: qsTr("Open in Separate Window")
+                font: FluTextStyle.Caption
+                onClicked: {
+                    FluRouter.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
+        }
+    }
+
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        property real flipAngle: 0
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: flipable.flipAngle
+
+        }
+        states: State {
+            PropertyChanges { target: flipable; flipAngle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: flipable.flipAngle !== 0
+            Row{
+                id:layout_back_buttons
+                z:8
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.ChromeBack
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        flipable.flipped = false
+                    }
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.Sync
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        loader.reload()
+                    }
+                }
+                Component.onCompleted: {
+                    window.setHitTestVisible(layout_back_buttons)
+                }
+            }
+            FluRemoteLoader{
+                id:loader
+                lazy: true
+                anchors.fill: parent
+                source: "https://zhu-zichu.gitee.io/Qt_174_LieflatPage.qml"
+            }
+        }
+        front: Item{
+            id:page_front
+            visible: flipable.flipAngle !== 180
+            anchors.fill: flipable
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
+                z:999
+                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
+                //                pageMode: FluNavigationViewType.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存
+                pageMode: FluNavigationViewType.NoStack
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
+                displayMode: GlobalModel.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                onLogoClicked:{
+                    clickCount += 1
+                    showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
+                    if(clickCount === 5){
+                        loader.reload()
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
+                autoSuggestBox:FluAutoSuggestBox{
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: qsTr("Search")
+                    filter: (item) => item[textRole].toLowerCase().includes(text.toLowerCase())
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
+                    ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
+                    window.setHitTestVisible(nav_view.buttonMenu)
+                    window.setHitTestVisible(nav_view.buttonBack)
+                    window.setHitTestVisible(nav_view.imageLogo)
+                    setCurrentIndex(0)
+                }
+            }
+        }
+    }
+
+    Component{
+        id: com_reveal
+        CircularReveal{
+            id: reveal
+            target: window.containerItem()
+            anchors.fill: parent
+            darkToLight: FluTheme.dark
+            onAnimationFinished:{
+                //动画结束后释放资源
+                loader_reveal.sourceComponent = undefined
+            }
+            onImageChanged: {
+                changeDark()
+            }
+        }
+    }
+
+    FluLoader{
+        id:loader_reveal
+        anchors.fill: parent
+    }
+
+    function distance(x1,y1,x2,y2){
+        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
+    }
+
+    function handleDarkChanged(button){
+        if(FluTools.isMacos() || !FluTheme.animationEnabled){
+            changeDark()
+        }else{
+            loader_reveal.sourceComponent = com_reveal
+            var target = window.containerItem()
+            var pos = button.mapToItem(target,0,0)
+            var mouseX = pos.x + button.width / 2
+            var mouseY = pos.y + button.height / 2
+            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            var reveal = loader_reveal.item
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
+        }
+    }
+
+    function changeDark(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluThemeType.Light
+        }else{
+            FluTheme.darkMode = FluThemeType.Dark
+        }
+    }
+
+    Shortcut {
+        sequence: "F5"
+        context: Qt.WindowShortcut
+        onActivated: {
+            if(flipable.flipped){
+                loader.reload()
+            }
+        }
+    }
+
+    Shortcut {
+        sequence: "F6"
+        context: Qt.WindowShortcut
+        onActivated: {
+            tour.open()
+        }
+    }
+
+    FluTour{
+        id: tour
+        finishText: qsTr("Finish")
+        nextText: qsTr("Next")
+        previousText: qsTr("Previous")
+        steps:{
+            var data = []
+            if(!window.useSystemAppBar){
+                data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
+            }
+            data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
+            return data
+        }
+    }
+
+    FpsItem{
+        id:fps_item
+    }
+
+    FluText{
+        text: "fps %1".arg(fps_item.fps)
+        opacity: 0.3
+        anchors{
+            bottom: parent.bottom
+            right: parent.right
+            bottomMargin: 5
+            rightMargin: 5
+        }
+    }
+
+    FluContentDialog{
+        property string newVerson
+        property string body
+        id: dialog_update
+        title: qsTr("Upgrade Tips")
+        message:qsTr("FluentUI is currently up to date ")+ newVerson +qsTr(" -- The current app version") +AppInfo.version+qsTr(" \nNow go and download the new version？\n\nUpdated content: \n")+body
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
+        }
+    }
+
+    NetworkCallable{
+        id:callable
+        property bool silent: true
+        onStart: {
+            console.debug("start check update...")
+        }
+        onFinish: {
+            console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
+        }
+        onSuccess:
+            (result)=>{
+                var data = JSON.parse(result)
+                console.debug("current version "+AppInfo.version)
+                console.debug("new version "+data.tag_name)
+                if(data.tag_name !== AppInfo.version){
+                    dialog_update.newVerson =  data.tag_name
+                    dialog_update.body = data.body
+                    dialog_update.open()
+                }else{
+                    if(!silent){
+                        showInfo(qsTr("The current version is already the latest"))
+                    }
+                }
+            }
+        onError:
+            (status,errorString)=>{
+                if(!silent){
+                    showError(qsTr("The network is abnormal"))
+                }
+                console.debug(status+";"+errorString)
+            }
+    }
+
+    function checkUpdate(silent){
+        callable.silent = silent
+        Network.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        .go(callable)
+    }
+}

3rd/FluentUI/example/qml/window/PageWindow.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import example 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource(arg.url,{animationEnabled:false})
+        }
+    FluLoader{
+        id: loader
+        anchors.fill: parent
+    }
+}

3rd/FluentUI/example/qml/window/SingleInstanceWindow.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("SingleInstance")
+    width: 500
+    height: 600
+    fixSize: true
+    launchMode: FluWindowType.SingleInstance
+
+    FluTextBox{
+        anchors{
+            top:parent.top
+            topMargin:60
+            horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    FluText{
+        wrapMode: Text.WrapAnywhere
+        anchors{
+            left: parent.left
+            right: parent.right
+            leftMargin: 20
+            rightMargin: 20
+            verticalCenter: parent.verticalCenter
+        }
+        text: qsTr("I'm a SingleInstance window, and if I exist, I'll destroy the previous window and create a new one")
+    }
+}

3rd/FluentUI/example/qml/window/SingleTaskWindow.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("SingleTask")
+    width: 500
+    height: 600
+    fixSize: true
+    launchMode: FluWindowType.SingleTask
+
+    FluText{
+        anchors.centerIn: parent
+        text: qsTr("I'm a SingleTask mode window, and if I exist, I activate the window")
+    }
+
+}

3rd/FluentUI/example/qml/window/StandardWindow.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    title:"Standard"
+    width: 500
+    height: 600
+    fixSize: true
+    launchMode: FluWindowType.Standard
+
+    FluMenuBar {
+        FluMenu {
+            title: qsTr("File")
+            Action { text: qsTr("New...") }
+            Action { text: qsTr("Open...") }
+            Action { text: qsTr("Save") }
+            Action { text: qsTr("Save As...") }
+            FluMenuSeparator { }
+            Action { text: qsTr("Quit") }
+        }
+        FluMenu {
+            title: qsTr("Edit")
+            Action { text: qsTr("Cut") }
+            Action { text: qsTr("Copy") }
+            Action { text: qsTr("Paste") }
+        }
+        FluMenu {
+            title: qsTr("Help")
+            Action { text: qsTr("About") }
+        }
+    }
+
+    FluText{
+        anchors.centerIn: parent
+        text: qsTr("I'm a Standard mode window, and every time I create a new window")
+    }
+
+}