From 885ea2120b7a3843be2d4e4c073c55b455423d2e Mon Sep 17 00:00:00 2001
From: "Alex.huxiyang" <99181718+Alex-huxiyang@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:55:13 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20demo=E6=8B=86=E8=A7=A3=E4=B8=8E?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=20&=20=E4=BF=AE=E5=A4=8D=E8=84=9A=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8D=E5=90=8C=E6=93=8D=E4=BD=9C=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E7=9A=84=E6=AD=A3=E5=88=99=E5=8C=B9=E9=85=8D=E5=87=BA=E9=94=99?=
 =?UTF-8?q?=20(#2016)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/doc-demo-extract-replace.js      |   6 +-
 src/packages/layout/demo.taro.tsx        | 139 +-------------
 src/packages/layout/demo.tsx             | 140 +-------------
 src/packages/layout/demos/h5/demo1.tsx   |  71 +++++++
 src/packages/layout/demos/h5/demo2.tsx   |  44 +++++
 src/packages/layout/demos/h5/demo3.tsx   |  96 ++++++++++
 src/packages/layout/demos/taro/demo1.tsx |  71 +++++++
 src/packages/layout/demos/taro/demo2.tsx |  38 ++++
 src/packages/layout/demos/taro/demo3.tsx |  90 +++++++++
 src/packages/layout/doc.en-US.md         | 212 +--------------------
 src/packages/layout/doc.md               | 224 +----------------------
 src/packages/layout/doc.taro.md          | 212 +--------------------
 src/packages/layout/doc.zh-TW.md         | 212 +--------------------
 13 files changed, 447 insertions(+), 1108 deletions(-)
 create mode 100644 src/packages/layout/demos/h5/demo1.tsx
 create mode 100644 src/packages/layout/demos/h5/demo2.tsx
 create mode 100644 src/packages/layout/demos/h5/demo3.tsx
 create mode 100644 src/packages/layout/demos/taro/demo1.tsx
 create mode 100644 src/packages/layout/demos/taro/demo2.tsx
 create mode 100644 src/packages/layout/demos/taro/demo3.tsx

diff --git a/scripts/doc-demo-extract-replace.js b/scripts/doc-demo-extract-replace.js
index ba9d9d7688..ff5a5e78ae 100644
--- a/scripts/doc-demo-extract-replace.js
+++ b/scripts/doc-demo-extract-replace.js
@@ -12,7 +12,7 @@ const extractH5Demos = (i) => {
     __dirname,
     `../src/packages/${args[i]}/demos/h5`
   );
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
   let match;
   if (!fs.existsSync(outputDirectory)) {
     fs.mkdirSync(outputDirectory, { recursive: true });
@@ -49,7 +49,7 @@ const extractTaroDemos = (i) => {
     __dirname,
     `../src/packages/${args[i]}/demos/taro`
   );
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
   let match;
   if (!fs.existsSync(outputDirectory)) {
     fs.mkdirSync(outputDirectory, { recursive: true });
@@ -88,7 +88,7 @@ const replaceAllDocs = (i) => {
   filePaths.forEach((path, index) => {
     let markdownContent = fs.readFileSync(path, "utf-8");
 
-    const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+    const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
     const arr = markdownContent.match(tsxRegex);
     for (let i = 0; i < arr.length; i++) {
       markdownContent = markdownContent.replace(
diff --git a/src/packages/layout/demo.taro.tsx b/src/packages/layout/demo.taro.tsx
index 8978ebe435..531085f049 100644
--- a/src/packages/layout/demo.taro.tsx
+++ b/src/packages/layout/demo.taro.tsx
@@ -1,18 +1,14 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import { Row, Col } from '@/packages/nutui.react.taro'
 import '@/packages/layout/demo.scss'
 import Header from '@/sites/components/header'
-
-type TLayoutDemo = {
-  title1: string
-  title2: string
-  title3: string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
 
 const LayoutDemo = () => {
-  const [translated] = useTranslate<TLayoutDemo>({
+  const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础布局',
       title2: '分栏间隔',
@@ -40,136 +36,15 @@ const LayoutDemo = () => {
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}>
         <h2>{translated.title1}</h2>
         <div className="box-item">
-          <Row>
-            <Col span="24">
-              <div className="layout-flex-content">span:24</div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="12">
-              <div className="layout-flex-content">span:12</div>
-            </Col>
-            <Col span="12">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:12
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:8
-              </div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-          </Row>
+          <Demo1 />
         </div>
         <h2>{translated.title2}</h2>
         <div className="box-item">
-          <Row gutter="10">
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:8
-              </div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-          </Row>
+          <Demo2 />
         </div>
         <h2>{translated.title3}</h2>
         <div className="box-item">
-          <Row type="flex" wrap="nowrap">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="center">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="end">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="space-between">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="space-around">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
+          <Demo3 />
         </div>
       </div>
     </>
diff --git a/src/packages/layout/demo.tsx b/src/packages/layout/demo.tsx
index 731407edab..2f40ff0820 100644
--- a/src/packages/layout/demo.tsx
+++ b/src/packages/layout/demo.tsx
@@ -1,17 +1,12 @@
 import React from 'react'
-import Row from '@/packages/row'
-import Col from '@/packages/col'
 import { useTranslate } from '../../sites/assets/locale'
 import './demo.scss'
-
-type TLayoutDemo = {
-  title1: string
-  title2: string
-  title3: string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
 
 const LayoutDemo = () => {
-  const [translated] = useTranslate<TLayoutDemo>({
+  const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础布局',
       title2: '分栏间隔',
@@ -38,136 +33,15 @@ const LayoutDemo = () => {
       <div className="demo full">
         <h2>{translated.title1}</h2>
         <div className="layout-box-item">
-          <Row>
-            <Col span="24">
-              <div className="layout-flex-content">span:24</div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="12">
-              <div className="layout-flex-content">span:12</div>
-            </Col>
-            <Col span="12">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:12
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:8
-              </div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-          </Row>
+          <Demo1 />
         </div>
         <h2>{translated.title2}</h2>
         <div className="layout-box-item">
-          <Row gutter="10">
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:8
-              </div>
-            </Col>
-            <Col span="8">
-              <div className="layout-flex-content">span:8</div>
-            </Col>
-          </Row>
+          <Demo2 />
         </div>
         <h2>{translated.title3}</h2>
         <div className="layout-box-item">
-          <Row type="flex" wrap="nowrap">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="center">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="end">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="space-between">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
-          <Row type="flex" justify="space-around">
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content layout-flex-content-light">
-                span:6
-              </div>
-            </Col>
-            <Col span="6">
-              <div className="layout-flex-content">span:6</div>
-            </Col>
-          </Row>
+          <Demo3 />
         </div>
       </div>
     </>
diff --git a/src/packages/layout/demos/h5/demo1.tsx b/src/packages/layout/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..e736fc2acb
--- /dev/null
+++ b/src/packages/layout/demos/h5/demo1.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(--row-content-light-bg-color,#ffc7c4);
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row>
+        <Col span="24">
+          <div className="layout-flex-content">span:24</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="12">
+          <div className="layout-flex-content">span:12</div>
+        </Col>
+        <Col span="12">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:12
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:8
+          </div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/layout/demos/h5/demo2.tsx b/src/packages/layout/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..62cd02dda3
--- /dev/null
+++ b/src/packages/layout/demos/h5/demo2.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(
+      --nutui-row-content-background-color,
+      var(--row-content-bg-color, #ff8881)
+    );
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(
+  --row-content-light-bg-color,
+  #ffc7c4
+);
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row gutter="10">
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:8
+          </div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/layout/demos/h5/demo3.tsx b/src/packages/layout/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..476032367c
--- /dev/null
+++ b/src/packages/layout/demos/h5/demo3.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(
+      --nutui-row-content-background-color,
+      var(--row-content-bg-color, #ff8881)
+    );
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(
+      --row-content-light-bg-color,
+      #ffc7c4
+    );
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row type="flex" wrap="nowrap">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="center">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="end">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="space-between">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="space-around">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/layout/demos/taro/demo1.tsx b/src/packages/layout/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..45e32d5bf9
--- /dev/null
+++ b/src/packages/layout/demos/taro/demo1.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(--row-content-light-bg-color,#ffc7c4);
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row>
+        <Col span="24">
+          <div className="layout-flex-content">span:24</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="12">
+          <div className="layout-flex-content">span:12</div>
+        </Col>
+        <Col span="12">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:12
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:8
+          </div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/layout/demos/taro/demo2.tsx b/src/packages/layout/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..58b19b4be5
--- /dev/null
+++ b/src/packages/layout/demos/taro/demo2.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(--row-content-light-bg-color,#ffc7c4);
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row gutter="10">
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:8
+          </div>
+        </Col>
+        <Col span="8">
+          <div className="layout-flex-content">span:8</div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/layout/demos/taro/demo3.tsx b/src/packages/layout/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..7c7e6a32e4
--- /dev/null
+++ b/src/packages/layout/demos/taro/demo3.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import { Row, Col } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  const style = `
+    .layout-flex-content {
+      line-height: var(--nutui-row-content-line-height, 40px);
+      color: var(--nutui-row-content-color, #fff);
+      text-align: center;
+      border-radius: var(--nutui-row-content-border-radius, 6px);
+      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
+      font-size: 14px;
+    }
+
+    .layout-flex-content-light {
+      background: var(--row-content-light-bg-color,#ffc7c4);
+    }
+  `
+  return (
+    <>
+      <style>{style}</style>
+      <Row type="flex" wrap="nowrap">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="center">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="end">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="space-between">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+      <Row type="flex" justify="space-around">
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div className="layout-flex-content">span:6</div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/layout/doc.en-US.md b/src/packages/layout/doc.en-US.md
index edb621a0c5..2e1cea6e7e 100644
--- a/src/packages/layout/doc.en-US.md
+++ b/src/packages/layout/doc.en-US.md
@@ -16,225 +16,23 @@ import { Row, Col } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React from "react";
-import { Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
-
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row>
-        <Col span="24">
-          <div className="layout-flex-content">span:24</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="12">
-          <div className="layout-flex-content">span:12</div>
-        </Col>
-        <Col span="12">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:12
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### Column interval
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row gutter="10">
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### Flex layout
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row type="flex" wrap="nowrap">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="center">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="end">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-between">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-around">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-    </>
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/layout/doc.md b/src/packages/layout/doc.md
index 4501d823a5..c80b74d0d2 100644
--- a/src/packages/layout/doc.md
+++ b/src/packages/layout/doc.md
@@ -16,237 +16,23 @@ import { Row, Col } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React from "react";
-import { Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
-
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row>
-        <Col span="24">
-          <div className="layout-flex-content">span:24</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="12">
-          <div className="layout-flex-content">span:12</div>
-        </Col>
-        <Col span="12">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:12
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### 分栏间隔
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(
-  --nutui-row-content-background-color,
-  var(--row-content-bg-color, #ff8881)
-);
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(
-  --row-content-light-bg-color,
-  #ffc7c4
-);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row gutter="10">
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### Flex布局
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(
-  --nutui-row-content-background-color,
-  var(--row-content-bg-color, #ff8881)
-);
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(
-  --row-content-light-bg-color,
-  #ffc7c4
-);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row type="flex" wrap="nowrap">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="center">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="end">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-between">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-around">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-    </>
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/layout/doc.taro.md b/src/packages/layout/doc.taro.md
index 3f82aa6afa..e461df08ab 100644
--- a/src/packages/layout/doc.taro.md
+++ b/src/packages/layout/doc.taro.md
@@ -16,225 +16,23 @@ import { Row, Col } from '@nutui/nutui-react-taro'
 
 :::demo
 
-```tsx
-import React from "react";
-import { Row, Col } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
-
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row>
-        <Col span="24">
-          <div className="layout-flex-content">span:24</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="12">
-          <div className="layout-flex-content">span:12</div>
-        </Col>
-        <Col span="12">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:12
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### 分栏间隔
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row gutter="10">
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### Flex布局
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row type="flex" wrap="nowrap">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="center">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="end">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-between">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-around">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-    </>
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/layout/doc.zh-TW.md b/src/packages/layout/doc.zh-TW.md
index c625c3500e..9989b8fd0e 100644
--- a/src/packages/layout/doc.zh-TW.md
+++ b/src/packages/layout/doc.zh-TW.md
@@ -16,225 +16,23 @@ import { Row, Col } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React from "react";
-import { Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
-
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row>
-        <Col span="24">
-          <div className="layout-flex-content">span:24</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="12">
-          <div className="layout-flex-content">span:12</div>
-        </Col>
-        <Col span="12">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:12
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### 分欄間隔
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row gutter="10">
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:8
-          </div>
-        </Col>
-        <Col span="8">
-          <div className="layout-flex-content">span:8</div>
-        </Col>
-      </Row>
-    </>
-  )
-};
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
-:::demo
-
 ### Flex佈局
 
-```tsx
-import React from "react";
-import { Layout, Row, Col } from '@nutui/nutui-react';
-
-const App = () => {
-  const style = `
-    .layout-flex-content {
-      line-height: var(--nutui-row-content-line-height, 40px);
-      color: var(--nutui-row-content-color, #fff);
-      text-align: center;
-      border-radius: var(--nutui-row-content-border-radius, 6px);
-      background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
-      font-size: 14px;
-    }
+:::demo
 
-    .layout-flex-content-light {
-      background: var(--row-content-light-bg-color,#ffc7c4);
-    }
-  `
-  return (
-    <>
-      <style>{style}</style>
-      <Row type="flex" wrap="nowrap">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="center">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="end">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-between">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-      <Row type="flex" justify="space-around">
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content layout-flex-content-light">
-            span:6
-          </div>
-        </Col>
-        <Col span="6">
-          <div className="layout-flex-content">span:6</div>
-        </Col>
-      </Row>
-    </>
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::