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

---
 src/packages/pagination/demo.taro.tsx        |  99 ++----------
 src/packages/pagination/demo.tsx             |  98 ++----------
 src/packages/pagination/demos/h5/demo1.tsx   |  19 +++
 src/packages/pagination/demos/h5/demo2.tsx   |  20 +++
 src/packages/pagination/demos/h5/demo3.tsx   |  20 +++
 src/packages/pagination/demos/h5/demo4.tsx   |  20 +++
 src/packages/pagination/demos/h5/demo5.tsx   |  26 ++++
 src/packages/pagination/demos/h5/demo6.tsx   |  18 +++
 src/packages/pagination/demos/taro/demo1.tsx |  19 +++
 src/packages/pagination/demos/taro/demo2.tsx |  20 +++
 src/packages/pagination/demos/taro/demo3.tsx |  20 +++
 src/packages/pagination/demos/taro/demo4.tsx |  20 +++
 src/packages/pagination/demos/taro/demo5.tsx |  26 ++++
 src/packages/pagination/demos/taro/demo6.tsx |  18 +++
 src/packages/pagination/doc.en-US.md         | 141 +----------------
 src/packages/pagination/doc.md               | 151 ++----------------
 src/packages/pagination/doc.taro.md          | 152 ++----------------
 src/packages/pagination/doc.zh-TW.md         | 155 ++-----------------
 18 files changed, 314 insertions(+), 728 deletions(-)
 create mode 100644 src/packages/pagination/demos/h5/demo1.tsx
 create mode 100644 src/packages/pagination/demos/h5/demo2.tsx
 create mode 100644 src/packages/pagination/demos/h5/demo3.tsx
 create mode 100644 src/packages/pagination/demos/h5/demo4.tsx
 create mode 100644 src/packages/pagination/demos/h5/demo5.tsx
 create mode 100644 src/packages/pagination/demos/h5/demo6.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo1.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo2.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo3.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo4.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo5.tsx
 create mode 100644 src/packages/pagination/demos/taro/demo6.tsx

diff --git a/src/packages/pagination/demo.taro.tsx b/src/packages/pagination/demo.taro.tsx
index 656bd367bc..03a2eb62b4 100644
--- a/src/packages/pagination/demo.taro.tsx
+++ b/src/packages/pagination/demo.taro.tsx
@@ -1,21 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro'
-import { Pagination, 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'
-
-interface T {
-  basic: string
-  simple: string
-  lite: string
-  ellipse: string
-  custom: string
-  uncontrolled: string
-}
+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'
 
 const PaginationDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       simple: '简单模式',
@@ -41,97 +37,34 @@ const PaginationDemo = () => {
       uncontrolled: 'Uncontrolled mode',
     },
   })
-  const [currentPage1, setCurrent1] = useState(1)
-  const [currentPage2, setCurrent2] = useState(1)
-  const [currentPage3, setCurrent3] = useState(1)
-  const [currentPage4, setCurrent4] = useState(3)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrent1(c)
-  }
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrent2(c)
-  }
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrent3(c)
-  }
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrent4(c)
-  }
-  const itemRender = (item: any) => {
-    return <div>{item.number === 3 ? 'hot' : item.text}</div>
-  }
-  const pageChange5 = (v: number) => {
-    const c = v
-    setCurrent3(c)
-  }
+
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
         <Cell>
-          <Pagination
-            value={currentPage1}
-            total={20}
-            pageSize={5}
-            onChange={pageChange1}
-          />
+          <Demo1 />
         </Cell>
         <h2>{translated.simple}</h2>
         <Cell>
-          <Pagination
-            value={currentPage2}
-            total={12}
-            pageSize={1}
-            mode="simple"
-            onChange={pageChange2}
-          />
+          <Demo2 />
         </Cell>
         <h2>{translated.lite}</h2>
         <Cell>
-          <Pagination
-            value={currentPage2}
-            total={12}
-            pageSize={1}
-            mode="lite"
-            onChange={pageChange2}
-          />
+          <Demo3 />
         </Cell>
         <h2>{translated.ellipse}</h2>
         <Cell>
-          <Pagination
-            value={currentPage3}
-            total={125}
-            itemSize={2}
-            ellipse
-            onChange={pageChange3}
-          />
+          <Demo4 />
         </Cell>
         <h2>{translated.custom}</h2>
         <Cell>
-          <Pagination
-            value={currentPage4}
-            total={500}
-            itemSize={5}
-            onChange={pageChange4}
-            prev={<ArrowLeft />}
-            next={<ArrowRight />}
-            itemRender={itemRender}
-          />
+          <Demo5 />
         </Cell>
         <h2>{translated.uncontrolled}</h2>
         <Cell>
-          <Pagination
-            defaultValue={15}
-            total={500}
-            pageSize={10}
-            itemSize={3}
-            onChange={pageChange5}
-          />
+          <Demo6 />
         </Cell>
       </div>
     </>
diff --git a/src/packages/pagination/demo.tsx b/src/packages/pagination/demo.tsx
index a2a063148a..3b1c97e3b1 100644
--- a/src/packages/pagination/demo.tsx
+++ b/src/packages/pagination/demo.tsx
@@ -1,20 +1,15 @@
-import React, { useState } from 'react'
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react'
-import Pagination from '@/packages/pagination'
+import React from 'react'
 import Cell from '@/packages/cell'
 import { useTranslate } from '../../sites/assets/locale'
-
-interface T {
-  basic: string
-  simple: string
-  lite: string
-  ellipse: string
-  custom: string
-  uncontrolled: string
-}
+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'
 
 const PaginationDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       simple: '简单模式',
@@ -40,95 +35,32 @@ const PaginationDemo = () => {
       uncontrolled: 'Uncontrolled mode',
     },
   })
-  const [currentPage1, setCurrent1] = useState(1)
-  const [currentPage2, setCurrent2] = useState(1)
-  const [currentPage3, setCurrent3] = useState(1)
-  const [currentPage4, setCurrent4] = useState(3)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrent1(c)
-  }
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrent2(c)
-  }
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrent3(c)
-  }
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrent4(c)
-  }
-  const itemRender = (item: any) => {
-    return <div>{item.number === 3 ? 'hot' : item.text}</div>
-  }
-  const pageChange5 = (v: number) => {
-    const c = v
-    setCurrent3(c)
-  }
+
   return (
     <div className="demo">
       <h2>{translated.basic}</h2>
       <Cell>
-        <Pagination
-          value={currentPage1}
-          total={20}
-          pageSize={5}
-          onChange={pageChange1}
-        />
+        <Demo1 />
       </Cell>
       <h2>{translated.simple}</h2>
       <Cell>
-        <Pagination
-          value={currentPage2}
-          total={12}
-          pageSize={1}
-          mode="simple"
-          onChange={pageChange2}
-        />
+        <Demo2 />
       </Cell>
       <h2>{translated.lite}</h2>
       <Cell>
-        <Pagination
-          value={currentPage2}
-          total={12}
-          pageSize={1}
-          mode="lite"
-          onChange={pageChange2}
-        />
+        <Demo3 />
       </Cell>
       <h2>{translated.ellipse}</h2>
       <Cell>
-        <Pagination
-          value={currentPage3}
-          total={125}
-          itemSize={2}
-          ellipse
-          onChange={pageChange3}
-        />
+        <Demo4 />
       </Cell>
       <h2>{translated.custom}</h2>
       <Cell>
-        <Pagination
-          value={currentPage4}
-          total={500}
-          itemSize={5}
-          onChange={pageChange4}
-          prev={<ArrowLeft />}
-          next={<ArrowRight />}
-          itemRender={itemRender}
-        />
+        <Demo5 />
       </Cell>
       <h2>{translated.uncontrolled}</h2>
       <Cell>
-        <Pagination
-          defaultValue={15}
-          total={500}
-          pageSize={10}
-          itemSize={3}
-          onChange={pageChange5}
-        />
+        <Demo6 />
       </Cell>
     </div>
   )
diff --git a/src/packages/pagination/demos/h5/demo1.tsx b/src/packages/pagination/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..50d2ba574d
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo1.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  const [currentPage1, setCurrentPage1] = useState(1)
+  const pageChange1 = (v: number) => {
+    const c = v
+    setCurrentPage1(c)
+  }
+  return (
+    <Pagination
+      value={currentPage1}
+      total={20}
+      pageSize={5}
+      onChange={pageChange1}
+    />
+  )
+}
+export default Demo1
diff --git a/src/packages/pagination/demos/h5/demo2.tsx b/src/packages/pagination/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..34da04cdc2
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo2.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="simple"
+      onChange={pageChange2}
+    />
+  )
+}
+export default Demo2
diff --git a/src/packages/pagination/demos/h5/demo3.tsx b/src/packages/pagination/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..e60bd95940
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo3.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite"
+      onChange={pageChange2}
+    />
+  )
+}
+export default Demo3
diff --git a/src/packages/pagination/demos/h5/demo4.tsx b/src/packages/pagination/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..e0e083bc2e
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo4.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  const [currentPage3, setCurrentPage3] = useState(1)
+  const pageChange3 = (v: number) => {
+    const c = v
+    setCurrentPage3(c)
+  }
+  return (
+    <Pagination
+      value={currentPage3}
+      total={125}
+      itemSize={2}
+      ellipse
+      onChange={pageChange3}
+    />
+  )
+}
+export default Demo4
diff --git a/src/packages/pagination/demos/h5/demo5.tsx b/src/packages/pagination/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..537621df4d
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo5.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react'
+import { ArrowLeft, ArrowRight } from '@nutui/icons-react'
+
+const Demo5 = () => {
+  const [currentPage4, setCurrentPage4] = useState(1)
+  const pageChange4 = (v: number) => {
+    const c = v
+    setCurrentPage4(c)
+  }
+  const itemRender = (page: any) => {
+    return <div>{page.number === 3 ? 'hot' : page.text}</div>
+  }
+  return (
+    <Pagination
+      value={currentPage4}
+      total={500}
+      itemSize={5}
+      onChange={pageChange4}
+      itemRender={itemRender}
+      prev={<ArrowLeft />}
+      next={<ArrowRight />}
+    />
+  )
+}
+export default Demo5
diff --git a/src/packages/pagination/demos/h5/demo6.tsx b/src/packages/pagination/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..e7146b1b45
--- /dev/null
+++ b/src/packages/pagination/demos/h5/demo6.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Pagination } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  const pageChange5 = (v: number) => {
+    console.log(v)
+  }
+  return (
+    <Pagination
+      defaultValue={15}
+      total={500}
+      pageSize={10}
+      itemSize={3}
+      onChange={pageChange5}
+    />
+  )
+}
+export default Demo6
diff --git a/src/packages/pagination/demos/taro/demo1.tsx b/src/packages/pagination/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..3029ace4bb
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo1.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  const [currentPage1, setCurrentPage1] = useState(1)
+  const pageChange1 = (v: number) => {
+    const c = v
+    setCurrentPage1(c)
+  }
+  return (
+    <Pagination
+      value={currentPage1}
+      total={20}
+      pageSize={5}
+      onChange={pageChange1}
+    />
+  )
+}
+export default Demo1
diff --git a/src/packages/pagination/demos/taro/demo2.tsx b/src/packages/pagination/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..ad38219e3f
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo2.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="simple"
+      onChange={pageChange2}
+    />
+  )
+}
+export default Demo2
diff --git a/src/packages/pagination/demos/taro/demo3.tsx b/src/packages/pagination/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..2404d3dcd8
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo3.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite"
+      onChange={pageChange2}
+    />
+  )
+}
+export default Demo3
diff --git a/src/packages/pagination/demos/taro/demo4.tsx b/src/packages/pagination/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..f77936be56
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo4.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  const [currentPage3, setCurrentPage3] = useState(1)
+  const pageChange3 = (v: number) => {
+    const c = v
+    setCurrentPage3(c)
+  }
+  return (
+    <Pagination
+      value={currentPage3}
+      total={125}
+      itemSize={2}
+      ellipse
+      onChange={pageChange3}
+    />
+  )
+}
+export default Demo4
diff --git a/src/packages/pagination/demos/taro/demo5.tsx b/src/packages/pagination/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..16ff988d99
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo5.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro'
+
+const Demo5 = () => {
+  const [currentPage4, setCurrentPage4] = useState(1)
+  const pageChange4 = (v: number) => {
+    const c = v
+    setCurrentPage4(c)
+  }
+  const itemRender = (page: any) => {
+    return <div>{page.number === 3 ? 'hot' : page.text}</div>
+  }
+  return (
+    <Pagination
+      value={currentPage4}
+      total={500}
+      itemSize={5}
+      onChange={pageChange4}
+      itemRender={itemRender}
+      prev={<ArrowLeft />}
+      next={<ArrowRight />}
+    />
+  )
+}
+export default Demo5
diff --git a/src/packages/pagination/demos/taro/demo6.tsx b/src/packages/pagination/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..3666f77e43
--- /dev/null
+++ b/src/packages/pagination/demos/taro/demo6.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Pagination } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  const pageChange5 = (v: number) => {
+    console.log(v)
+  }
+  return (
+    <Pagination
+      defaultValue={15}
+      total={500}
+      pageSize={10}
+      itemSize={3}
+      onChange={pageChange5}
+    />
+  )
+}
+export default Demo6
diff --git a/src/packages/pagination/doc.en-US.md b/src/packages/pagination/doc.en-US.md
index 9f0398ef2d..1d64a9acfb 100644
--- a/src/packages/pagination/doc.en-US.md
+++ b/src/packages/pagination/doc.en-US.md
@@ -18,27 +18,7 @@ When the current page number is bound by `value`, the component is in a controll
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage1, setCurrentPage1] = useState(1)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrentPage1(c)
-  }
-  return (
-    <Pagination
-      value={currentPage1}
-      total={25}
-      pageSize={5}
-      onChange={pageChange1}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -48,28 +28,7 @@ Pagination can be switched to simple mode with simple mode attribute, and pagina
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2} 
-      total={12}
-      pageSize={1}
-      mode="simple" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -79,28 +38,7 @@ Pagination can be switched to lite mode with lite mode attribute, and you can us
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="lite" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -110,28 +48,7 @@ The ellipses button will display after with force-ellipses attribute, click it c
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage3, setCurrentPage3] = useState(1)
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrentPage3(c)
-  }
-  return (
-    <Pagination
-      value={currentPage3}
-      total={125}
-      itemSize={2}
-      ellipse
-      onChange={pageChange3}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -141,34 +58,7 @@ Pass in a custom method through itemRender, parameters: `{ number: "page number"
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination} from '@nutui/nutui-react'; 
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react';
-
-const App = () => {
-  const [currentPage4, setCurrentPage4] = useState(1)
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrentPage4(c)
-  }
-  const itemRender = (page: any) => {
-    return <div>{page.number === 3 ? 'hot' : page.text}</div>
-  }
-  return (
-    <Pagination
-      value={currentPage4}
-      total={500}
-      itemSize={5}
-      onChange={pageChange4}
-      itemRender={itemRender} 
-      prev={<ArrowLeft />}
-      next={<ArrowRight />}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -176,26 +66,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react'; 
-
-const App = () => {
-  const pageChange5 = (v: number) => {
-    console.log(v)
-  }
-  return (
-    <Pagination
-      defaultValue={15}
-      total={500}
-      pageSize={10}
-      itemSize={3}
-      onChange={pageChange5}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/pagination/doc.md b/src/packages/pagination/doc.md
index a0ff38c462..6f945a8eec 100644
--- a/src/packages/pagination/doc.md
+++ b/src/packages/pagination/doc.md
@@ -14,63 +14,21 @@ import { Pagination } from '@nutui/nutui-react';
 
 ### 基础用法
 
-通过 value 来绑定当前页码时，组件为受控状态，分页显示取决于传入的 value ，一般搭配 onChange 使用。 不需要受控时，可通过 defaultValue 指定当前页码 
+通过 value 来绑定当前页码时，组件为受控状态，分页显示取决于传入的 value ，一般搭配 onChange 使用。 不需要受控时，可通过 defaultValue 指定当前页码
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage1, setCurrentPage1] = useState(1)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrentPage1(c)
-  }
-  return (
-    <Pagination
-      value={currentPage1}
-      total={25}
-      pageSize={5}
-      onChange={pageChange1}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
 ### 简单模式
 
-将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。 
-
+将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="simple" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -78,62 +36,19 @@ export default App;
 
 将 mode 设置为 "lite" 来切换到极简模式，可用于主图切换。
 
-
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="lite" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
 ### 显示省略号
 
-设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。 
+设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage3, setCurrentPage3] = useState(1)
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrentPage3(c)
-  }
-  return (
-    <Pagination
-      value={currentPage3}
-      total={125}
-      itemSize={2}
-      ellipse
-      onChange={pageChange3}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -143,34 +58,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination} from '@nutui/nutui-react'; 
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react';
-
-const App = () => {
-  const [currentPage4, setCurrentPage4] = useState(1)
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrentPage4(c)
-  }
-  const itemRender = (page: any) => {
-    return <div>{page.number === 3 ? 'hot' : page.text}</div>
-  }
-  return (
-    <Pagination
-      value={currentPage4}
-      total={500}
-      itemSize={5}
-      onChange={pageChange4}
-      itemRender={itemRender} 
-      prev={<ArrowLeft />}
-      next={<ArrowRight />}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -178,26 +66,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react'; 
-
-const App = () => {
-  const pageChange5 = (v: number) => {
-    console.log(v)
-  }
-  return (
-    <Pagination
-      defaultValue={15}
-      total={500}
-      pageSize={10}
-      itemSize={3}
-      onChange={pageChange5}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -240,4 +109,4 @@ export default App;
 | \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
 | \--nutui-pagination-lite-radius| lite模式下的圆角 | `12px` |
 | \--nutui-pagination-lite-background-color | lite模式下的默认背景色 | `var(--nutui-black-7)` |
-| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
\ No newline at end of file
+| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/doc.taro.md b/src/packages/pagination/doc.taro.md
index 4c7ebe5609..cf48f7f2f3 100644
--- a/src/packages/pagination/doc.taro.md
+++ b/src/packages/pagination/doc.taro.md
@@ -14,127 +14,41 @@ import { Pagination } from '@nutui/nutui-react-taro';
 
 ### 基础用法
 
-通过 value 来绑定当前页码时，组件为受控状态，分页显示取决于传入的 value，一般搭配 onChange 使用。 不需要受控时，可通过 defaultValue 指定当前页码 
+通过 value 来绑定当前页码时，组件为受控状态，分页显示取决于传入的 value，一般搭配 onChange 使用。 不需要受控时，可通过 defaultValue 指定当前页码
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [currentPage1, setCurrentPage1] = useState(1)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrentPage1(c)
-  }
-  return (
-    <Pagination
-      value={currentPage1}
-      total={25}
-      pageSize={5}
-      onChange={pageChange1}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
 ### 简单模式
 
-将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。 
+将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="simple" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
 
 :::
 
-
 ### 极简模式
 
 将 mode 设置为 "lite" 来切换到极简模式，可用于主图切换。
 
-
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="lite" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
 
 :::
 
-
 ### 显示省略号
 
-设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。 
+设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [currentPage3, setCurrentPage3] = useState(1)
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrentPage3(c)
-  }
-  return (
-    <Pagination
-      value={currentPage3}
-      total={125}
-      itemSize={2}
-      ellipse
-      onChange={pageChange3}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -144,34 +58,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination} from '@nutui/nutui-react-taro'; 
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro';
-
-const App = () => {
-  const [currentPage4, setCurrentPage4] = useState(1)
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrentPage4(c)
-  }
-  const itemRender = (page: any) => {
-    return <div>{page.number === 3 ? 'hot' : page.text}</div>
-  }
-  return (
-    <Pagination
-      value={currentPage4}
-      total={500}
-      itemSize={5}
-      onChange={pageChange4}
-      itemRender={itemRender} 
-      prev={<ArrowLeft />}
-      next={<ArrowRight />}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -179,26 +66,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react-taro'; 
-
-const App = () => {
-  const pageChange5 = (v: number) => {
-    console.log(v)
-  }
-  return (
-    <Pagination
-      defaultValue={15}
-      total={500}
-      pageSize={10}
-      itemSize={3}
-      onChange={pageChange5}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -241,4 +109,4 @@ export default App;
 | \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
 | \--nutui-pagination-lite-radius| lite模式下的圆角 | `12px` |
 | \--nutui-pagination-lite-background-color | lite模式下的默认背景色 | `var(--nutui-black-7)` |
-| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
\ No newline at end of file
+| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/doc.zh-TW.md b/src/packages/pagination/doc.zh-TW.md
index 5345cda2c3..817e1b9b66 100644
--- a/src/packages/pagination/doc.zh-TW.md
+++ b/src/packages/pagination/doc.zh-TW.md
@@ -14,165 +14,51 @@ import { Pagination } from '@nutui/nutui-react';
 
 ### 基礎用法
 
-通過 value 來綁定當前頁碼時，組件為受控狀態，分頁顯示取決於傳入的 value ，一般搭配 onChange 使用。 不需要受控時，可通過 defaultValue 指定當前頁碼 
+通過 value 來綁定當前頁碼時，組件為受控狀態，分頁顯示取決於傳入的 value ，一般搭配 onChange 使用。 不需要受控時，可通過 defaultValue 指定當前頁碼
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage1, setCurrentPage1] = useState(1)
-  const pageChange1 = (v: number) => {
-    const c = v
-    setCurrentPage1(c)
-  }
-  return (
-    <Pagination
-      value={currentPage1}
-      total={25}
-      pageSize={5}
-      onChange={pageChange1}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
 ### 簡單模式
 
-將 mode 設置為 "simple" 來切換到簡單模式，此時分頁器不會展示具體的頁碼按鈕。 
-
+將 mode 設置為 "simple" 來切換到簡單模式，此時分頁器不會展示具體的頁碼按鈕。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="simple" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
-
 ### 極簡模式
 
 將 mode 設置為 "lite" 來切換到極簡模式，可用於主圖切換。
 
-
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage2, setCurrentPage2] = useState(1)
-  const pageChange2 = (v: number) => {
-    const c = v
-    setCurrentPage2(c)
-  }
-  return (
-    <Pagination
-      value={currentPage2}
-      total={12}
-      pageSize={1}
-      mode="lite" 
-      onChange={pageChange2} 
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
-
 ### 顯示省略號
 
-設置 force-ellipses 後會展示省略號按鈕，點擊後可以快速跳轉。 
+設置 force-ellipses 後會展示省略號按鈕，點擊後可以快速跳轉。
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react';
-
-const App = () => {
-  const [currentPage3, setCurrentPage3] = useState(1)
-  const pageChange3 = (v: number) => {
-    const c = v
-    setCurrentPage3(c)
-  }
-  return (
-    <Pagination
-      value={currentPage3}
-      total={125}
-      itemSize={2}
-      ellipse
-      onChange={pageChange3}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
 ### 自定義按鈕
 
-通過itemRender傳入自定義方法，入參數為page:{ number:頁數, text:"文本", active:"選中狀態" } 
+通過itemRender傳入自定義方法，入參數為page:{ number:頁數, text:"文本", active:"選中狀態" }
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination} from '@nutui/nutui-react'; 
-import { ArrowLeft, ArrowRight } from '@nutui/icons-react';
-
-const App = () => {
-  const [currentPage4, setCurrentPage4] = useState(1)
-  const pageChange4 = (v: number) => {
-    const c = v
-    setCurrentPage4(c)
-  }
-  const itemRender = (page: any) => {
-    return <div>{page.number === 3 ? 'hot' : page.text}</div>
-  }
-  return (
-    <Pagination
-      value={currentPage4}
-      total={500}
-      itemSize={5}
-      onChange={pageChange4}
-      itemRender={itemRender} 
-      prev={<ArrowLeft />}
-      next={<ArrowRight />}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -180,26 +66,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React, { useState } from 'react'
-import { Pagination } from '@nutui/nutui-react'; 
-
-const App = () => {
-  const pageChange5 = (v: number) => {
-    console.log(v)
-  }
-  return (
-    <Pagination
-      defaultValue={15}
-      total={500}
-      pageSize={10}
-      itemSize={3}
-      onChange={pageChange5}
-    />
-  )
-}
-export default App;
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -242,4 +109,4 @@ export default App;
 | \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
 | \--nutui-pagination-lite-radius| lite模式下的圓角 | `12px` |
 | \--nutui-pagination-lite-background-color | lite模式下的默認背景色 | `var(--nutui-black-7)` |
-| \--nutui-pagination-lite-active-background-color | lite模式下的當前選中的背景色 | `var(--nutui-black-5)` |
\ No newline at end of file
+| \--nutui-pagination-lite-active-background-color | lite模式下的當前選中的背景色 | `var(--nutui-black-5)` |