Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(grid): demo拆解与规范 #2014

Merged
merged 1 commit into from
Mar 13, 2024
Merged

fix(grid): demo拆解与规范 #2014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 21 additions & 204 deletions src/packages/grid/demo.taro.tsx
View file
Open in desktop
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
Loading