From 397aa3ddd3e152245804bacc74dad824f6b805ef Mon Sep 17 00:00:00 2001 From: "Alex.huxiyang" <99181718+Alex-huxiyang@users.noreply.github.com> Date: Wed, 13 Mar 2024 17:32:08 +0800 Subject: [PATCH] =?UTF-8?q?fix(grid):=20demo=E6=8B=86=E8=A7=A3=E4=B8=8E?= =?UTF-8?q?=E8=A7=84=E8=8C=83=20(#2014)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/grid/demo.taro.tsx | 225 +++-------------------- src/packages/grid/demo.tsx | 228 +++--------------------- src/packages/grid/demos/h5/demo1.tsx | 35 ++++ src/packages/grid/demos/h5/demo10.tsx | 26 +++ src/packages/grid/demos/h5/demo2.tsx | 29 +++ src/packages/grid/demos/h5/demo3.tsx | 20 +++ src/packages/grid/demos/h5/demo4.tsx | 35 ++++ src/packages/grid/demos/h5/demo5.tsx | 23 +++ src/packages/grid/demos/h5/demo6.tsx | 23 +++ src/packages/grid/demos/h5/demo7.tsx | 23 +++ src/packages/grid/demos/h5/demo8.tsx | 20 +++ src/packages/grid/demos/h5/demo9.tsx | 21 +++ src/packages/grid/demos/taro/demo1.tsx | 35 ++++ src/packages/grid/demos/taro/demo10.tsx | 29 +++ src/packages/grid/demos/taro/demo2.tsx | 29 +++ src/packages/grid/demos/taro/demo3.tsx | 20 +++ src/packages/grid/demos/taro/demo4.tsx | 35 ++++ src/packages/grid/demos/taro/demo5.tsx | 23 +++ src/packages/grid/demos/taro/demo6.tsx | 23 +++ src/packages/grid/demos/taro/demo7.tsx | 23 +++ src/packages/grid/demos/taro/demo8.tsx | 20 +++ src/packages/grid/demos/taro/demo9.tsx | 21 +++ src/packages/grid/doc.en-US.md | 210 ++-------------------- src/packages/grid/doc.md | 210 ++-------------------- src/packages/grid/doc.taro.md | 212 ++-------------------- src/packages/grid/doc.zh-TW.md | 210 ++-------------------- 26 files changed, 595 insertions(+), 1213 deletions(-) create mode 100644 src/packages/grid/demos/h5/demo1.tsx create mode 100644 src/packages/grid/demos/h5/demo10.tsx create mode 100644 src/packages/grid/demos/h5/demo2.tsx create mode 100644 src/packages/grid/demos/h5/demo3.tsx create mode 100644 src/packages/grid/demos/h5/demo4.tsx create mode 100644 src/packages/grid/demos/h5/demo5.tsx create mode 100644 src/packages/grid/demos/h5/demo6.tsx create mode 100644 src/packages/grid/demos/h5/demo7.tsx create mode 100644 src/packages/grid/demos/h5/demo8.tsx create mode 100644 src/packages/grid/demos/h5/demo9.tsx create mode 100644 src/packages/grid/demos/taro/demo1.tsx create mode 100644 src/packages/grid/demos/taro/demo10.tsx create mode 100644 src/packages/grid/demos/taro/demo2.tsx create mode 100644 src/packages/grid/demos/taro/demo3.tsx create mode 100644 src/packages/grid/demos/taro/demo4.tsx create mode 100644 src/packages/grid/demos/taro/demo5.tsx create mode 100644 src/packages/grid/demos/taro/demo6.tsx create mode 100644 src/packages/grid/demos/taro/demo7.tsx create mode 100644 src/packages/grid/demos/taro/demo8.tsx create mode 100644 src/packages/grid/demos/taro/demo9.tsx diff --git a/src/packages/grid/demo.taro.tsx b/src/packages/grid/demo.taro.tsx index f4af5b7dfa..1f461a1f70 100644 --- a/src/packages/grid/demo.taro.tsx +++ b/src/packages/grid/demo.taro.tsx @@ -1,29 +1,22 @@ import React from 'react' import Taro from '@tarojs/taro' -import { Image as ImageIcon } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' -import { Grid, Image } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' +import Demo1 from './demos/taro/demo1' +import Demo2 from './demos/taro/demo2' +import Demo3 from './demos/taro/demo3' +import Demo4 from './demos/taro/demo4' +import Demo5 from './demos/taro/demo5' +import Demo6 from './demos/taro/demo6' +import Demo7 from './demos/taro/demo7' +import Demo8 from './demos/taro/demo8' +import Demo9 from './demos/taro/demo9' +import Demo10 from './demos/taro/demo10' -interface T { - basic: string - text: string - columns: string - square: string - gap: string - reverse: string - horizontal: string - reverseHorizontal: string - iconStyle: string - customContent: string - event: string - clicked: (text: string, index: number) => string -} const GridDemo = () => { - const [translated] = useTranslate({ + const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', - text: '文字', columns: '自定义列数', square: '正方形格子', gap: '格子间距', @@ -33,13 +26,9 @@ const GridDemo = () => { iconStyle: '图标颜色/大小', customContent: '自定义内容', event: '点击子项事件', - clicked: (text, index) => { - return `点击了${text}，第${index}个` - }, }, 'zh-TW': { basic: '基础用法', - text: '文字', columns: '自定義列數', square: '正方形格子', gap: '格子間距', @@ -49,13 +38,9 @@ const GridDemo = () => { iconStyle: '圖標顏色/大小', customContent: '自定義內容', event: '點擊子項事件', - clicked: (text, index) => { - return `点击了${text}，第${index}个` - }, }, 'en-US': { basic: 'Basic Usage', - text: 'text', columns: 'Column Num', square: 'Square', gap: 'Gap', @@ -65,17 +50,9 @@ 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: translated.clicked(item.text, index) }) - } - const imgSrc = - 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' return ( <>
@@ -84,185 +61,25 @@ const GridDemo = () => { style={{ marginBottom: '100px' }} >

{translated.basic}

- - - - - - - - - - - - - - - - - - - - - - - - - - - +

{translated.columns}

- - - - - - - - - - - - - - - - - - - - - +

{translated.square}

- - - - - - - - - - - - +

{translated.gap}

- - - - - - - - - - - - - - - - - - - - - - - - - - - +

{translated.reverse}

- - - - - - - - - - - - - - - +

{translated.horizontal}

- - - - - - - - - - - - - - - +

{translated.reverseHorizontal}

- - - - - - - - - - - - - - - +

{translated.iconStyle}

- - - - - - - - - - - - +

{translated.customContent}

- - - - - - - - - - - - +

{translated.event}

- - - - - - - - - - - - - - + ) diff --git a/src/packages/grid/demo.tsx b/src/packages/grid/demo.tsx index 5f7f55fec7..64e73f9e5c 100644 --- a/src/packages/grid/demo.tsx +++ b/src/packages/grid/demo.tsx @@ -1,30 +1,20 @@ import React from 'react' -import { Image as ImageIcon } from '@nutui/icons-react' -import { Grid } from './grid' import { useTranslate } from '../../sites/assets/locale' -import Toast from '../toast' -import Image from '../image' - -interface T { - basic: string - text: string - columns: string - square: string - gap: string - reverse: string - horizontal: string - reverseHorizontal: string - iconStyle: string - customContent: string - event: string - clicked: (text: string, index: number) => 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' +import Demo7 from './demos/h5/demo7' +import Demo8 from './demos/h5/demo8' +import Demo9 from './demos/h5/demo9' +import Demo10 from './demos/h5/demo10' const GridDemo = () => { - const [translated] = useTranslate({ + const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', - text: '文字', columns: '自定义列数', square: '正方形格子', gap: '格子间距', @@ -34,13 +24,9 @@ const GridDemo = () => { iconStyle: '图标颜色/大小', customContent: '自定义内容', event: '点击子项事件', - clicked: (text, index) => { - return `点击了${text}，第${index}个` - }, }, 'zh-TW': { basic: '基础用法', - text: '文字', columns: '自定義列數', square: '正方形格子', gap: '格子間距', @@ -50,13 +36,9 @@ const GridDemo = () => { iconStyle: '圖標顏色/大小', customContent: '自定義內容', event: '點擊子項事件', - clicked: (text, index) => { - return `点击了${text}，第${index}个` - }, }, 'en-US': { basic: 'Basic Usage', - text: 'text', columns: 'Column Num', square: 'Square', gap: 'Gap', @@ -66,200 +48,32 @@ 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(translated.clicked(item.text, index)) - } - const imgSrc = - 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' return ( <>

{translated.basic}

- - - - - - - - - - - - - - - - - - - - - - - - - - - +

{translated.columns}

- - - - - - - - - - - - - - - - - - - - - +

{translated.square}

- - - - - - - - - - - - +

{translated.gap}

- - - - - - - - - - - - - - - - - - - - - - - - - - - +

{translated.reverse}

- - - - - - - - - - - - - - - +

{translated.horizontal}

- - - - - - - - - - - - - - - +

{translated.reverseHorizontal}

- - - - - - - - - - - - - - - +

{translated.iconStyle}

- - - - - - - - - - - - +

{translated.customContent}

- - - - - - - - - - - - +

{translated.event}

- - - - - - - - - - - - - - +
) diff --git a/src/packages/grid/demos/h5/demo1.tsx b/src/packages/grid/demos/h5/demo1.tsx new file mode 100644 index 0000000000..7f9996f636 --- /dev/null +++ b/src/packages/grid/demos/h5/demo1.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo1 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo1 diff --git a/src/packages/grid/demos/h5/demo10.tsx b/src/packages/grid/demos/h5/demo10.tsx new file mode 100644 index 0000000000..ba7fc0a828 --- /dev/null +++ b/src/packages/grid/demos/h5/demo10.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Grid, Toast } from '@nutui/nutui-react' +import { Image as ImageIcon } from '@nutui/icons-react' + +const Demo10 = () => { + const onClick = (item: any, index: number) => { + Toast.show(`点击了${item.text}，第${index}个`) + } + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/grid/demos/h5/demo2.tsx b/src/packages/grid/demos/h5/demo2.tsx new file mode 100644 index 0000000000..3b825f99ad --- /dev/null +++ b/src/packages/grid/demos/h5/demo2.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo2 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo2 diff --git a/src/packages/grid/demos/h5/demo3.tsx b/src/packages/grid/demos/h5/demo3.tsx new file mode 100644 index 0000000000..9ee0bfba87 --- /dev/null +++ b/src/packages/grid/demos/h5/demo3.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo3 = () => { + return ( + + + + + + + + + + + + ) +} +export default Demo3 diff --git a/src/packages/grid/demos/h5/demo4.tsx b/src/packages/grid/demos/h5/demo4.tsx new file mode 100644 index 0000000000..4d9b768747 --- /dev/null +++ b/src/packages/grid/demos/h5/demo4.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo4 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo4 diff --git a/src/packages/grid/demos/h5/demo5.tsx b/src/packages/grid/demos/h5/demo5.tsx new file mode 100644 index 0000000000..c14daf09a6 --- /dev/null +++ b/src/packages/grid/demos/h5/demo5.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo5 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo5 diff --git a/src/packages/grid/demos/h5/demo6.tsx b/src/packages/grid/demos/h5/demo6.tsx new file mode 100644 index 0000000000..7dc6d5da3c --- /dev/null +++ b/src/packages/grid/demos/h5/demo6.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo6 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo6 diff --git a/src/packages/grid/demos/h5/demo7.tsx b/src/packages/grid/demos/h5/demo7.tsx new file mode 100644 index 0000000000..0f4df4fc57 --- /dev/null +++ b/src/packages/grid/demos/h5/demo7.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo7 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo7 diff --git a/src/packages/grid/demos/h5/demo8.tsx b/src/packages/grid/demos/h5/demo8.tsx new file mode 100644 index 0000000000..0cc3c47a0b --- /dev/null +++ b/src/packages/grid/demos/h5/demo8.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react' +import { Image } from '@nutui/icons-react' + +const Demo8 = () => { + return ( + + + + + + + + + + + + ) +} +export default Demo8 diff --git a/src/packages/grid/demos/h5/demo9.tsx b/src/packages/grid/demos/h5/demo9.tsx new file mode 100644 index 0000000000..ad3bb842a6 --- /dev/null +++ b/src/packages/grid/demos/h5/demo9.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { Grid, Image } from '@nutui/nutui-react' + +const Demo9 = () => { + const imgSrc = + 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' + return ( + + + + + + + + + + + + ) +} +export default Demo9 diff --git a/src/packages/grid/demos/taro/demo1.tsx b/src/packages/grid/demos/taro/demo1.tsx new file mode 100644 index 0000000000..c9b5644510 --- /dev/null +++ b/src/packages/grid/demos/taro/demo1.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo1 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo1 diff --git a/src/packages/grid/demos/taro/demo10.tsx b/src/packages/grid/demos/taro/demo10.tsx new file mode 100644 index 0000000000..56fbd5caf0 --- /dev/null +++ b/src/packages/grid/demos/taro/demo10.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image as ImageIcon } from '@nutui/icons-react-taro' +import Taro from '@tarojs/taro' + +const Demo10 = () => { + const imgSrc = + 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' + const onClick = (item: any, index: number) => { + Taro.showToast({ title: `点击了${item.text}，第${index}个` }) + } + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/grid/demos/taro/demo2.tsx b/src/packages/grid/demos/taro/demo2.tsx new file mode 100644 index 0000000000..49097b4e89 --- /dev/null +++ b/src/packages/grid/demos/taro/demo2.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo2 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo2 diff --git a/src/packages/grid/demos/taro/demo3.tsx b/src/packages/grid/demos/taro/demo3.tsx new file mode 100644 index 0000000000..080bd8bb83 --- /dev/null +++ b/src/packages/grid/demos/taro/demo3.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo3 = () => { + return ( + + + + + + + + + + + + ) +} +export default Demo3 diff --git a/src/packages/grid/demos/taro/demo4.tsx b/src/packages/grid/demos/taro/demo4.tsx new file mode 100644 index 0000000000..58cda619c7 --- /dev/null +++ b/src/packages/grid/demos/taro/demo4.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo4 = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export default Demo4 diff --git a/src/packages/grid/demos/taro/demo5.tsx b/src/packages/grid/demos/taro/demo5.tsx new file mode 100644 index 0000000000..ba599b4bc3 --- /dev/null +++ b/src/packages/grid/demos/taro/demo5.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo5 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo5 diff --git a/src/packages/grid/demos/taro/demo6.tsx b/src/packages/grid/demos/taro/demo6.tsx new file mode 100644 index 0000000000..32c4dfab80 --- /dev/null +++ b/src/packages/grid/demos/taro/demo6.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo6 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo6 diff --git a/src/packages/grid/demos/taro/demo7.tsx b/src/packages/grid/demos/taro/demo7.tsx new file mode 100644 index 0000000000..1f9033df8f --- /dev/null +++ b/src/packages/grid/demos/taro/demo7.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo7 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo7 diff --git a/src/packages/grid/demos/taro/demo8.tsx b/src/packages/grid/demos/taro/demo8.tsx new file mode 100644 index 0000000000..c38fd20d74 --- /dev/null +++ b/src/packages/grid/demos/taro/demo8.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Grid } from '@nutui/nutui-react-taro' +import { Image } from '@nutui/icons-react-taro' + +const Demo8 = () => { + return ( + + + + + + + + + + + + ) +} +export default Demo8 diff --git a/src/packages/grid/demos/taro/demo9.tsx b/src/packages/grid/demos/taro/demo9.tsx new file mode 100644 index 0000000000..f9b56d034d --- /dev/null +++ b/src/packages/grid/demos/taro/demo9.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { Grid, Image } from '@nutui/nutui-react-taro' + +const Demo9 = () => { + const imgSrc = + 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' + return ( + + + + + + + + + + + + ) +} +export default Demo9 diff --git a/src/packages/grid/doc.en-US.md b/src/packages/grid/doc.en-US.md index 9ea4950910..cd1b7e8605 100644 --- a/src/packages/grid/doc.en-US.md +++ b/src/packages/grid/doc.en-US.md @@ -16,27 +16,7 @@ import { Grid } from '@nutui/nutui-react' :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -44,25 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - ) -} -export default App -``` + ::: @@ -70,22 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - ) -} -export default App -``` + ::: @@ -93,27 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -121,23 +48,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -145,23 +56,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -169,23 +64,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -193,28 +72,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -222,28 +80,7 @@ export default App :::demo -```tsx -import React from '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 ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -251,34 +88,7 @@ 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(`clicked ${item.text}, index ${index}`) - } - return ( - - - - - - - - - - - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/grid/doc.md b/src/packages/grid/doc.md index ec032f763f..7e4e91698d 100644 --- a/src/packages/grid/doc.md +++ b/src/packages/grid/doc.md @@ -16,27 +16,7 @@ import { Grid } from '@nutui/nutui-react' :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -44,25 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - ) -} -export default App -``` + ::: @@ -70,22 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - ) -} -export default App -``` + ::: @@ -93,27 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -121,23 +48,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -145,23 +56,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -169,23 +64,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -193,28 +72,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -222,28 +80,7 @@ export default App :::demo -```tsx -import React from '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 ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -251,34 +88,7 @@ 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 ( - - - - - - - - - - - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/grid/doc.taro.md b/src/packages/grid/doc.taro.md index 02aa124661..0b99392386 100644 --- a/src/packages/grid/doc.taro.md +++ b/src/packages/grid/doc.taro.md @@ -16,27 +16,7 @@ import { Grid } from '@nutui/nutui-react-taro' :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -44,25 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - - - ) -} -export default App -``` + ::: @@ -70,22 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - ) -} -export default App -``` + ::: @@ -93,27 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -121,23 +48,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -145,23 +56,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -169,23 +64,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -193,28 +72,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -222,28 +80,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid, Image } from '@nutui/nutui-react-taro' - -const App = () => { - const imgSrc = 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' - return ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -251,36 +88,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react-taro' -import { Image as ImageIcon} from '@nutui/icons-react-taro' -import Taro from '@tarojs/taro' - -const App = () => { - const imgSrc = 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' - const onClick = (item: any, index: number) => { - Taro.showToast({ title: `点击了${item.text}，第${index}个` }) - } - return ( - - - - - - - - - - - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/grid/doc.zh-TW.md b/src/packages/grid/doc.zh-TW.md index e3b06c50a8..47cc9ae8be 100644 --- a/src/packages/grid/doc.zh-TW.md +++ b/src/packages/grid/doc.zh-TW.md @@ -16,27 +16,7 @@ import { Grid } from '@nutui/nutui-react' :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -44,25 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - ) -} -export default App -``` + ::: @@ -70,22 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - ) -} -export default App -``` + ::: @@ -93,27 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -121,23 +48,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -145,23 +56,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -169,23 +64,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - ) -} -export default App -``` + ::: @@ -193,28 +72,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Grid } from '@nutui/nutui-react' -import { Image } from '@nutui/icons-react' - -const App = () => { - return ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -222,28 +80,7 @@ export default App :::demo -```tsx -import React from '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 ( - - - - - - - - - - - - ) -} -export default App -``` + ::: @@ -251,34 +88,7 @@ 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 ( - - - - - - - - - - - - - - - ) -} -export default App -``` + :::