diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml
index 0746f80d..8ee7b86b 100644
--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@@ -3,15 +3,15 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
     title:"Buttons"
 
-    spacing: 20
-
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluText{
         Layout.topMargin: 20
@@ -22,6 +22,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         height: 68
         paddings: 10
+        Layout.topMargin: 20
 
         FluTextButton{
             disabled:text_button_switch.selected
@@ -48,11 +49,21 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTextButton{
+   text:"Text Button"
+   onClicked: {
+
+   }
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
+        Layout.topMargin: 20
 
         FluButton{
             disabled:button_switch.selected
@@ -79,10 +90,20 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluButton{
+   text:"Standard Button"
+   onClicked: {
+
+   }
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
         height: 68
+        Layout.topMargin: 20
         paddings: 10
 
         FluFilledButton{
@@ -110,13 +131,22 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluFilledButton{
+   text:"Filled Button"
+   onClicked: {
+
+   }
+}'
+    }
 
 
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
-
+        Layout.topMargin: 20
         FluIconButton{
             iconSource:FluentIcons.ChromeCloseContrast
             disabled:icon_button_switch.selected
@@ -143,12 +173,21 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluIconButton{
+   iconSource:FluentIcons.ChromeCloseContrast
+   onClicked: {
+
+   }
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
-
+        Layout.topMargin: 20
         FluDropDownButton{
             disabled:drop_down_button_switch.selected
             text:"DropDownButton"
@@ -184,12 +223,32 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluDropDownButton{
+  text:"DropDownButton"
+  items:[
+    FluMenuItem{
+      text:"Menu_1"
+    },
+    FluMenuItem{
+      text:"Menu_2"
+    },
+    FluMenuItem{
+      text:"Menu_3"
+    },
+    FluMenuItem{
+      text:"Menu_4"
+    }
+  ]
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
         height: 100
         paddings: 10
-
+        Layout.topMargin: 20
         ColumnLayout{
             spacing: 8
             anchors{
@@ -225,13 +284,23 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluRadioButton{
+   selected:true
+   text:"Text Button"
+   onClicked: {
+
+   }
+}'
+    }
 
 
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
-
+        Layout.topMargin: 20
         FluCheckBox{
             disabled:check_box_switch.selected
             text:"Check Box"
@@ -240,8 +309,6 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
-
         Row{
             spacing: 5
             anchors{
@@ -255,4 +322,10 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCheckBox{
+   text:"Check Box"
+}'
+    }
 }
diff --git a/example/component/CodeExpander.qml b/example/component/CodeExpander.qml
new file mode 100644
index 00000000..a086c1d3
--- /dev/null
+++ b/example/component/CodeExpander.qml
@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+
+FluExpander{
+
+    property string code: ""
+
+    headerText: "Source"
+    contentHeight:content.height
+
+    FluMultilineTextBox{
+        id:content
+        width:parent.width
+        readOnly:true
+        text:code
+        background:Rectangle{
+            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
+        }
+    }
+
+    FluIconButton{
+        iconSource:FluentIcons.Copy
+        anchors{
+            right: parent.right
+            top: parent.top
+            rightMargin: 5
+            topMargin: 5
+        }
+        onClicked:{
+            FluApp.clipText(content.text)
+            showSuccess("复制成功")
+        }
+    }
+
+}
diff --git a/example/qml.qrc b/example/qml.qrc
index d58eeb62..b3d607df 100644
--- a/example/qml.qrc
+++ b/example/qml.qrc
@@ -155,5 +155,6 @@
         <file>page/MediaPage.qml</file>
         <file>T_FlipView.qml</file>
         <file>T_Pivot.qml</file>
+        <file>component/CodeExpander.qml</file>
     </qresource>
 </RCC>