Skip to content

Commit

Permalink
fix(grid): demo拆解与规范 (#2014)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-huxiyang
Alex-huxiyang authored Mar 13, 2024
1 parent 9a25a4f commit 397aa3d
Show file tree
Hide file tree
Showing 26 changed files with 595 additions and 1,213 deletions.
225 changes: 21 additions & 204 deletions src/packages/grid/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<T>({
const [translated] = useTranslate({
'zh-CN': {
basic: '基础用法',
text: '文字',
columns: '自定义列数',
square: '正方形格子',
gap: '格子间距',
Expand All @@ -33,13 +26,9 @@ const GridDemo = () => {
iconStyle: '图标颜色/大小',
customContent: '自定义内容',
event: '点击子项事件',
clicked: (text, index) => {
return `点击了${text}，第${index}个`
},
},
'zh-TW': {
basic: '基础用法',
text: '文字',
columns: '自定義列數',
square: '正方形格子',
gap: '格子間距',
Expand All @@ -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',
Expand All @@ -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 (
<>
<Header />
Expand All @@ -84,185 +61,25 @@ const GridDemo = () => {
style={{ marginBottom: '100px' }}
>
<h2>{translated.basic}</h2>
<Grid>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo1 />
<h2>{translated.columns}</h2>
<Grid columns={3}>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo2 />
<h2>{translated.square}</h2>
<Grid columns={3} square>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo3 />
<h2>{translated.gap}</h2>
<Grid gap={3}>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo4 />
<h2>{translated.reverse}</h2>
<Grid reverse>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo5 />
<h2>{translated.horizontal}</h2>
<Grid direction="horizontal">
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo6 />
<h2>{translated.reverseHorizontal}</h2>
<Grid reverse direction="horizontal">
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>

<Demo7 />
<h2>{translated.iconStyle}</h2>
<Grid columns="3">
<Grid.Item text={translated.text}>
<ImageIcon size={16} />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon color="red" />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon size={30} color="#478EF2" />
</Grid.Item>
</Grid>

<Demo8 />
<h2>{translated.customContent}</h2>
<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>

<Demo9 />
<h2>{translated.event}</h2>
<Grid direction="horizontal" onClick={onClick}>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
<Grid.Item text={translated.text}>
<ImageIcon />
</Grid.Item>
</Grid>
<Demo10 />
</div>
</>
)
Expand Down
Loading

0 comments on commit 397aa3d

Please sign in to comment.