update

example/qml/App.qml

@@ -33,7 +33,7 @@ FluLauncher {
         FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
         FluTheme.darkMode = SettingsHelper.getDarkMode()
-        FluTheme.enableAnimation = true
+        FluTheme.animationEnabled = true
         FluRouter.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",

example/qml/chart/T_BarChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Bar Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -69,10 +69,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         width: 500
         height: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_BubbleChart.qml

@@ -13,10 +13,10 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
+    FluFrame{
-        height: 370
+        Layout.preferredWidth: 500
-        width: 500
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_LineChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Line Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_PieChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pie Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -50,10 +50,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_PolarAreaChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Polar Area Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_RadarChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Radar Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_ScatterChart.qml

@@ -13,10 +13,10 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
+    FluFrame{
-        height: 370
+        Layout.preferredWidth: 500
-        width: 500
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -119,5 +119,4 @@ FluScrollablePage{
             }
         }
     }
-
 }

example/qml/global/ItemsOriginal.qml

@@ -473,10 +473,12 @@ FluObject{
         }
         FluPaneItem{
             title: qsTr("Test Crash")
-            visible: FluTools.isWin()
             onTapListener: function(){
                 AppInfo.testCrash()
             }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
+            }
         }
     }
 

example/qml/page/T_Acrylic.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     RowLayout{
         spacing: 10
-        Layout.topMargin: 20
         FluText{
             text:"tintColor:"
             Layout.alignment: Qt.AlignVCenter
@@ -42,10 +41,10 @@ FluScrollablePage{
             value: 32
         }
     }
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 1200/4+20
+        Layout.preferredHeight: 1200/4+20
-        paddings: 10
+        padding: 10
         Layout.topMargin: 10
         FluClip{
             width: 1920/4
@@ -95,7 +94,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Image{
     id:image
     width: 800

example/qml/page/T_Awesome.qml

@@ -12,7 +12,6 @@ FluContentPage {
         id:text_box
         placeholderText: qsTr("Please enter a keyword")
         anchors{
-            topMargin: 20
             top:parent.top
         }
     }

example/qml/page/T_Badge.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Badge")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
         height: 120
-        paddings: 10
+        padding: 10
 
         Column{
             spacing: 15
@@ -114,7 +113,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Rectangle{
     width: 40
     height: 40

example/qml/page/T_BreadcrumbBar.qml

@@ -18,11 +18,10 @@ FluScrollablePage{
         breadcrumb_2.items = items
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         FluBreadcrumbBar{
             id:breadcrumb_1
@@ -36,10 +35,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         ColumnLayout{
@@ -77,7 +76,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluBreadcrumbBar{
     width:parent.width
     separator:">"

example/qml/page/T_Buttons.qml

@@ -10,15 +10,14 @@ FluScrollablePage{
     title: qsTr("Buttons")
 
     FluText{
-        Layout.topMargin: 20
         text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        Layout.topMargin: 10
-        Layout.topMargin: 20
+        padding: 10
 
         FluTextButton{
             disabled: text_button_switch.checked
@@ -42,7 +41,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextButton{
     text:"Text Button"
     onClicked: {
@@ -51,10 +50,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         FluButton{
@@ -79,7 +78,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     text:"Standard Button"
     onClicked: {
@@ -88,11 +87,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluFilledButton{
             disabled: filled_button_switch.checked
@@ -116,7 +115,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFilledButton{
     text:"Filled Button"
     onClicked: {
@@ -125,11 +124,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluToggleButton{
             disabled:toggle_button_switch.checked
@@ -150,7 +149,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleButton{
     text:"Toggle Button"
     onClicked: {
@@ -172,11 +171,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluProgressButton{
             id: btn_progress
@@ -202,7 +201,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressButton{
     text:"Progress Button"
     onClicked: {
@@ -211,11 +210,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluLoadingButton{
             id: btn_loading
@@ -241,7 +240,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluLoadingButton{
     text:"Loading Button"
     onClicked: {
@@ -251,10 +250,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: layout_icon_button.height + 30
+        Layout.preferredHeight: layout_icon_button.height + 30
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         Flow{
             id: layout_icon_button
@@ -323,7 +322,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     onClicked: {
@@ -332,10 +331,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluDropDownButton{
             disabled: drop_down_button_switch.checked
@@ -371,7 +370,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDropDownButton{
     text:"DropDownButton"
     FluMenuItem{
@@ -389,10 +388,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
@@ -424,7 +423,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     checked:true
     text:"Text Button"

example/qml/page/T_CalendarPicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("CalendarPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -28,7 +27,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCalendarPicker{
 
 }'

example/qml/page/T_Captcha.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     FluCaptcha{
         id: captcha
-        Layout.topMargin: 20
         ignoreCase:switch_case.checked
         MouseArea{
             anchors.fill: parent

example/qml/page/T_Carousel.qml

@@ -22,11 +22,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 370
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Column{
             spacing: 15
             anchors{
@@ -62,10 +61,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
-        paddings: 10
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -126,7 +125,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCarousel{
     id:carousel
     width: 400

example/qml/page/T_CheckBox.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("CheckBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 72
+        Layout.preferredHeight: 72
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         FluText{
             text: qsTr("A 2-state CheckBox")
@@ -49,16 +48,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCheckBox{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 72
+        Layout.preferredHeight: 72
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         FluText{
@@ -104,7 +103,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCheckBox{
     text:"Text"
     indeterminate:true

example/qml/page/T_Clip.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Clip")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 380
-        height: 380
+        padding: 10
-        paddings: 10
 
         Column{
             spacing: 15
@@ -88,7 +87,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluClip{
     radius: [25,25,25,25]
     width: 50

example/qml/page/T_ColorPicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ColorPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 60
-        height: 60
+        padding: 10
-        paddings: 10
         RowLayout{
             FluText{
                 text: qsTr("Click to Select a Color - >")
@@ -33,7 +32,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluColorPicker{
 
 }'

example/qml/page/T_ComboBox.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ComboBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 80
+        Layout.preferredHeight: 80
-        paddings: 5
+        padding: 5
-        Layout.topMargin: 20
         Column{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
@@ -32,10 +31,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 80
+        Layout.preferredHeight: 80
-        paddings: 5
+        padding: 5
         Layout.topMargin: 20
         Column{
             spacing: 5
@@ -56,10 +55,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 80
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 5
@@ -85,7 +84,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluComboBox{
     editable: true
     model: ListModel {

example/qml/page/T_DatePicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("DatePicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -32,17 +31,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
+        Layout.preferredHeight: 80
-        paddings: 10
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -61,7 +60,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
     showYear:false
 }'

example/qml/page/T_Dialog.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Dialog")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
             text: qsTr("Show Double Button Dialog")
@@ -24,7 +23,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id:dialog
     title: qsTr("Friendly Reminder")
@@ -57,10 +56,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
@@ -72,7 +71,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id: dialog
     title: qsTr("Friendly Reminder")
@@ -114,10 +113,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluButton{
             anchors.top: parent.top
@@ -138,7 +137,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id: dialog
     title: qsTr("Friendly Reminder")

example/qml/page/T_Expander.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Expander")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: layout_column.height+20
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Column{
             id:layout_column
             spacing: 15
@@ -83,7 +82,7 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluExpander{
     headerText: qsTr("Open a radio box")
     Item{

example/qml/page/T_FlipView.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("FlipView")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 340
+        Layout.preferredHeight: 340
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
@@ -40,7 +39,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     Image{
         source: "qrc:/example/res/image/banner_1.jpg"
@@ -61,10 +60,10 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
@@ -93,7 +92,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     vertical:true
     Image{

example/qml/page/T_Home.qml

@@ -9,7 +9,8 @@ import "../global"
 FluScrollablePage{
 
     launchMode: FluPageType.SingleTask
-    animDisabled: true
+    animationEnabled: false
+    header: Item{}
 
     FluentInitalizrWindow{
         id:fluent_initalizr
@@ -177,7 +178,7 @@ FluScrollablePage{
             property string desc: modelData.extra.desc
             width: 320
             height: 120
-            FluArea{
+            FluFrame{
                 radius: 8
                 width: 300
                 height: 100

example/qml/page/T_Image.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Image")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 260
+        Layout.preferredHeight: 260
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Column{
             spacing: 15
             anchors{
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluImage{
     width: 400
     height: 300

example/qml/page/T_InfoBar.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("InfoBar")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 270
-        height: 270
+        padding: 10
-        paddings: 10
         ColumnLayout{
             spacing: 14
             anchors{
@@ -60,7 +59,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
 
 showWarning(qsTr("This is an InfoBar in the Warning Style"))

example/qml/page/T_Menu.qml

@@ -47,11 +47,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Column{
             id: layout_column
             spacing: 15
@@ -78,7 +77,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenu{
     id:menu
     FluMenuItem:{
@@ -99,10 +98,10 @@ menu.popup()
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -151,7 +150,7 @@ menu.popup()
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenuBar{
     id:menu
     FluMenu:{

example/qml/page/T_MultiWindow.qml

@@ -21,11 +21,10 @@ FluScrollablePage{
 
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
+        Layout.preferredHeight: 86
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Column{
             spacing: 15
             anchors{
@@ -44,10 +43,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
+        Layout.preferredHeight: 86
-        paddings: 10
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -68,10 +67,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
+        Layout.preferredHeight: 86
-        paddings: 10
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -92,7 +91,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluWindow{
   //launchMode: FluWindowType.Standard
   //launchMode: FluWindowType.SingleTask
@@ -102,10 +101,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -126,7 +125,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     text: qsTr("Create Window")
     onClicked: {
@@ -136,10 +135,10 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 130
+        Layout.preferredHeight: 130
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         Column{
@@ -164,7 +163,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluWindowResultLauncher{
     id:loginResultLauncher
     path: "/login"

example/qml/page/T_Network.qml

@@ -40,7 +40,6 @@ FluContentPage{
         clip: true
         anchors{
             top: parent.top
-            topMargin: 20
             bottom: parent.bottom
             left: parent.left
         }
@@ -533,7 +532,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         anchors{
             top: layout_flick.top
             bottom: layout_flick.bottom

example/qml/page/T_Pagination.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pagination")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 200
+        Layout.preferredHeight: 200
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         ColumnLayout{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPagination{
     pageCurrent: 1
     itemCount: 1000

example/qml/page/T_Pivot.qml

@@ -9,13 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pivot")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 400
-        height: 400
+        padding: 10
-        paddings: 10
-
-
 
         FluPivot{
             anchors.fill: parent
@@ -49,7 +46,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPivot{
     anchors.fill: parent
     FluPivotItem:{

example/qml/page/T_Progress.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Progress")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 130
-        height: 130
+        padding: 10
-        paddings: 10
 
         ColumnLayout{
             spacing: 10
@@ -32,7 +31,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
 
 }
@@ -42,11 +41,11 @@ FluProgressRing{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 286
+        Layout.preferredHeight: 286
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -88,7 +87,7 @@ FluProgressRing{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
     indeterminate: false
 }

example/qml/page/T_QRCode.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     FluQRCode{
         id:qrcode
-        Layout.topMargin: 20
         size:slider_size.value
         text:text_box.text
         color:color_picker.current

example/qml/page/T_RadioButton.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("RadioButton")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -41,16 +40,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
@@ -83,7 +82,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButtons{
     spacing: 8
     FluRadioButton{

example/qml/page/T_RatingControl.qml

@@ -9,11 +9,10 @@ FluScrollablePage {
 
     title: qsTr("RatingControl")
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         Column {
             spacing: 10
@@ -27,7 +26,7 @@ FluScrollablePage {
 
     CodeExpander {
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code: 'FluRatingControl{
 
 }'

example/qml/page/T_Rectangle.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Rectangle")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 10
 
         Column{
             spacing: 15
@@ -64,7 +63,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRectangle{
     radius: [25,25,25,25]
     width: 50

example/qml/page/T_RemoteLoader.qml

@@ -7,8 +7,9 @@ import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop
+    header:Item{}
     FluRemoteLoader{
         anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/Qt5_T_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
     }
 }

example/qml/page/T_Settings.qml

@@ -17,11 +17,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 60
+        Layout.preferredHeight: 60
-        paddings: 10
+        padding: 10
         Row{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
@@ -42,11 +42,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
-        paddings: 10
+        padding: 10
         FluCheckBox{
             text: qsTr("Use System AppBar")
             checked: FluApp.useSystemAppBar
@@ -58,11 +58,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
-        paddings: 10
+        padding: 10
         FluCheckBox{
             text:qsTr("Fits AppBar Windows")
             checked: window.fitsAppBarWindows
@@ -85,11 +85,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 128
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -115,11 +115,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 160
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -155,11 +155,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 10

example/qml/page/T_ShortcutPicker.qml

@@ -9,18 +9,17 @@ FluScrollablePage{
 
     title: qsTr("ShortcutPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
-        height: 100
+        padding: 10
-        paddings: 10
         FluShortcutPicker{
             anchors.verticalCenter: parent.verticalCenter
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluShortcutPicker{
 
 }'

example/qml/page/T_Slider.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Slider")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
-        Layout.topMargin: 20
+        padding: 10
-        paddings: 10
 
         Row{
             spacing: 30
@@ -27,18 +26,18 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSlider{
     value:50
 }'
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
         Row{
             spacing: 30
             FluRangeSlider{
@@ -51,7 +50,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRangeSlider{
     orientation: Qt.Vertical
 }'

example/qml/page/T_SplitLayout.qml

@@ -13,7 +13,6 @@ FluContentPage{
         id:layout_dropdown
         anchors{
             top: parent.top
-            topMargin: 20
         }
         FluText{
             text:"orientation:"

example/qml/page/T_StaggeredLayout.qml

@@ -27,7 +27,6 @@ FluContentPage{
     Flickable{
         id: scroll
         anchors.fill: parent
-        anchors.topMargin: 20
         boundsBehavior:Flickable.StopAtBounds
         contentHeight: staggered_view.implicitHeight
         clip: true

example/qml/page/T_StatusLayout.qml

@@ -9,12 +9,11 @@ FluScrollablePage{
 
     title: qsTr("StatusLayout")
 
-    FluArea{
+    FluFrame{
         id:layout_actions
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 50
-        height: 50
+        padding: 10
-        paddings: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -53,11 +52,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 10
-        height: 380
+        Layout.preferredHeight: 380
-        paddings: 10
+        padding: 10
         FluStatusLayout{
             id:status_view
             anchors.fill: parent
@@ -76,7 +75,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluStatusLayout{
     anchors.fill: parent
     statusMode: FluStatusLayoutType.Loading

example/qml/page/T_TabView.qml

@@ -29,11 +29,10 @@ FluScrollablePage{
         newTab()
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 50
-        height: 50
+        padding: 10
-        paddings: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -91,11 +90,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 15
-        height: 400
+        Layout.preferredHeight: 400
-        paddings: 10
+        padding: 10
         FluTabView{
             id:tab_view
             onNewPressed:{
@@ -105,7 +104,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTabView{
     anchors.fill: parent
     Component.onCompleted: {

example/qml/page/T_TableView.qml

@@ -159,7 +159,7 @@ FluContentPage{
             FluCheckBox{
                 anchors.centerIn: parent
                 checked: true === options.checked
-                enableAnimation: false
+                animationEnabled: false
                 clickListener: function(){
                     var obj = table_view.getRow(row)
                     obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
@@ -239,7 +239,7 @@ FluContentPage{
                 }
                 FluCheckBox{
                     checked: true === root.seletedAll
-                    enableAnimation: false
+                    animationEnabled: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
                         root.seletedAll = !root.seletedAll
@@ -390,7 +390,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         id:layout_controls
         anchors{
             left: parent.left

example/qml/page/T_Text.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Text")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 60
-        height: 60
+        padding: 10
-        paddings: 10
 
         FluCopyableText{
             text: qsTr("This is a text that can be copied")
@@ -23,7 +22,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCopyableText{
     text: qsTr("This is a text that can be copied")
 }'

example/qml/page/T_TextBox.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("TextBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         FluTextBox{
             placeholderText: qsTr("Single-line Input Box")
@@ -36,16 +35,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextBox{
     placeholderText: qsTr("Single-line Input Box")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         FluPasswordBox{
@@ -67,16 +66,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPasswordBox{
     placeholderText: qsTr("Please enter your password")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 36+multiine_textbox.height
+        Layout.preferredHeight: 36+multiine_textbox.height
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
 
         FluMultilineTextBox{
@@ -100,16 +99,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMultilineTextBox{
     placeholderText: qsTr("Multi-line Input Box")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluAutoSuggestBox{
             placeholderText: qsTr("AutoSuggestBox")
@@ -131,16 +130,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluAutoSuggestBox{
     placeholderText: qsTr("AutoSuggestBox")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluSpinBox{
             disabled: spin_box_switch.checked
@@ -160,7 +159,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSpinBox{
 
 }'

example/qml/page/T_Theme.qml

@@ -11,11 +11,10 @@ FluScrollablePage{
     id: root
     title: qsTr("Theme")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
         Layout.preferredHeight: 340
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing:0
@@ -115,16 +114,16 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
+                checked: FluTheme.animationEnabled
                 onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                    FluTheme.animationEnabled = !FluTheme.animationEnabled
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true

example/qml/page/T_TimePicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("TimePicker")
     launchMode: FluPageType.SingleInstance
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 10
 
         ColumnLayout{
 
@@ -43,17 +42,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
+        Layout.preferredHeight: 80
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
 
@@ -83,7 +82,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
     hourFormat:FluTimePickerType.HH
 }'

example/qml/page/T_Timeline.qml

@@ -106,7 +106,6 @@ FluScrollablePage{
 
     RowLayout{
         spacing: 20
-        Layout.topMargin: 20
         FluTextBox{
             id: text_box
             text: "Technical testing 2015-09-01"

example/qml/page/T_ToggleSwitch.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ToggleSwitch")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -41,7 +40,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleSwitch{
     text:"Text"
 }'

example/qml/page/T_Tooltip.qml

@@ -10,15 +10,14 @@ FluScrollablePage{
     title: qsTr("Tooltip")
 
     FluText{
-        Layout.topMargin: 20
         text: qsTr("Hover over Tultip and it pops up")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
 
         Column{
             spacing: 5
@@ -41,7 +40,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     iconSize: 15
@@ -53,11 +52,11 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
 
         Column{
             spacing: 5
@@ -84,7 +83,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     id: button_1
     text: qsTr("Delete")

example/qml/page/T_Tour.qml

@@ -18,11 +18,10 @@ FluScrollablePage{
         ]
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 130
+        Layout.preferredHeight: 130
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         FluFilledButton{
             anchors{
@@ -66,7 +65,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTour{
     id:tour
     steps:[

example/qml/page/T_TreeView.qml

@@ -33,7 +33,6 @@ FluContentPage {
         spacing: 12
         width: 300
         anchors{
-            topMargin: 20
             top:parent.top
             left: parent.left
             leftMargin: 10
@@ -103,7 +102,7 @@ FluContentPage {
             }
         }
     }
-    FluArea{
+    FluFrame{
         anchors{
             left: layout_column.right
             top: parent.top

example/qml/page/T_Typography.qml

@@ -10,15 +10,14 @@ FluContentPage {
     title: qsTr("Typography")
     rightPadding: 10
 
-    FluArea{
+    FluFrame{
         anchors{
             top:parent.top
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-            topMargin: 20
         }
-        paddings: 10
+        padding: 10
         ColumnLayout{
             spacing: 0
             scale: textScale

example/qml/page/T_Watermark.qml

@@ -9,9 +9,8 @@ FluContentPage{
 
     title: qsTr("Watermark")
 
-    FluArea{
+    FluFrame{
         anchors.fill: parent
-        anchors.topMargin: 20
 
         ColumnLayout{
             anchors{

example/qml/window/HotloadWindow.qml

@@ -20,7 +20,7 @@ FluWindow {
             loader.reload()
         }
     }
-    FluArea{
+    FluFrame{
         anchors.fill: parent
         FluRemoteLoader{
             id:loader

example/qml/window/MainWindow.qml

@@ -253,7 +253,7 @@ FluWindow {
     }
 
     function handleDarkChanged(button){
-        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
+        if(!FluTheme.animationEnabled || window.fitsAppBarWindows === false){
             changeDark()
         }else{
             if(loader_reveal.sourceComponent){

src/FluTheme.cpp

@@ -14,7 +14,7 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{
     accentColor(FluColors::getInstance()->Blue());
     darkMode(FluThemeType::DarkMode::Light);
     nativeText(false);
-    enableAnimation(true);
+    animationEnabled(true);
     _systemDark = systemDark();
     qApp->installEventFilter(this);
 }

src/FluTheme.h

@@ -32,7 +32,7 @@ class FluTheme : public QObject
     Q_PROPERTY_AUTO(QColor,itemCheckColor);
     Q_PROPERTY_AUTO(int,darkMode);
     Q_PROPERTY_AUTO(bool,nativeText);
-    Q_PROPERTY_AUTO(bool,enableAnimation);
+    Q_PROPERTY_AUTO(bool,animationEnabled);
     QML_NAMED_ELEMENT(FluTheme)
     QML_SINGLETON
 private:

src/FluentUI.cpp

@@ -36,7 +36,7 @@ void FluentUI::registerTypes(const char *uri){
 
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAcrylic.qml"),uri,major,minor,"FluAcrylic");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
-    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluArea.qml"),uri,major,minor,"FluArea");
+    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluFrame.qml"),uri,major,minor,"FluFrame");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluBadge.qml"),uri,major,minor,"FluBadge");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluBreadcrumbBar.qml"),uri,major,minor,"FluBreadcrumbBar");

src/Qt5/imports/FluentUI/Controls/FluArea.qml

@@ -1,28 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
-
-Rectangle {
-    default property alias contentData : layout_content.data
-    property int paddings : 0
-    property int leftPadding : 0
-    property int rightPadding : 0
-    property int topPadding : 0
-    property int bottomPadding : 0
-    id:control
-    radius: 4
-    color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-    border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-    border.width: 1
-    implicitHeight: height
-    implicitWidth: width
-    Item {
-        id: layout_content
-        anchors.fill: parent
-        anchors.leftMargin: Math.max(paddings,leftPadding)
-        anchors.rightMargin: Math.max(paddings,rightPadding)
-        anchors.topMargin: Math.max(paddings,topPadding)
-        anchors.bottomMargin: Math.max(paddings,bottomPadding)
-    }
-}

src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -56,7 +56,7 @@ FluTextBox{
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         contentItem: FluRectangle{

src/Qt5/imports/FluentUI/Controls/FluBreadcrumbBar.qml

@@ -33,7 +33,7 @@ Item {
                 properties: "opacity"
                 from: 1
                 to: 0
-                duration: FluTheme.enableAnimation ? 83 : 1
+                duration: FluTheme.animationEnabled ? 83 : 1
             }
         }
         add: Transition {
@@ -41,7 +41,7 @@ Item {
                 properties: "opacity"
                 from: 0
                 to: 1
-                duration: FluTheme.enableAnimation ? 83 : 1
+                duration: FluTheme.animationEnabled ? 83 : 1
             }
         }
         delegate: Item{

src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -63,7 +63,7 @@ FluButton {
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         exit:Transition {
@@ -71,12 +71,12 @@ FluButton {
                 property: "opacity"
                 from:1
                 to:0
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         contentItem: Item{
             clip: true
-            FluArea{
+            FluFrame{
                 id:container
                 width: 300
                 height: 360
@@ -163,7 +163,7 @@ FluButton {
                                 OpacityAnimator{
                                     from: 0
                                     to: 1
-                                    duration: 88
+                                    duration: 83
                                 }
                                 ScaleAnimator{
                                     from: 0.5
@@ -176,7 +176,7 @@ FluButton {
                                 OpacityAnimator{
                                     from: 1
                                     to: 0
-                                    duration: 88
+                                    duration: 83
                                 }
                                 ScaleAnimator{
                                     from: 1.0

src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml

@@ -22,7 +22,7 @@ Button {
     property alias textColor: btn_text.textColor
     property bool textRight: true
     property real textSpacing: 6
-    property bool enableAnimation: FluTheme.enableAnimation
+    property bool animationEnabled: FluTheme.animationEnabled
     property var clickListener : function(){
         checked = !checked
     }
@@ -94,7 +94,7 @@ Button {
                 return normalColor
             }
             Behavior on color {
-                enabled: control.enableAnimation
+                enabled: control.animationEnabled
                 ColorAnimation{
                     duration: 83
                 }
@@ -107,7 +107,7 @@ Button {
                 visible: indeterminate
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
-                    enabled: control.enableAnimation
+                    enabled: control.animationEnabled
                     NumberAnimation{
                         duration: 83
                     }
@@ -121,7 +121,7 @@ Button {
                 visible: checked && !indeterminate
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
-                    enabled: control.enableAnimation
+                    enabled: control.animationEnabled
                     NumberAnimation{
                         duration: 83
                     }

src/Qt5/imports/FluentUI/Controls/FluComboBox.qml

@@ -120,7 +120,7 @@ T.ComboBox {
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         exit:Transition {
@@ -128,7 +128,7 @@ T.ComboBox {
                 property: "opacity"
                 from:1
                 to:0
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         background:Rectangle{

src/Qt5/imports/FluentUI/Controls/FluContentPage.qml

@@ -5,56 +5,4 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 FluPage {
-    property alias title: text_title.text
-    default property alias content: container.data
-    property int leftPadding: 10
-    property int topPadding: 0
-    property int rightPadding: 10
-    property int bottomPadding: 10
-    property alias color: status_view.color
-    property alias statusMode: status_view.statusMode
-    property alias loadingText: status_view.loadingText
-    property alias emptyText:status_view.emptyText
-    property alias errorText:status_view.errorText
-    property alias errorButtonText:status_view.errorButtonText
-    property alias loadingItem :status_view.loadingItem
-    property alias emptyItem : status_view.emptyItem
-    property alias errorItem :status_view.errorItem
-    signal errorClicked
-
-    id:control
-    FluText{
-        id:text_title
-        visible: text !== ""
-        height: visible ? contentHeight : 0
-        font: FluTextStyle.Title
-        anchors{
-            top: parent.top
-            topMargin: control.topPadding
-            left: parent.left
-            right: parent.right
-            leftMargin: control.leftPadding
-            rightMargin: control.rightPadding
-        }
-    }
-    FluStatusLayout{
-        id:status_view
-        color: "#00000000"
-        statusMode: FluStatusLayoutType.Success
-        onErrorClicked: control.errorClicked()
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: text_title.bottom
-            bottom: parent.bottom
-            leftMargin: control.leftPadding
-            rightMargin: control.rightPadding
-            bottomMargin: control.bottomPadding
-        }
-        Item{
-            clip: true
-            id:container
-            anchors.fill: parent
-        }
-    }
 }

src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml

@@ -105,7 +105,7 @@ FluButton {
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         exit:Transition {
@@ -113,7 +113,7 @@ FluButton {
                 property: "opacity"
                 from:1
                 to:0
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         background:Item{

src/Qt5/imports/FluentUI/Controls/FluExpander.qml

@@ -64,7 +64,7 @@ Item {
                 iconSource:FluentIcons.ChevronUp
                 iconSize: 15
                 Behavior on rotation {
-                    enabled: FluTheme.enableAnimation
+                    enabled: FluTheme.animationEnabled
                     NumberAnimation{
                         duration: 167
                         easing.type: Easing.OutCubic
@@ -115,7 +115,7 @@ Item {
                     to:"expand"
                     NumberAnimation {
                         properties: "anchors.topMargin"
-                        duration: FluTheme.enableAnimation && d.flag ? 167 : 0
+                        duration: FluTheme.animationEnabled && d.flag ? 167 : 0
                         easing.type: Easing.OutCubic
                     }
                 },
@@ -123,7 +123,7 @@ Item {
                     to:"collapsed"
                     NumberAnimation {
                         properties: "anchors.topMargin"
-                        duration: FluTheme.enableAnimation && d.flag ? 167 : 0
+                        duration: FluTheme.animationEnabled && d.flag ? 167 : 0
                         easing.type: Easing.OutCubic
                     }
                 }

src/Qt5/imports/FluentUI/Controls/FluFrame.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.impl 2.15
+import QtQuick.Templates 2.15 as T
+import FluentUI 1.0
+
+T.Frame {
+    property alias border: d.border
+    property alias color: d.color
+    property alias radius: d.radius
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+    padding: 0
+    background: Rectangle {
+        id:d
+        radius: 4
+        border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluInfoBar.qml

@@ -54,7 +54,7 @@ FluObject {
                     NumberAnimation {
                         properties: "y"
                         easing.type: Easing.OutCubic
-                        duration: FluTheme.enableAnimation ? 333 : 0
+                        duration: FluTheme.animationEnabled ? 333 : 0
                     }
                 }
                 onChildrenChanged: if(children.length === 0)  destroy();
@@ -95,7 +95,7 @@ FluObject {
                     scale: item ? 1 : 0;
                     asynchronous: true
                     Behavior on scale {
-                        enabled: FluTheme.enableAnimation
+                        enabled: FluTheme.animationEnabled
                         NumberAnimation {
                             easing.type: Easing.OutCubic
                             duration: 167

src/Qt5/imports/FluentUI/Controls/FluLoadingButton.qml

@@ -23,7 +23,7 @@ FluButton {
             visible: Number(width)!==0
             clip: true
             Behavior on width {
-                enabled: FluTheme.enableAnimation
+                enabled: FluTheme.animationEnabled
                 NumberAnimation{
                     duration: 167
                     easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluMenu.qml

@@ -5,7 +5,7 @@ import QtQuick.Templates 2.15 as T
 import FluentUI 1.0
 
 T.Menu {
-    property bool enableAnimation: true
+    property bool animationEnabled: true
     id: control
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             contentWidth + leftPadding + rightPadding)
@@ -20,7 +20,7 @@ T.Menu {
             property: "opacity"
             from:0
             to:1
-            duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
+            duration: FluTheme.animationEnabled && control.animationEnabled ? 83 : 0
         }
     }
     exit:Transition {
@@ -28,7 +28,7 @@ T.Menu {
             property: "opacity"
             from:1
             to:0
-            duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
+            duration: FluTheme.animationEnabled && control.animationEnabled ? 83 : 0
         }
     }
     contentItem: ListView {

src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml

@@ -167,7 +167,7 @@ Item {
                 return  control.cellHeight
             }
             Behavior on height {
-                enabled: FluTheme.enableAnimation && d.animDisabled
+                enabled: FluTheme.animationEnabled && d.animDisabled
                 NumberAnimation{
                     duration: 83
                 }
@@ -310,7 +310,7 @@ Item {
                             return true
                         }
                         Behavior on rotation {
-                            enabled: FluTheme.enableAnimation && d.animDisabled
+                            enabled: FluTheme.animationEnabled && d.animDisabled
                             NumberAnimation{
                                 duration: 167
                                 easing.type: Easing.OutCubic
@@ -457,7 +457,7 @@ Item {
         id:com_panel_item
         Item{
             Behavior on height {
-                enabled: FluTheme.enableAnimation && d.animDisabled
+                enabled: FluTheme.animationEnabled && d.animDisabled
                 NumberAnimation{
                     duration: 167
                     easing.type: Easing.OutCubic
@@ -771,13 +771,13 @@ Item {
                 visible: opacity
                 opacity: d.isMinimal
                 Behavior on opacity{
-                    enabled: FluTheme.enableAnimation && d.animDisabled
+                    enabled: FluTheme.animationEnabled && d.animDisabled
                     NumberAnimation{
                         duration: 83
                     }
                 }
                 Behavior on Layout.preferredWidth {
-                    enabled: FluTheme.enableAnimation && d.animDisabled
+                    enabled: FluTheme.animationEnabled && d.animDisabled
                     NumberAnimation{
                         duration: 167
                         easing.type: Easing.OutCubic
@@ -880,7 +880,7 @@ Item {
             }
         }
         Behavior on anchors.leftMargin {
-            enabled: FluTheme.enableAnimation && d.animDisabled
+            enabled: FluTheme.animationEnabled && d.animDisabled
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
@@ -925,14 +925,14 @@ Item {
         }
         x: visible ? 0 : -width
         Behavior on width {
-            enabled: FluTheme.enableAnimation && d.animDisabled
+            enabled: FluTheme.animationEnabled && d.animDisabled
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
             }
         }
         Behavior on x {
-            enabled: FluTheme.enableAnimation && d.animDisabled
+            enabled: FluTheme.animationEnabled && d.animDisabled
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
@@ -1012,7 +1012,7 @@ Item {
                 interactive: false
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
-                highlightMoveDuration: FluTheme.enableAnimation && d.animDisabled ? 167 : 0
+                highlightMoveDuration: FluTheme.animationEnabled && d.animDisabled ? 167 : 0
                 highlight: Item{
                     clip: true
                     Rectangle{
@@ -1231,11 +1231,15 @@ Item {
         }
     }
     function setCurrentIndex(index){
-        nav_list.currentIndex = index
         var item = nav_list.model[index]
+        if(item.url){
+            nav_list.currentIndex = index
             if(item instanceof FluPaneItem){
                 item.tap()
             }
+        }else{
+            item.onTapListener()
+        }
     }
     function getItems(){
         return nav_list.model

src/Qt5/imports/FluentUI/Controls/FluPage.qml

@@ -4,31 +4,45 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Item {
+Page {
     property int launchMode: FluPageType.SingleTop
-    property bool animDisabled: false
+    property bool animationEnabled: FluTheme.animationEnabled
     property string url : ""
     id: control
-    opacity: visible
-    visible: false
     StackView.onRemoved: destroy()
-    Behavior on opacity{
+    padding: 5
-        enabled: !animDisabled && FluTheme.enableAnimation
+    visible: false
-        NumberAnimation{
+    opacity: visible
-            duration: 167
-        }
-    }
     transform: Translate {
         y: control.visible ? 0 : 80
         Behavior on y{
-            enabled: !animDisabled && FluTheme.enableAnimation
+            enabled: control.animationEnabled
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
             }
         }
     }
+    Behavior on opacity {
+        enabled: control.animationEnabled
+        NumberAnimation{
+            duration: 83
+        }
+    }
+    background: Item{}
+    header: Item{
+        implicitHeight: 40
+        FluText{
+            id:text_title
+            text: control.title
+            font: FluTextStyle.Title
+            anchors{
+                left: parent.left
+                leftMargin: 5
+            }
+        }
+    }
     Component.onCompleted: {
-        visible = true
+        control.visible = true
     }
 }

src/Qt5/imports/FluentUI/Controls/FluPivot.qml

@@ -30,7 +30,7 @@ Page {
         spacing: control.headerSpacing
         interactive: false
         orientation: ListView.Horizontal
-        highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
+        highlightMoveDuration: FluTheme.animationEnabled ? 167 : 0
         highlight: Item{
             clip: true
             Rectangle{
@@ -40,7 +40,7 @@ Page {
                 width: nav_list.currentItem ? nav_list.currentItem.width : 0
                 y:d.tabY
                 Behavior on width {
-                    enabled: FluTheme.enableAnimation
+                    enabled: FluTheme.animationEnabled
                     NumberAnimation{
                         duration: 167
                         easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluPopup.qml

@@ -15,7 +15,7 @@ Popup {
     enter: Transition {
         NumberAnimation {
             property: "opacity"
-            duration: FluTheme.enableAnimation ? 83 : 0
+            duration: FluTheme.animationEnabled ? 83 : 0
             from:0
             to:1
         }
@@ -24,7 +24,7 @@ Popup {
     exit:Transition {
         NumberAnimation {
             property: "opacity"
-            duration: FluTheme.enableAnimation ? 83 : 0
+            duration: FluTheme.animationEnabled ? 83 : 0
             from:1
             to:0
         }

src/Qt5/imports/FluentUI/Controls/FluProgressBar.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 ProgressBar{
+    property int duration: 888
     property real strokeWidth: 6
     property bool progressVisible: false
     property color color: FluTheme.primaryColor
@@ -17,7 +18,7 @@ ProgressBar{
         if(!indeterminate){
             animator_x.duration = 0
             rect_progress.x = 0
-            animator_x.duration = 888
+            animator_x.duration = control.duration
         }
     }
     background: Rectangle {
@@ -46,7 +47,7 @@ ProgressBar{
                 from: -rect_progress.width
                 to:control.width+rect_progress.width
                 loops: Animation.Infinite
-                duration: 888
+                duration: control.duration
             }
         }
     }

src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml

@@ -73,10 +73,10 @@ Button {
                 enabled: control.progress !== 0
                 SequentialAnimation {
                     PauseAnimation {
-                        duration: FluTheme.enableAnimation ? 167 : 0
+                        duration: FluTheme.animationEnabled ? 167 : 0
                     }
                     NumberAnimation{
-                        duration: FluTheme.enableAnimation ? 167 : 0
+                        duration: FluTheme.animationEnabled ? 167 : 0
                         from: 3
                         to: background.height
                     }

src/Qt5/imports/FluentUI/Controls/FluRadioButton.qml

@@ -66,7 +66,7 @@ Button {
                 return checked ? 4 : 1
             }
             Behavior on border.width {
-                enabled: FluTheme.enableAnimation
+                enabled: FluTheme.animationEnabled
                 NumberAnimation{
                     duration: 167
                     easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -5,75 +5,16 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 FluPage {
-    property alias title: text_title.text
     default property alias content: container.data
-    property int spacing : 0
-    property int leftPadding: 10
-    property int topPadding: 0
-    property int rightPadding: 10
-    property int bottomPadding: 10
-    property alias color: status_view.color
-    property alias statusMode: status_view.statusMode
-    property alias loadingText: status_view.loadingText
-    property alias emptyText:status_view.emptyText
-    property alias errorText:status_view.errorText
-    property alias errorButtonText:status_view.errorButtonText
-    property alias loadingItem :status_view.loadingItem
-    property alias emptyItem : status_view.emptyItem
-    property alias errorItem :status_view.errorItem
-    signal errorClicked
-    id:control
-    FluText{
-        id:text_title
-        font: FluTextStyle.Title
-        visible: text !== ""
-        height: visible ? contentHeight : 0
-        padding: 0
-        anchors{
-            top: parent.top
-            topMargin: control.topPadding
-            left: parent.left
-            right: parent.right
-            leftMargin: control.leftPadding
-            rightMargin: control.rightPadding
-        }
-    }
-    FluStatusLayout{
-        id:status_view
-        color: "#00000000"
-        statusMode: FluStatusLayoutType.Success
-        onErrorClicked: control.errorClicked()
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: text_title.bottom
-            bottom: parent.bottom
-            bottomMargin: control.bottomPadding
-        }
     Flickable{
-            id:flickview
         clip: true
         anchors.fill: parent
-            contentWidth: parent.width
+        ScrollBar.vertical: FluScrollBar {}
-            contentHeight: container.height
-            ScrollBar.vertical: FluScrollBar {
-                anchors.right: flickview.right
-                anchors.rightMargin: 2
-            }
         boundsBehavior: Flickable.StopAtBounds
+        contentHeight: container.height
         ColumnLayout{
             id:container
-                spacing: control.spacing
-                clip: true
-                anchors{
-                    left: parent.left
-                    right: parent.right
-                    top: parent.top
-                    leftMargin: control.leftPadding
-                    rightMargin: control.rightPadding
-                }
             width: parent.width
         }
     }
 }
-}

src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml

@@ -62,7 +62,7 @@ T.SpinBox {
                 }
             }
             Behavior on height{
-                enabled: FluTheme.enableAnimation
+                enabled: FluTheme.animationEnabled
                 NumberAnimation{
                     duration: 83
                     easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluStatusLayout.qml

@@ -42,8 +42,8 @@ Item{
     }
     Component{
         id:com_loading
-        FluArea{
+        FluFrame{
-            paddings: 0
+            padding: 0
             border.width: 0
             radius: 0
             color:control.color
@@ -62,8 +62,8 @@ Item{
     }
     Component {
         id:com_empty
-        FluArea{
+        FluFrame{
-            paddings: 0
+            padding: 0
             border.width: 0
             radius: 0
             color:control.color
@@ -79,8 +79,8 @@ Item{
     }
     Component{
         id:com_error
-        FluArea{
+        FluFrame{
-            paddings: 0
+            padding: 0
             border.width: 0
             radius: 0
             color:control.color

src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -46,7 +46,7 @@ FluClip{
             }
         }
         Behavior on height{
-            enabled: FluTheme.enableAnimation
+            enabled: FluTheme.animationEnabled
             NumberAnimation{
                 duration: 83
                 easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluTextBoxMenu.qml

@@ -9,7 +9,7 @@ FluMenu{
     property string selectAllText : qsTr("Select All")
     property var inputItem
     id:menu
-    enableAnimation: false
+    animationEnabled: false
     width: 120
     focus: false
     onVisibleChanged: {

src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml

@@ -121,7 +121,7 @@ FluButton {
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         exit:Transition {
@@ -129,7 +129,7 @@ FluButton {
                 property: "opacity"
                 from:1
                 to:0
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         background:Item{

src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -102,7 +102,7 @@ Button {
                     }
                 }
                 Behavior on x  {
-                    enabled: FluTheme.enableAnimation
+                    enabled: FluTheme.animationEnabled
                     NumberAnimation {
                         duration: 167
                         easing.type: Easing.OutCubic

src/Qt5/imports/FluentUI/Controls/FluTour.qml

@@ -124,7 +124,7 @@ Popup{
             ctx.fill()
         }
     }
-    FluArea{
+    FluFrame{
         id: layout_panne
         radius: 5
         width: 500

src/Qt5/imports/FluentUI/Controls/FluTreeView.qml

@@ -51,7 +51,7 @@ Item {
                 }
                 NumberAnimation {
                     properties: "opacity"
-                    duration: 88
+                    duration: 83
                     from: 0
                     to: 1
                 }
@@ -70,7 +70,7 @@ Item {
                 }
                 NumberAnimation {
                     properties: "opacity"
-                    duration: 88
+                    duration: 83
                     from: 0
                     to: 1
                 }
@@ -373,7 +373,7 @@ Item {
                     horizontalPadding:0
                     verticalPadding: 0
                     checked: itemModel.checked
-                    enableAnimation:false
+                    animationEnabled:false
                     visible: control.checkable
                     padding: 0
                     clickListener: function(){

src/Qt5/imports/FluentUI/Controls/FluWindow.qml

@@ -142,7 +142,7 @@ Window {
             Behavior on opacity {
                 SequentialAnimation {
                     PauseAnimation {
-                        duration: 88
+                        duration: 83
                     }
                     NumberAnimation{
                         duration:  167

src/Qt5/imports/fluentui.qrc

@@ -5,7 +5,6 @@
         <file>FluentUI/Font/Segoe_Fluent_Icons.ttf</file>
         <file>FluentUI/Controls/FluAcrylic.qml</file>
         <file>FluentUI/Controls/FluAppBar.qml</file>
-        <file>FluentUI/Controls/FluArea.qml</file>
         <file>FluentUI/Controls/FluAutoSuggestBox.qml</file>
         <file>FluentUI/Controls/FluBadge.qml</file>
         <file>FluentUI/Controls/FluBreadcrumbBar.qml</file>
@@ -107,5 +106,6 @@
         <file>FluentUI/Controls/qmldir</file>
         <file>FluentUI/Controls/FluEvent.qml</file>
         <file>FluentUI/Controls/FluEventBus.qml</file>
+        <file>FluentUI/Controls/FluFrame.qml</file>
     </qresource>
 </RCC>

src/Qt6/imports/FluentUI/Controls/FluArea.qml

@@ -1,28 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-
-Rectangle {
-    default property alias contentData : layout_content.data
-    property int paddings : 0
-    property int leftPadding : 0
-    property int rightPadding : 0
-    property int topPadding : 0
-    property int bottomPadding : 0
-    id:control
-    radius: 4
-    color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-    border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-    border.width: 1
-    implicitHeight: height
-    implicitWidth: width
-    Item {
-        id: layout_content
-        anchors.fill: parent
-        anchors.leftMargin: Math.max(paddings,leftPadding)
-        anchors.rightMargin: Math.max(paddings,rightPadding)
-        anchors.topMargin: Math.max(paddings,topPadding)
-        anchors.bottomMargin: Math.max(paddings,bottomPadding)
-    }
-}

src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -55,7 +55,7 @@ FluTextBox{
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         contentItem: FluRectangle{

src/Qt6/imports/FluentUI/Controls/FluBreadcrumbBar.qml

@@ -33,7 +33,7 @@ Item {
                 properties: "opacity"
                 from: 1
                 to: 0
-                duration: FluTheme.enableAnimation ? 83 : 1
+                duration: FluTheme.animationEnabled ? 83 : 1
             }
         }
         add: Transition {
@@ -41,7 +41,7 @@ Item {
                 properties: "opacity"
                 from: 0
                 to: 1
-                duration: FluTheme.enableAnimation ? 83 : 1
+                duration: FluTheme.animationEnabled ? 83 : 1
             }
         }
         delegate: Item{

src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -62,7 +62,7 @@ FluButton {
                 property: "opacity"
                 from:0
                 to:1
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         exit:Transition {
@@ -70,12 +70,12 @@ FluButton {
                 property: "opacity"
                 from:1
                 to:0
-                duration: FluTheme.enableAnimation ? 83 : 0
+                duration: FluTheme.animationEnabled ? 83 : 0
             }
         }
         contentItem: Item{
             clip: true
-            FluArea{
+            FluFrame{
                 id:container
                 width: 300
                 height: 360
@@ -162,7 +162,7 @@ FluButton {
                                 OpacityAnimator{
                                     from: 0
                                     to: 1
-                                    duration: 88
+                                    duration: 83
                                 }
                                 ScaleAnimator{
                                     from: 0.5
@@ -175,7 +175,7 @@ FluButton {
                                 OpacityAnimator{
                                     from: 1
                                     to: 0
-                                    duration: 88
+                                    duration: 83
                                 }
                                 ScaleAnimator{
                                     from: 1.0