update

example/qml/page/T_Chart.qml

@@ -7,15 +7,15 @@ import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    title:"Timeline"
+    title:"Chart"
 
     function randomScalingFactor() {
         return Math.random().toFixed(1);
     }
 
     FluArea{
-        Layout.fillWidth: true
         height: 370
+        width: 500
         paddings: 10
         Layout.topMargin: 20
         FluChart{
@@ -121,7 +121,7 @@ FluScrollablePage{
     }
 
     FluArea{
-        Layout.fillWidth: true
+        width: 500
         height: 370
         paddings: 10
         Layout.topMargin: 20
@@ -198,7 +198,7 @@ FluScrollablePage{
     }
 
     FluArea{
-        Layout.fillWidth: true
+        width: 500
         height: 370
         paddings: 10
         Layout.topMargin: 20
@@ -236,7 +236,7 @@ FluScrollablePage{
     }
 
     FluArea{
-        Layout.fillWidth: true
+        width: 500
         height: 370
         paddings: 10
         Layout.topMargin: 20
@@ -328,5 +328,4 @@ FluScrollablePage{
         }
     }
 
-
 }

example/qml/page/T_Timeline.qml

@@ -9,6 +9,69 @@ FluScrollablePage{
 
     title:"Timeline"
 
+    Component{
+        id:com_dot
+        Rectangle{
+            width: 16
+            height: 16
+            radius: 8
+            border.width: 4
+            border.color: FluColors.Green.dark
+        }
+    }
 
 
+    ListModel{
+        id:list_model
+
+        ListElement{
+            text:"Create a services site 2015-09-01"
+        }
+        ListElement{
+            text:"Solve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01"
+            dot:()=>com_dot
+        }
+        ListElement{
+            text:"Technical testing 2015-09-01"
+        }
+        ListElement{
+            text:"Network problems being solved 2015-09-01"
+        }
+    }
+
+    RowLayout{
+        spacing: 20
+        Layout.topMargin: 20
+        FluTextBox{
+            id:text_box
+            text:"Technical testing 2015-09-01"
+        }
+        FluFilledButton{
+            text:"Append"
+            onClicked: {
+                list_model.append({text:text_box.text})
+            }
+        }
+        FluFilledButton{
+            text:"clear"
+            onClicked: {
+                list_model.clear()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: time_line.height + 20
+        paddings: 10
+        Layout.topMargin: 10
+
+        FluTimeline{
+            id:time_line
+            anchors.verticalCenter: parent.verticalCenter
+            model:list_model
+        }
+
+    }
+
 }

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -67,8 +67,8 @@ Item {
             return data
         }
         function refreshWindow(){
-            Window.window.width = Window.window.width-1
+            Window.window.height = Window.window.height-1
-            Window.window.width = Window.window.width+1
+            Window.window.height = Window.window.height+1
         }
     }
     Component.onCompleted: {

src/imports/FluentUI/Controls/FluTimeline.qml

@@ -3,41 +3,62 @@ import QtQuick.Controls
 import FluentUI
 
 Item{
-    property var items: []
+    property alias model: repeater.model
     id:control
 
-    ListModel{
+    width: layout_column.width
-        id:list_model
+    height: layout_column.height
+
+    Rectangle{
+        color: Qt.rgba(240/255,240/255,240/255,1)
+        height: parent.height
+        width: 2
+        anchors{
+            left: parent.left
+            leftMargin: 7
+        }
     }
 
-    Component.onCompleted: {
+    Component{
-        items = [
+        id:com_dot
-                    {
+        Rectangle{
-                      text: 'Create a services site 2015-09-01',
+            width: 16
-                    },
+            height: 16
-                    {
+            radius: 8
-                      text: 'Solve initial network problems 2015-09-01',
+            border.width: 4
-                    },
+            border.color: FluTheme.primaryColor.dark
-                    {
+        }
-                      text: 'Technical testing 2015-09-01',
-                    },
-                    {
-                      text: 'Network problems being solved 2015-09-01',
-                    },
-                  ];
     }
 
     Column{
         id:layout_column
+        spacing: 30
         Repeater{
+            id:repeater
+            Item{
+                width: item_text.width
+                height: item_text.height
+
+                Loader{
+                    sourceComponent: {
+                        if(model.dot)
+                            return model.dot()
+                        return com_dot
+                    }
+                }
 
-            model:list_model
                 FluText{
+                    id:item_text
+                    anchors{
+                        left: parent.left
+                        leftMargin: 30
+                    }
                     text: model.text
                 }
             }
 
         }
+    }
 
 
 }