docs(grid): 文档可读性优化 (#1903)

jdf2e · Jan 25, 2024 · 4e82bcf · 4e82bcf
1 parent f97ecdf
commit 4e82bcf
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 116 deletions.
diff --git a/src/packages/grid/demo.taro.tsx b/src/packages/grid/demo.taro.tsx
@@ -17,6 +17,7 @@ interface T {
   iconStyle: string
   customContent: string
   event: string
+  clicked: (text: string, index: number) => string
 }
 const GridDemo = () => {
   const [translated] = useTranslate<T>({
@@ -32,6 +33,9 @@ const GridDemo = () => {
       iconStyle: '图标颜色/大小',
       customContent: '自定义内容',
       event: '点击子项事件',
+      clicked: (text, index) => {
+        return `点击了${text}，第${index}个`
+      },
     },
     'zh-TW': {
       basic: '基础用法',
@@ -45,6 +49,9 @@ const GridDemo = () => {
       iconStyle: '圖標顏色/大小',
       customContent: '自定義內容',
       event: '點擊子項事件',
+      clicked: (text, index) => {
+        return `点击了${text}，第${index}个`
+      },
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -58,13 +65,17 @@ const GridDemo = () => {
       iconStyle: 'Icon Style',
       customContent: 'Custom Content',
       event: 'Grid Item Click',
+      clicked: (text, index) => {
+        return `clicked ${text}, index ${index}`
+      },
     },
   })
 
   const onClick = (item: any, index: number) => {
-    Taro.showToast({ title: `点击了${item.text}，第${index}个` })
+    Taro.showToast({ title: translated.clicked(item.text, index) })
   }
-
+  const imgSrc =
+    'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png'
   return (
     <>
       <Header />
@@ -227,25 +238,13 @@ const GridDemo = () => {
         <h2>{translated.customContent}</h2>
         <Grid columns={3} square>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
         </Grid>
 

diff --git a/src/packages/grid/demo.tsx b/src/packages/grid/demo.tsx
@@ -17,7 +17,9 @@ interface T {
   iconStyle: string
   customContent: string
   event: string
+  clicked: (text: string, index: number) => string
 }
+
 const GridDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
@@ -32,6 +34,9 @@ const GridDemo = () => {
       iconStyle: '图标颜色/大小',
       customContent: '自定义内容',
       event: '点击子项事件',
+      clicked: (text, index) => {
+        return `点击了${text}，第${index}个`
+      },
     },
     'zh-TW': {
       basic: '基础用法',
@@ -45,6 +50,9 @@ const GridDemo = () => {
       iconStyle: '圖標顏色/大小',
       customContent: '自定義內容',
       event: '點擊子項事件',
+      clicked: (text, index) => {
+        return `点击了${text}，第${index}个`
+      },
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -58,13 +66,17 @@ const GridDemo = () => {
       iconStyle: 'Icon Style',
       customContent: 'Custom Content',
       event: 'Grid Item Click',
+      clicked: (text, index) => {
+        return `clicked ${text}, index ${index}`
+      },
     },
   })
 
   const onClick = (item: any, index: number) => {
-    Toast.show(`点击了${item.text}，第${index}个`)
+    Toast.show(translated.clicked(item.text, index))
   }
-
+  const imgSrc =
+    'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png'
   return (
     <>
       <div className="demo" style={{ marginBottom: '100px' }}>
@@ -223,25 +235,13 @@ const GridDemo = () => {
         <h2>{translated.customContent}</h2>
         <Grid columns={3} square>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
           <Grid.Item>
-            <Image
-              src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-              width="100%"
-              height="100%"
-            />
+            <Image src={imgSrc} width="100%" height="100%" />
           </Grid.Item>
         </Grid>
 

diff --git a/src/packages/grid/doc.en-US.md b/src/packages/grid/doc.en-US.md
@@ -202,13 +202,13 @@ const App = () => {
   return (
     <Grid columns="3">
       <Grid.Item text="text">
-        <Image width={10} height={10} />
+        <Image width={15} height={15} />
       </Grid.Item>
       <Grid.Item text="text">
         <Image color="red" />
       </Grid.Item>
       <Grid.Item text="text">
-        <Image width={20} height={20} color="#478EF2" />
+        <Image width={30} height={30} color="#478EF2" />
       </Grid.Item>
     </Grid>
   )
@@ -224,31 +224,55 @@ export default App
 
 ```tsx
 import React from 'react'
-import { Grid, Avatar, Image } from '@nutui/nutui-react'
-import { Image as ImageIcon } from '@nutui/icons-react'
+import { Grid, Image } from '@nutui/nutui-react'
 
 const App = () => {
+  const imgSrc = "https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
   return (
-    <Grid>
-      <Grid.Item text={<span>More</span>}>
-        <Image
-          src="https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
-          width="100%"
-          height="100%"
-        />
+    <Grid columns={3} square>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
       </Grid.Item>
       <Grid.Item>
-        <Avatar
-          className="demo-avatar"
-          icon={<ImageIcon color="#fff" />}
-          background="#FA2C19"
-        />
+        <Image src={imgSrc} width="100%" height="100%" />
       </Grid.Item>
       <Grid.Item>
-        <Avatar
-          size="large"
-          icon={<Image src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />}
-        />
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default App
+```
+
+:::
+
+### Grid Item Click
+
+:::demo
+
+```tsx
+import React from 'react'
+import { Grid, Toast } from '@nutui/nutui-react'
+import { Image as ImageIcon } from '@nutui/icons-react'
+
+const App = () => {
+  const onClick = (item: any, index: number) => {
+    Toast.show(`clicked ${item.text}, index ${index}`)
+  }
+  return (
+    <Grid direction="horizontal" onClick={onClick}>
+      <Grid.Item text="text">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="text">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="text">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="text">
+        <ImageIcon />
       </Grid.Item>
     </Grid>
   )
@@ -294,4 +318,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-grid-item-content-bg-color | background | `$white` |
 | \--nutui-grid-item-text-margin | margin | `8px` |
 | \--nutui-grid-item-text-color | text color | `$color-title` |
-| \--nutui-grid-item-text-font-size | text font size | `$font-size-small` |
+| \--nutui-grid-item-text-font-size | text font size | `$font-size-small` |
diff --git a/src/packages/grid/doc.md b/src/packages/grid/doc.md
@@ -202,13 +202,13 @@ const App = () => {
   return (
     <Grid columns="3">
       <Grid.Item text="文字">
-        <Image width={10} height={10} />
+        <Image width={15} height={15} />
       </Grid.Item>
       <Grid.Item text="文字">
         <Image color="red" />
       </Grid.Item>
       <Grid.Item text="文字">
-        <Image width={20} height={20} color="#478EF2" />
+        <Image width={30} height={30} color="#478EF2" />
       </Grid.Item>
     </Grid>
   )
@@ -224,26 +224,56 @@ export default App
 
 ```tsx
 import React from 'react'
-import { Grid, Avatar, Image } from '@nutui/nutui-react'
+import { Grid, Image } from '@nutui/nutui-react'
+
+const App = () => {
+  const imgSrc = "https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png"
+  return (
+    <Grid columns={3} square>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default App
+```
+
+:::
+
+### 点击子项事件
+
+:::demo
+
+```tsx
+import React from 'react'
+import { Grid, Toast } from '@nutui/nutui-react'
 import { Image as ImageIcon } from '@nutui/icons-react'
 
 const App = () => {
+  const onClick = (item: any, index: number) => {
+    Toast.show(`点击了${item.text}，第${index}个`)
+  }
   return (
-    <Grid>
-      <Grid.Item text={<span>More</span>}><ImageIcon /></Grid.Item>
-        <Grid.Item>
-          <Avatar
-            className="demo-avatar"
-            icon={<ImageIcon color="#fff"/>}
-            background="#FA2C19"
-          />
-        </Grid.Item>
-        <Grid.Item>
-          <Avatar
-            size="large"
-            icon={<Image src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />}
-          />
-        </Grid.Item>
+    <Grid direction="horizontal" onClick={onClick}>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
     </Grid>
   )
 }
@@ -288,4 +318,4 @@ export default App
 | \--nutui-grid-item-content-bg-color | 背景 | `$white` |
 | \--nutui-grid-item-text-margin | 外边距 | `8px` |
 | \--nutui-grid-item-text-color | 文字颜色 | `$color-title` |
-| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-size-small` |
+| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-size-small` |