From 4deeb8d4d1a98ffd14405cad19a8d80978ffc55c Mon Sep 17 00:00:00 2001
From: "Alex.huxiyang" <99181718+Alex-huxiyang@users.noreply.github.com>
Date: Wed, 13 Mar 2024 17:36:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(divider):=20demo=E6=8B=86=E8=A7=A3=E4=B8=8E?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=20(#2013)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/divider/demo.taro.tsx        | 76 ++++---------------
 src/packages/divider/demo.tsx             | 69 ++++-------------
 src/packages/divider/demos/h5/demo1.tsx   | 11 +++
 src/packages/divider/demos/h5/demo2.tsx   | 11 +++
 src/packages/divider/demos/h5/demo3.tsx   | 16 ++++
 src/packages/divider/demos/h5/demo4.tsx   | 11 +++
 src/packages/divider/demos/h5/demo5.tsx   | 20 +++++
 src/packages/divider/demos/h5/demo6.tsx   | 21 ++++++
 src/packages/divider/demos/taro/demo1.tsx | 11 +++
 src/packages/divider/demos/taro/demo2.tsx | 11 +++
 src/packages/divider/demos/taro/demo3.tsx | 16 ++++
 src/packages/divider/demos/taro/demo4.tsx | 11 +++
 src/packages/divider/demos/taro/demo5.tsx | 20 +++++
 src/packages/divider/demos/taro/demo6.tsx | 21 ++++++
 src/packages/divider/doc.en-US.md         | 91 ++---------------------
 src/packages/divider/doc.md               | 91 ++---------------------
 src/packages/divider/doc.taro.md          | 91 ++---------------------
 src/packages/divider/doc.zh-TW.md         | 91 ++---------------------
 18 files changed, 231 insertions(+), 458 deletions(-)
 create mode 100644 src/packages/divider/demos/h5/demo1.tsx
 create mode 100644 src/packages/divider/demos/h5/demo2.tsx
 create mode 100644 src/packages/divider/demos/h5/demo3.tsx
 create mode 100644 src/packages/divider/demos/h5/demo4.tsx
 create mode 100644 src/packages/divider/demos/h5/demo5.tsx
 create mode 100644 src/packages/divider/demos/h5/demo6.tsx
 create mode 100644 src/packages/divider/demos/taro/demo1.tsx
 create mode 100644 src/packages/divider/demos/taro/demo2.tsx
 create mode 100644 src/packages/divider/demos/taro/demo3.tsx
 create mode 100644 src/packages/divider/demos/taro/demo4.tsx
 create mode 100644 src/packages/divider/demos/taro/demo5.tsx
 create mode 100644 src/packages/divider/demos/taro/demo6.tsx

diff --git a/src/packages/divider/demo.taro.tsx b/src/packages/divider/demo.taro.tsx
index 53d22554e0..431c07204b 100644
--- a/src/packages/divider/demo.taro.tsx
+++ b/src/packages/divider/demo.taro.tsx
@@ -1,21 +1,17 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { Divider, Cell } from '@/packages/nutui.react.taro'
+import { Cell } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
 
-interface T {
-  basic: string
-  withText: string
-  contentPosition: string
-  dashed: string
-  customStyle: string
-  verticalDivider: string
-  text: string
-  link: string
-}
 const DividerDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       withText: '展示文本',
@@ -23,8 +19,6 @@ const DividerDemo = () => {
       dashed: '虚线',
       customStyle: '自定义样式',
       verticalDivider: '垂直分割线',
-      text: '文本',
-      link: '链接',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -33,8 +27,6 @@ const DividerDemo = () => {
       dashed: 'Dashed',
       customStyle: 'Custom Style',
       verticalDivider: 'Vertical Divider',
-      text: 'Text',
-      link: 'Link',
     },
   })
   return (
@@ -43,65 +35,25 @@ const DividerDemo = () => {
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
         <Cell>
-          <Divider />
+          <Demo1 />
         </Cell>
         <h2>{translated.withText}</h2>
         <Cell>
-          <Divider>{translated.text}</Divider>
+          <Demo2 />
         </Cell>
         <h2>{translated.contentPosition}</h2>
-        <Cell>
-          <Divider contentPosition="left">{translated.text}</Divider>
-        </Cell>
-        <Cell>
-          <Divider contentPosition="right">{translated.text}</Divider>
-        </Cell>
+        <Demo3 />
         <h2>{translated.dashed}</h2>
         <Cell>
-          <Divider
-            style={{
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo4 />
         </Cell>
         <h2>{translated.customStyle}</h2>
         <Cell>
-          <Divider
-            style={{
-              color: '#1989fa',
-              borderColor: '#1989fa',
-              padding: '0 16px',
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo5 />
         </Cell>
         <h2>{translated.verticalDivider}</h2>
         <Cell>
-          <div style={{ fontSize: '14px', color: '#909ca4' }}>
-            {translated.text}
-            <Divider direction="vertical" />
-            <span
-              onClick={() => {
-                Taro.navigateTo({ url: '/pages/index/index' })
-              }}
-              style={{ color: '#1989fa', display: 'inline-block' }}
-            >
-              {translated.link}
-            </span>
-            <Divider direction="vertical" />
-            <span
-              onClick={() => {
-                Taro.navigateTo({ url: '/pages/index/index' })
-              }}
-              style={{ color: '#1989fa', display: 'inline-block' }}
-            >
-              {translated.link}
-            </span>
-          </div>
+          <Demo6 />
         </Cell>
       </div>
     </>
diff --git a/src/packages/divider/demo.tsx b/src/packages/divider/demo.tsx
index b535a606b2..d3eaf752a6 100644
--- a/src/packages/divider/demo.tsx
+++ b/src/packages/divider/demo.tsx
@@ -1,20 +1,15 @@
 import React from 'react'
-import { Divider } from './divider'
 import { useTranslate } from '../../sites/assets/locale'
 import Cell from '@/packages/cell'
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
-interface T {
-  basic: string
-  withText: string
-  contentPosition: string
-  dashed: string
-  customStyle: string
-  verticalDivider: string
-  text: string
-  link: string
-}
 const DividerDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       withText: '展示文本',
@@ -22,8 +17,6 @@ const DividerDemo = () => {
       dashed: '虚线',
       customStyle: '自定义样式',
       verticalDivider: '垂直分割线',
-      text: '文本',
-      link: '链接',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -32,8 +25,6 @@ const DividerDemo = () => {
       dashed: 'Dashed',
       customStyle: 'Custom Style',
       verticalDivider: 'Vertical Divider',
-      text: 'Text',
-      link: 'Link',
     },
   })
   return (
@@ -41,59 +32,25 @@ const DividerDemo = () => {
       <div className="demo">
         <h2>{translated.basic}</h2>
         <Cell>
-          <Divider />
+          <Demo1 />
         </Cell>
-
         <h2>{translated.withText}</h2>
         <Cell>
-          <Divider>{translated.text}</Divider>
+          <Demo2 />
         </Cell>
-
         <h2>{translated.contentPosition}</h2>
-        <Cell>
-          <Divider contentPosition="left">{translated.text}</Divider>
-        </Cell>
-        <Cell>
-          <Divider contentPosition="right">{translated.text}</Divider>
-        </Cell>
+        <Demo3 />
         <h2>{translated.dashed}</h2>
         <Cell>
-          <Divider
-            style={{
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo4 />
         </Cell>
-
         <h2>{translated.customStyle}</h2>
         <Cell>
-          <Divider
-            style={{
-              color: '#1989fa',
-              borderColor: '#1989fa',
-              padding: '0 16px',
-              borderStyle: 'dashed',
-            }}
-          >
-            {translated.text}
-          </Divider>
+          <Demo5 />
         </Cell>
         <h2>{translated.verticalDivider}</h2>
         <Cell>
-          <div style={{ fontSize: '14px', color: '' }}>
-            {translated.text}
-
-            <Divider direction="vertical" />
-            <a href="#/Divider" style={{ color: '#4d88ff' }}>
-              {translated.link}
-            </a>
-            <Divider direction="vertical" />
-            <a href="#/Divider" style={{ color: '#4d88ff' }}>
-              {translated.link}
-            </a>
-          </div>
+          <Demo6 />
         </Cell>
       </div>
     </>
diff --git a/src/packages/divider/demos/h5/demo1.tsx b/src/packages/divider/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..0c5fcf3194
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Divider />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/divider/demos/h5/demo2.tsx b/src/packages/divider/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..373d52ff44
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo2.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Divider>文本</Divider>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/divider/demos/h5/demo3.tsx b/src/packages/divider/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..8b45e83d67
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo3.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Divider, Cell } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Cell>
+        <Divider contentPosition="left">文本</Divider>
+      </Cell>
+      <Cell>
+        <Divider contentPosition="right">文本</Divider>
+      </Cell>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/divider/demos/h5/demo4.tsx b/src/packages/divider/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..eb21f574d1
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo4.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/divider/demos/h5/demo5.tsx b/src/packages/divider/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..d6a5da72a8
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo5.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Divider
+        style={{
+          color: '#1989fa',
+          borderColor: '#1989fa',
+          padding: '0 16px',
+          borderStyle: 'dashed',
+        }}
+      >
+        文本
+      </Divider>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/divider/demos/h5/demo6.tsx b/src/packages/divider/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..ca5d62bda7
--- /dev/null
+++ b/src/packages/divider/demos/h5/demo6.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <div>
+        文本
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+      </div>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/divider/demos/taro/demo1.tsx b/src/packages/divider/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..1a11faf3d2
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo1.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Divider />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/divider/demos/taro/demo2.tsx b/src/packages/divider/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..bdf98f1178
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo2.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Divider>文本</Divider>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/divider/demos/taro/demo3.tsx b/src/packages/divider/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..be567fcece
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo3.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Divider, Cell } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Cell>
+        <Divider contentPosition="left">文本</Divider>
+      </Cell>
+      <Cell>
+        <Divider contentPosition="right">文本</Divider>
+      </Cell>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/divider/demos/taro/demo4.tsx b/src/packages/divider/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..24bc293180
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo4.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/divider/demos/taro/demo5.tsx b/src/packages/divider/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..440d0806e3
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo5.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Divider
+        style={{
+          color: '#1989fa',
+          borderColor: '#1989fa',
+          padding: '0 16px',
+          borderStyle: 'dashed',
+        }}
+      >
+        文本
+      </Divider>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/divider/demos/taro/demo6.tsx b/src/packages/divider/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..a56f734ebc
--- /dev/null
+++ b/src/packages/divider/demos/taro/demo6.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Divider } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  return (
+    <>
+      <div>
+        文本
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+        <Divider direction="vertical" />
+        <a href="#" style={{ color: '#1989fa' }}>
+          链接
+        </a>
+      </div>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/divider/doc.en-US.md b/src/packages/divider/doc.en-US.md
index bafa3bec9b..035623373d 100644
--- a/src/packages/divider/doc.en-US.md
+++ b/src/packages/divider/doc.en-US.md
@@ -18,19 +18,7 @@ Default render one horizontal divider line.
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider />
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -40,19 +28,7 @@ Insert text into divider with default slot.
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider>Text</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -62,20 +38,7 @@ Set Content Position with `contentPosition` attribute.
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider contentPosition="left">Text</Divider>
-      <Divider contentPosition="right">Text</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -83,19 +46,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ borderStyle: 'dashed'}}>Text</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -105,19 +56,7 @@ User can custom divider style with `style` attribute.
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-        <Divider style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px', borderStyle: 'dashed' }}>Text</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -125,25 +64,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-    <div>
-        文本
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>Link</a>
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>Link</a>
-    </div>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/divider/doc.md b/src/packages/divider/doc.md
index 2db3cb765d..33779041b1 100644
--- a/src/packages/divider/doc.md
+++ b/src/packages/divider/doc.md
@@ -18,19 +18,7 @@ import { Divider } from '@nutui/nutui-react';
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider />
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -40,19 +28,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -62,20 +38,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider contentPosition="left">文本</Divider>
-      <Divider contentPosition="right">文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -83,19 +46,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ borderStyle: 'dashed'}}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -105,19 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px', borderStyle: 'dashed' }}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -125,25 +64,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <div>
-          文本
-          <Divider direction="vertical" />
-          <a href="#" style={{ color: '#1989fa' }}>链接</a>
-          <Divider direction="vertical" />
-          <a href="#" style={{ color: '#1989fa' }}>链接</a>
-      </div>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/divider/doc.taro.md b/src/packages/divider/doc.taro.md
index 5bf8bc6aa7..1ea44688c1 100644
--- a/src/packages/divider/doc.taro.md
+++ b/src/packages/divider/doc.taro.md
@@ -18,19 +18,7 @@ import { Divider } from '@nutui/nutui-react-taro';
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <Divider />
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -40,19 +28,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <Divider>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -62,20 +38,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <Divider contentPosition="left">文本</Divider>
-      <Divider contentPosition="right">文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -83,19 +46,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ borderStyle: 'dashed'}}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -105,19 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px', borderStyle: 'dashed' }}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -125,25 +64,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-    <div>
-        文本
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>链接</a>
-        <Divider direction="vertical" />
-        <a href="#" style={{ color: '#1989fa' }}>链接</a>
-    </div>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/divider/doc.zh-TW.md b/src/packages/divider/doc.zh-TW.md
index 07cddb0890..06e7266bfa 100644
--- a/src/packages/divider/doc.zh-TW.md
+++ b/src/packages/divider/doc.zh-TW.md
@@ -18,19 +18,7 @@ import { Divider } from '@nutui/nutui-react';
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider />
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -40,19 +28,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -62,20 +38,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider contentPosition="left">文本</Divider>
-      <Divider contentPosition="right">文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -83,19 +46,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ borderStyle: 'dashed'}}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -105,19 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <Divider style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px', borderStyle: 'dashed' }}>文本</Divider>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -125,25 +64,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React from "react";
-import { Divider } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <div>
-          文本
-          <Divider direction="vertical" />
-          <a href="#" style={{ color: '#1989fa' }}>鏈接</a>
-          <Divider direction="vertical" />
-          <a href="#" style={{ color: '#1989fa' }}>鏈接</a>
-      </div>
-    </>
-  );
-};
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::