diff --git a/example/qml/page/T_Timeline.qml b/example/qml/page/T_Timeline.qml
index 9d5fb31b..3ecb823c 100644
--- a/example/qml/page/T_Timeline.qml
+++ b/example/qml/page/T_Timeline.qml
@@ -16,26 +16,80 @@ FluScrollablePage{
             height: 16
             radius: 8
             border.width: 4
-            border.color: FluColors.Green.dark
+            border.color: FluColors.Red.dark
         }
     }
 
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.lable
+            color: FluTheme.primaryColor.dark
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.lable)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_text
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.text
+            font.bold: true
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.text)
+                }
+            }
+        }
+    }
 
     ListModel{
         id:list_model
-
         ListElement{
-            text:"Create a services site 2015-09-01"
+            lable:"2013-09-01"
+            lableDelegate:()=>com_lable
+            textDelegate:()=>com_text
+            text:"考上家里蹲大学"
         }
         ListElement{
-            text:"Solve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01"
+            lable:"2017-07-01"
+            text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽~害"
+        }
+        ListElement{
+            lable:"2017-09-01"
+            text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田！！"
             dot:()=>com_dot
         }
         ListElement{
-            text:"Technical testing 2015-09-01"
+            lable:"2018-02-01"
+            text:"玩了一年没钱，惨，出去找工作上班"
         }
         ListElement{
-            text:"Network problems being solved 2015-09-01"
+            lable:"2018-03-01"
+            text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
+        }
+        ListElement{
+            lable:"2020-06-01"
+            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
+        }
+        ListElement{
+            lable:"2022-08-01"
+            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里？'，老板：'无语'"
+        }
+        ListElement{
+            lable:"2023-02-28"
+            text:"开发FluentUI组件库"
         }
     }
 
@@ -60,18 +114,44 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        Layout.fillWidth: true
-        height: time_line.height + 20
-        paddings: 10
+    RowLayout{
         Layout.topMargin: 10
-
-        FluTimeline{
-            id:time_line
-            anchors.verticalCenter: parent.verticalCenter
-            model:list_model
+        FluText{
+            text:"mode:"
         }
+        FluDropDownButton{
+            id:btn_mode
+            Layout.preferredWidth: 100
+            text:"Alternate"
+            FluMenuItem{
+                text:"Left"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Left
+                }
+            }
+            FluMenuItem{
+                text:"Right"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Right
+                }
+            }
+            FluMenuItem{
+                text:"Alternate"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Alternate
+                }
+            }
+        }
+    }
 
+    FluTimeline{
+        id:time_line
+        Layout.fillWidth: true
+        mode: FluTimelineType.Alternate
+        model:list_model
     }
 
 }
diff --git a/src/Def.h b/src/Def.h
index fbc9ae0a..06243d02 100644
--- a/src/Def.h
+++ b/src/Def.h
@@ -15,6 +15,17 @@ Q_ENUM_NS(DarkMode)
 QML_NAMED_ELEMENT(FluThemeType)
 }
 
+namespace FluTimelineType {
+Q_NAMESPACE
+enum Mode {
+    Left = 0x0000,
+    Right = 0x0001,
+    Alternate  = 0x0002,
+};
+Q_ENUM_NS(Mode)
+QML_NAMED_ELEMENT(FluTimelineType)
+}
+
 namespace FluPageType {
 Q_NAMESPACE
 enum LaunchMode {
diff --git a/src/imports/FluentUI/Controls/FluDropDownButton.qml b/src/imports/FluentUI/Controls/FluDropDownButton.qml
index 50b8fb94..8c067c7e 100644
--- a/src/imports/FluentUI/Controls/FluDropDownButton.qml
+++ b/src/imports/FluentUI/Controls/FluDropDownButton.qml
@@ -70,7 +70,6 @@ Button {
     contentItem: FluText {
         id:title
         text: control.text
-        horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: control.textColor
     }
diff --git a/src/imports/FluentUI/Controls/FluTimeline.qml b/src/imports/FluentUI/Controls/FluTimeline.qml
index 27295c12..f8d428eb 100644
--- a/src/imports/FluentUI/Controls/FluTimeline.qml
+++ b/src/imports/FluentUI/Controls/FluTimeline.qml
@@ -3,22 +3,77 @@ import QtQuick.Controls
 import FluentUI
 
 Item{
+    property int mode: FluTimelineType.Left
     property alias model: repeater.model
+    property color lineColor: Qt.rgba(240/255,240/255,240/255,1)
     id:control
-
-    width: layout_column.width
-    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
+    implicitWidth: 380
+    implicitHeight: layout_column.height
+    QtObject{
+        id:d
+        property bool isLeft: control.mode === FluTimelineType.Left
+        property bool isRight: control.mode === FluTimelineType.Right
+        property bool isAlternate: control.mode === FluTimelineType.Alternate
+        property bool hasLable: {
+            for(var i=0;i<model.count;i++){
+                var lable = model.get(i).lable
+                if(lable !== undefined && undefined !== ""){
+                    return true
+                }
+            }
+            return false
+        }
+        property string stateName : {
+            if(hasLable){
+                return "Center"
+            }
+            if(isRight){
+                return "Right"
+            }
+            if(isAlternate){
+                return "Center"
+            }
+            return "Left"
         }
     }
-
+    Rectangle{
+        id:rect_line
+        color: control.lineColor
+        height: parent.height
+        width: 2
+        state: d.stateName
+        states: [
+            State {
+                name: "Left"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.left: control.left
+                }
+                PropertyChanges {
+                    target: rect_line
+                    anchors.leftMargin: 7
+                }
+            },
+            State {
+                name: "Right"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.right: control.right
+                }
+                PropertyChanges {
+                    target: rect_line
+                    anchors.rightMargin: 7
+                }
+            },
+            State {
+                name: "Center"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.horizontalCenter: control.horizontalCenter
+                }
+            }
+        ]
+    }
     Component{
         id:com_dot
         Rectangle{
@@ -26,20 +81,68 @@ Item{
             height: 16
             radius: 8
             border.width: 4
-            border.color: FluTheme.primaryColor.dark
+            color:FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+            border.color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
         }
     }
 
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.lable
+            color: FluTheme.primaryColor.dark
+        }
+    }
+
+    Component{
+        id:com_text
+
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.text
+        }
+
+    }
+
     Column{
         id:layout_column
         spacing: 30
+        width: control.width
         Repeater{
             id:repeater
             Item{
-                width: item_text.width
-                height: item_text.height
-
+                id:item_layout
+                width: layout_column.width
+                height: loader_text.height
                 Loader{
+                    id:item_loader
+                    state: d.stateName
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.left: item_layout.left
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.right: item_layout.right
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.horizontalCenter: item_layout.horizontalCenter
+                            }
+                        }
+                    ]
                     sourceComponent: {
                         if(model.dot)
                             return model.dot()
@@ -47,18 +150,149 @@ Item{
                     }
                 }
 
-                FluText{
-                    id:item_text
-                    anchors{
-                        left: parent.left
-                        leftMargin: 30
+                Loader{
+                    property var modelData: control.model.get(index)
+                    property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
+                    id:loader_lable
+                    sourceComponent: {
+                        if(!modelData){
+                            return undefined
+                        }
+                        var lableDelegate = model.lableDelegate
+                        if(lableDelegate instanceof Function && lableDelegate() instanceof Component){
+                            return lableDelegate()
+                        }
+                        return com_lable
                     }
-                    text: model.text
+                    state: {
+                        if(d.isRight){
+                            return "Left"
+                        }
+                        if(d.isAlternate){
+                            if(index%2===0){
+                                return "Right"
+                            }else{
+                                return "Left"
+                            }
+                        }
+                        return "Right"
+                    }
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.left: item_loader.right
+                                anchors.right: item_layout.right
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        }
+                    ]
                 }
-            }
 
+                Loader{
+                    id:loader_text
+                    property var modelData: control.model.get(index)
+                    property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
+                    state: {
+                        if(d.isRight){
+                            return "Right"
+                        }
+                        if(d.isAlternate){
+                            if(index%2===0){
+                                return "Left"
+                            }else{
+                                return "Right"
+                            }
+                        }
+                        return "Left"
+                    }
+                    sourceComponent: {
+                        if(!modelData){
+                            return undefined
+                        }
+                        var textDelegate = model.textDelegate
+                        if(textDelegate instanceof Function && textDelegate() instanceof Component){
+                            return textDelegate()
+                        }
+                        return com_text
+                    }
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.left: item_loader.right
+                                anchors.right: item_layout.right
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        }
+                    ]
+
+                }
+
+
+            }
         }
     }
-
-
 }