Skip to content

Commit

Permalink
feat(grid): v14
Browse files Browse the repository at this point in the history
  • Loading branch information
@irisSong
irisSong committed Nov 19, 2024
1 parent 6714eb4 commit 0dcd069
Show file tree
Hide file tree
Showing 33 changed files with 199 additions and 342 deletions.
16 changes: 11 additions & 5 deletions src/packages/grid/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import { useTranslate } from '@/sites/assets/locale/taro'
import { harmony } from '@/utils/platform-taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
Expand All @@ -19,7 +20,7 @@ const GridDemo = () => {
'zh-CN': {
basic: '基础用法',
columns: '自定义列数',
square: '正方形格子',
custom: '自定义格子',
gap: '格子间距',
reverse: '内容翻转',
horizontal: '内容横向',
Expand All @@ -31,7 +32,7 @@ const GridDemo = () => {
'zh-TW': {
basic: '基础用法',
columns: '自定義列數',
square: '正方形格子',
custom: '自定義格子',
gap: '格子間距',
reverse: '內容翻轉',
horizontal: '內容橫向',
Expand All @@ -43,7 +44,7 @@ const GridDemo = () => {
'en-US': {
basic: 'Basic Usage',
columns: 'Column Num',
square: 'Square',
custom: 'Custom Grids',
gap: 'Gap',
reverse: 'Reverse',
horizontal: 'Horizontal',
Expand All @@ -65,8 +66,13 @@ const GridDemo = () => {
<Demo1 />
<View className="h2">{translated.columns}</View>
<Demo2 />
<View className="h2">{translated.square}</View>
<Demo3 />
{/* harmony 不支持 css 变量 */}
{harmony() ? null : (
<>
<View className="h2">{translated.custom}</View>
<Demo3 />
</>
)}
<View className="h2">{translated.gap}</View>
<Demo4 />
<View className="h2">{translated.reverse}</View>
Expand Down
8 changes: 4 additions & 4 deletions src/packages/grid/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const GridDemo = () => {
'zh-CN': {
basic: '基础用法',
columns: '自定义列数',
square: '正方形格子',
custom: '自定义格子',
gap: '格子间距',
reverse: '内容翻转',
horizontal: '内容横向',
Expand All @@ -28,7 +28,7 @@ const GridDemo = () => {
'zh-TW': {
basic: '基础用法',
columns: '自定義列數',
square: '正方形格子',
custom: '自定義格子',
gap: '格子間距',
reverse: '內容翻轉',
horizontal: '內容橫向',
Expand All @@ -40,7 +40,7 @@ const GridDemo = () => {
'en-US': {
basic: 'Basic Usage',
columns: 'Column Num',
square: 'Square',
custom: 'Custom Grids',
gap: 'Gap',
reverse: 'Reverse',
horizontal: 'Horizontal',
Expand All @@ -58,7 +58,7 @@ const GridDemo = () => {
<Demo1 />
<h2>{translated.columns}</h2>
<Demo2 />
<h2>{translated.square}</h2>
<h2>{translated.custom}</h2>
<Demo3 />
<h2>{translated.gap}</h2>
<Demo4 />
Expand Down
29 changes: 5 additions & 24 deletions src/packages/grid/demos/h5/demo1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react'
const Demo1 = () => {
return (
<Grid>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(8)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
19 changes: 6 additions & 13 deletions src/packages/grid/demos/h5/demo10.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
import React from 'react'
import { Grid, Toast } from '@nutui/nutui-react'
import { Image as ImageIcon } from '@nutui/icons-react'
import { Image } from '@nutui/icons-react'

const Demo10 = () => {
const onClick = (item: any, index: number) => {
Toast.show(`点击了${item.text}，第${index}个`)
}
return (
<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>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
25 changes: 6 additions & 19 deletions src/packages/grid/demos/h5/demo2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,12 @@ import { Image } from '@nutui/icons-react'

const Demo2 = () => {
return (
<Grid columns={3}>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid columns={3} gap={7}>
{[...Array(6)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
22 changes: 12 additions & 10 deletions src/packages/grid/demos/h5/demo3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@ import { Image } from '@nutui/icons-react'

const Demo3 = () => {
return (
<Grid columns={3} square>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid
square={false}
gap={0}
style={{
'--nutui-grid-border-width': '1px',
}}
>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
29 changes: 5 additions & 24 deletions src/packages/grid/demos/h5/demo4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react'
const Demo4 = () => {
return (
<Grid gap={3}>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(8)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
17 changes: 5 additions & 12 deletions src/packages/grid/demos/h5/demo5.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react'
const Demo5 = () => {
return (
<Grid reverse>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
17 changes: 5 additions & 12 deletions src/packages/grid/demos/h5/demo6.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react'
const Demo6 = () => {
return (
<Grid direction="horizontal">
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
17 changes: 5 additions & 12 deletions src/packages/grid/demos/h5/demo7.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react'
const Demo7 = () => {
return (
<Grid reverse direction="horizontal">
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/grid/demos/h5/demo8.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Image } from '@nutui/icons-react'

const Demo8 = () => {
return (
<Grid columns="3">
<Grid columns={3} gap={7}>
<Grid.Item text="文字">
<Image width={15} height={15} />
</Grid.Item>
Expand Down
16 changes: 6 additions & 10 deletions src/packages/grid/demos/h5/demo9.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,12 @@ const Demo9 = () => {
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>
{[...Array(4)].map((_, index) => (
<Grid.Item key={index}>
<Image src={imgSrc} width="100%" height="100%" />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
29 changes: 5 additions & 24 deletions src/packages/grid/demos/taro/demo1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react-taro'
const Demo1 = () => {
return (
<Grid>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
<Grid.Item text="文字">
<Image />
</Grid.Item>
{[...Array(8)].map((_, index) => (
<Grid.Item key={index} text="文字">
<Image />
</Grid.Item>
))}
</Grid>
)
}
Expand Down
Loading

0 comments on commit 0dcd069

Please sign in to comment.