From 0dcd06988ed59b4b6445e3e8aa4837ea698d2921 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 19 Nov 2024 17:32:06 +0800 Subject: [PATCH] feat(grid): v14 --- src/packages/grid/demo.taro.tsx | 16 +++++++++----- src/packages/grid/demo.tsx | 8 +++---- src/packages/grid/demos/h5/demo1.tsx | 29 +++++-------------------- src/packages/grid/demos/h5/demo10.tsx | 19 +++++----------- src/packages/grid/demos/h5/demo2.tsx | 25 +++++---------------- src/packages/grid/demos/h5/demo3.tsx | 22 ++++++++++--------- src/packages/grid/demos/h5/demo4.tsx | 29 +++++-------------------- src/packages/grid/demos/h5/demo5.tsx | 17 +++++---------- src/packages/grid/demos/h5/demo6.tsx | 17 +++++---------- src/packages/grid/demos/h5/demo7.tsx | 17 +++++---------- src/packages/grid/demos/h5/demo8.tsx | 2 +- src/packages/grid/demos/h5/demo9.tsx | 16 +++++--------- src/packages/grid/demos/taro/demo1.tsx | 29 +++++-------------------- src/packages/grid/demos/taro/demo10.tsx | 17 +++++---------- src/packages/grid/demos/taro/demo2.tsx | 25 +++++---------------- src/packages/grid/demos/taro/demo3.tsx | 25 ++++++++++++--------- src/packages/grid/demos/taro/demo4.tsx | 29 +++++-------------------- src/packages/grid/demos/taro/demo5.tsx | 17 +++++---------- src/packages/grid/demos/taro/demo6.tsx | 17 +++++---------- src/packages/grid/demos/taro/demo7.tsx | 17 +++++---------- src/packages/grid/demos/taro/demo8.tsx | 11 +--------- src/packages/grid/demos/taro/demo9.tsx | 16 +++++--------- src/packages/grid/doc.en-US.md | 12 ++++++---- src/packages/grid/doc.md | 10 +++++---- src/packages/grid/doc.taro.md | 10 +++++---- src/packages/grid/doc.zh-TW.md | 10 +++++---- src/packages/grid/grid.scss | 4 ++-- src/packages/grid/grid.taro.tsx | 9 ++------ src/packages/grid/grid.tsx | 9 ++------ src/packages/griditem/griditem.scss | 10 +++++---- src/packages/griditem/griditem.taro.tsx | 23 ++++++++++++-------- src/packages/griditem/griditem.tsx | 19 +++++++++++----- src/styles/variables.scss | 5 +++++ 33 files changed, 199 insertions(+), 342 deletions(-) diff --git a/src/packages/grid/demo.taro.tsx b/src/packages/grid/demo.taro.tsx index 874d19c42e..717517aa7e 100644 --- a/src/packages/grid/demo.taro.tsx +++ b/src/packages/grid/demo.taro.tsx @@ -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' @@ -19,7 +20,7 @@ const GridDemo = () => { 'zh-CN': { basic: '基础用法', columns: '自定义列数', - square: '正方形格子', + custom: '自定义格子', gap: '格子间距', reverse: '内容翻转', horizontal: '内容横向', @@ -31,7 +32,7 @@ const GridDemo = () => { 'zh-TW': { basic: '基础用法', columns: '自定義列數', - square: '正方形格子', + custom: '自定義格子', gap: '格子間距', reverse: '內容翻轉', horizontal: '內容橫向', @@ -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', @@ -65,8 +66,13 @@ const GridDemo = () => { {translated.columns} - {translated.square} - + {/* harmony 不支持 css 变量 */} + {harmony() ? null : ( + <> + {translated.custom} + + + )} {translated.gap} {translated.reverse} diff --git a/src/packages/grid/demo.tsx b/src/packages/grid/demo.tsx index 676614e97a..0c43eae8f5 100644 --- a/src/packages/grid/demo.tsx +++ b/src/packages/grid/demo.tsx @@ -16,7 +16,7 @@ const GridDemo = () => { 'zh-CN': { basic: '基础用法', columns: '自定义列数', - square: '正方形格子', + custom: '自定义格子', gap: '格子间距', reverse: '内容翻转', horizontal: '内容横向', @@ -28,7 +28,7 @@ const GridDemo = () => { 'zh-TW': { basic: '基础用法', columns: '自定義列數', - square: '正方形格子', + custom: '自定義格子', gap: '格子間距', reverse: '內容翻轉', horizontal: '內容橫向', @@ -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', @@ -58,7 +58,7 @@ const GridDemo = () => {

{translated.columns}

-

{translated.square}

+

{translated.custom}

{translated.gap}

diff --git a/src/packages/grid/demos/h5/demo1.tsx b/src/packages/grid/demos/h5/demo1.tsx index 7f9996f636..5cadfee592 100644 --- a/src/packages/grid/demos/h5/demo1.tsx +++ b/src/packages/grid/demos/h5/demo1.tsx @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react' const Demo1 = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + {[...Array(8)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo10.tsx b/src/packages/grid/demos/h5/demo10.tsx index ba7fc0a828..97a4b8b08b 100644 --- a/src/packages/grid/demos/h5/demo10.tsx +++ b/src/packages/grid/demos/h5/demo10.tsx @@ -1,6 +1,6 @@ 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) => { @@ -8,18 +8,11 @@ const Demo10 = () => { } return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo2.tsx b/src/packages/grid/demos/h5/demo2.tsx index 3b825f99ad..4c5de82cbb 100644 --- a/src/packages/grid/demos/h5/demo2.tsx +++ b/src/packages/grid/demos/h5/demo2.tsx @@ -4,25 +4,12 @@ import { Image } from '@nutui/icons-react' const Demo2 = () => { return ( - - - - - - - - - - - - - - - - - - - + + {[...Array(6)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo3.tsx b/src/packages/grid/demos/h5/demo3.tsx index 9ee0bfba87..7537e3b35e 100644 --- a/src/packages/grid/demos/h5/demo3.tsx +++ b/src/packages/grid/demos/h5/demo3.tsx @@ -4,16 +4,18 @@ import { Image } from '@nutui/icons-react' const Demo3 = () => { return ( - - - - - - - - - - + + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo4.tsx b/src/packages/grid/demos/h5/demo4.tsx index 4d9b768747..63b9e69ffb 100644 --- a/src/packages/grid/demos/h5/demo4.tsx +++ b/src/packages/grid/demos/h5/demo4.tsx @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react' const Demo4 = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + {[...Array(8)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo5.tsx b/src/packages/grid/demos/h5/demo5.tsx index c14daf09a6..754971caac 100644 --- a/src/packages/grid/demos/h5/demo5.tsx +++ b/src/packages/grid/demos/h5/demo5.tsx @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react' const Demo5 = () => { return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo6.tsx b/src/packages/grid/demos/h5/demo6.tsx index 7dc6d5da3c..815994a2c2 100644 --- a/src/packages/grid/demos/h5/demo6.tsx +++ b/src/packages/grid/demos/h5/demo6.tsx @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react' const Demo6 = () => { return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo7.tsx b/src/packages/grid/demos/h5/demo7.tsx index 0f4df4fc57..e5b4e682f5 100644 --- a/src/packages/grid/demos/h5/demo7.tsx +++ b/src/packages/grid/demos/h5/demo7.tsx @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react' const Demo7 = () => { return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/h5/demo8.tsx b/src/packages/grid/demos/h5/demo8.tsx index 0cc3c47a0b..a87b45e76a 100644 --- a/src/packages/grid/demos/h5/demo8.tsx +++ b/src/packages/grid/demos/h5/demo8.tsx @@ -4,7 +4,7 @@ import { Image } from '@nutui/icons-react' const Demo8 = () => { return ( - + diff --git a/src/packages/grid/demos/h5/demo9.tsx b/src/packages/grid/demos/h5/demo9.tsx index ad3bb842a6..3460ce096d 100644 --- a/src/packages/grid/demos/h5/demo9.tsx +++ b/src/packages/grid/demos/h5/demo9.tsx @@ -5,16 +5,12 @@ const Demo9 = () => { const imgSrc = 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' return ( - - - - - - - - - - + + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo1.tsx b/src/packages/grid/demos/taro/demo1.tsx index c9b5644510..5860eec981 100644 --- a/src/packages/grid/demos/taro/demo1.tsx +++ b/src/packages/grid/demos/taro/demo1.tsx @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react-taro' const Demo1 = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + {[...Array(8)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo10.tsx b/src/packages/grid/demos/taro/demo10.tsx index e140b07e79..16b57760f9 100644 --- a/src/packages/grid/demos/taro/demo10.tsx +++ b/src/packages/grid/demos/taro/demo10.tsx @@ -9,18 +9,11 @@ const Demo10 = () => { } return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo2.tsx b/src/packages/grid/demos/taro/demo2.tsx index 49097b4e89..3e1dcd2111 100644 --- a/src/packages/grid/demos/taro/demo2.tsx +++ b/src/packages/grid/demos/taro/demo2.tsx @@ -4,25 +4,12 @@ import { Image } from '@nutui/icons-react-taro' const Demo2 = () => { return ( - - - - - - - - - - - - - - - - - - - + + {[...Array(6)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo3.tsx b/src/packages/grid/demos/taro/demo3.tsx index 080bd8bb83..6c98d51a63 100644 --- a/src/packages/grid/demos/taro/demo3.tsx +++ b/src/packages/grid/demos/taro/demo3.tsx @@ -3,17 +3,22 @@ import { Grid } from '@nutui/nutui-react-taro' import { Image } from '@nutui/icons-react-taro' const Demo3 = () => { + const customTheme = { + nutuiGridBorderWidth: '1px', + } return ( - - - - - - - - - - + + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo4.tsx b/src/packages/grid/demos/taro/demo4.tsx index 58cda619c7..8d8329b21a 100644 --- a/src/packages/grid/demos/taro/demo4.tsx +++ b/src/packages/grid/demos/taro/demo4.tsx @@ -5,30 +5,11 @@ import { Image } from '@nutui/icons-react-taro' const Demo4 = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + {[...Array(8)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo5.tsx b/src/packages/grid/demos/taro/demo5.tsx index 42de9da90a..ec59733ab3 100644 --- a/src/packages/grid/demos/taro/demo5.tsx +++ b/src/packages/grid/demos/taro/demo5.tsx @@ -7,18 +7,11 @@ const Demo5 = () => { const style = { height: pxTransform(100) } return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo6.tsx b/src/packages/grid/demos/taro/demo6.tsx index 32c4dfab80..ced786525b 100644 --- a/src/packages/grid/demos/taro/demo6.tsx +++ b/src/packages/grid/demos/taro/demo6.tsx @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react-taro' const Demo6 = () => { return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo7.tsx b/src/packages/grid/demos/taro/demo7.tsx index 1f9033df8f..48440b0621 100644 --- a/src/packages/grid/demos/taro/demo7.tsx +++ b/src/packages/grid/demos/taro/demo7.tsx @@ -5,18 +5,11 @@ import { Image } from '@nutui/icons-react-taro' const Demo7 = () => { return ( - - - - - - - - - - - - + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/demos/taro/demo8.tsx b/src/packages/grid/demos/taro/demo8.tsx index 14422d87f6..945269de30 100644 --- a/src/packages/grid/demos/taro/demo8.tsx +++ b/src/packages/grid/demos/taro/demo8.tsx @@ -4,16 +4,7 @@ import { Image } from '@nutui/icons-react-taro' const Demo8 = () => { return ( - - - - - - - - - - + diff --git a/src/packages/grid/demos/taro/demo9.tsx b/src/packages/grid/demos/taro/demo9.tsx index 0b0b9d91e7..d631cf7296 100644 --- a/src/packages/grid/demos/taro/demo9.tsx +++ b/src/packages/grid/demos/taro/demo9.tsx @@ -11,16 +11,12 @@ const Demo9 = () => { const imgSrc = 'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png' return ( - - - - - - - - - - + + {[...Array(4)].map((_, index) => ( + + + + ))} ) } diff --git a/src/packages/grid/doc.en-US.md b/src/packages/grid/doc.en-US.md index c81f185fee..38bf0e99b3 100644 --- a/src/packages/grid/doc.en-US.md +++ b/src/packages/grid/doc.en-US.md @@ -26,7 +26,7 @@ import { Grid } from '@nutui/nutui-react' ::: -### Square +### Custom Grids :::demo @@ -97,9 +97,9 @@ import { Grid } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | | columns | Column Num | `number` \| `string` | `4` | -| gap | Gap. The default unit is `px` | `number` \| `string` | `0` | +| gap | Gap. The default unit is `px` | `number` \| `string` | `9` | | center | Whether to center content | `boolean` | `true` | -| square | Whether to be square shape | `boolean` | `false` | +| square | Whether to be square shape | `boolean` | `true` | | reverse | Whether to reverse the position of icon and text | `boolean` | `false` | | direction | Content arrangement direction | `horizontal` \| `vertical` | `vertical` | | onClick | Grid.Item Click Event | `(item: GridItem, index) => void` | `-` | @@ -121,7 +121,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-grid-border-color | border color | `#f5f6f7` | + + +| \--nutui-grid-border-width | Border width | `0` | +| \--nutui-grid-border-color | Border color | `$color-border` | +| \--nutui-grid-border-radius | Border radius | `$radius-l` | | \--nutui-grid-item-content-padding | padding | `16px 8px` | | \--nutui-grid-item-content-bg-color | background | `$white` | | \--nutui-grid-item-text-margin | margin | `8px` | diff --git a/src/packages/grid/doc.md b/src/packages/grid/doc.md index 544486550c..9168082ef1 100644 --- a/src/packages/grid/doc.md +++ b/src/packages/grid/doc.md @@ -26,7 +26,7 @@ import { Grid } from '@nutui/nutui-react' ::: -### 正方形格子 +### 自定义格子 :::demo @@ -97,9 +97,9 @@ import { Grid } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 列数 | `number` \| `string` | `4` | -| gap | 格子之间的间距，默认单位为`px` | `number` \| `string` | `0` | +| gap | 格子之间的间距，默认单位为`px` | `number` \| `string` | `9` | | center | 是否将格子内容居中显示 | `boolean` | `true` | -| square | 是否将格子固定为正方形 | `boolean` | `false` | +| square | 是否将格子固定为正方形 | `boolean` | `true` | | reverse | 内容翻转 | `boolean` | `false` | | direction | 格子内容排列的方向 | `horizontal` \| `vertical` | `vertical` | | onClick | 宫格子项点击事件 | `(index) => void` | `-` | @@ -121,7 +121,9 @@ import { Grid } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-grid-border-color | 边框颜色 | `#f5f6f7` | +| \--nutui-grid-border-width | 边框宽度 | `0` | +| \--nutui-grid-border-color | 边框颜色 | `$color-border` | +| \--nutui-grid-border-radius | 边框圆角大小 | `$radius-l` | | \--nutui-grid-item-content-padding | 内边距 | `16px 8px` | | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外边距 | `8px` | diff --git a/src/packages/grid/doc.taro.md b/src/packages/grid/doc.taro.md index 0fcb903aef..333487a2d1 100644 --- a/src/packages/grid/doc.taro.md +++ b/src/packages/grid/doc.taro.md @@ -26,7 +26,7 @@ import { Grid } from '@nutui/nutui-react-taro' ::: -### 正方形格子 +### 自定义格子 :::demo @@ -97,9 +97,9 @@ import { Grid } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 列数 | `number` \| `string` | `4` | -| gap | 格子之间的间距，默认单位为`px` | `number` \| `string` | `0` | +| gap | 格子之间的间距，默认单位为`px` | `number` \| `string` | `9` | | center | 是否将格子内容居中显示 | `boolean` | `true` | -| square | 是否将格子固定为正方形 | `boolean` | `false` | +| square | 是否将格子固定为正方形 | `boolean` | `true` | | reverse | 内容翻转 | `boolean` | `false` | | direction | 格子内容排列的方向 | `horizontal` \| `vertical` | `vertical` | | onClick | 宫格子项点击事件 | `(index) => void` | `-` | @@ -121,7 +121,9 @@ import { Grid } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-grid-border-color | 边框颜色 | `#f5f6f7` | +| \--nutui-grid-border-width | 边框宽度 | `0` | +| \--nutui-grid-border-color | 边框颜色 | `$color-border` | +| \--nutui-grid-border-radius | 边框圆角大小 | `$radius-l` | | \--nutui-grid-item-content-padding | 内边距 | `16px 8px` | | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外边距 | `8px` | diff --git a/src/packages/grid/doc.zh-TW.md b/src/packages/grid/doc.zh-TW.md index 8f1ffd784e..3b6e275568 100644 --- a/src/packages/grid/doc.zh-TW.md +++ b/src/packages/grid/doc.zh-TW.md @@ -26,7 +26,7 @@ import { Grid } from '@nutui/nutui-react' ::: -### 正方形格子 +### 自定義格子 :::demo @@ -97,9 +97,9 @@ import { Grid } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | columns | 列數 | `number` \| `string` | `4` | -| gap | 格子之間的間距，默認單位為`px` | `number` \| `string` | `0` | +| gap | 格子之間的間距，默認單位為`px` | `number` \| `string` | `9` | | center | 是否將格子內容居中顯示 | `boolean` | `true` | -| square | 是否將格子固定為正方形 | `boolean` | `false` | +| square | 是否將格子固定為正方形 | `boolean` | `true` | | reverse | 內容翻轉 | `boolean` | `false` | | direction | 格子內容排列的方向 | `horizontal` \| `vertical` | `vertical` | | onClick | 宮格子項點擊事件 | `(index) => void` | `-` | @@ -121,7 +121,9 @@ import { Grid } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-grid-border-color | 邊框顏色 | `#f5f6f7` | +| \--nutui-grid-border-width | 邊框寬度 | `0` | +| \--nutui-grid-border-color | 邊框顏色 | `$color-border` | +| \--nutui-grid-border-radius | 邊框圓角大小 | `$radius-l` | | \--nutui-grid-item-content-padding | 內邊距 | `16px 8px` | | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外邊距 | `8px` | diff --git a/src/packages/grid/grid.scss b/src/packages/grid/grid.scss index bb59b3e2fe..92d9a1b268 100644 --- a/src/packages/grid/grid.scss +++ b/src/packages/grid/grid.scss @@ -8,8 +8,8 @@ border: 0 solid $grid-border-color; &-border { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: $grid-border-width; + border-left-width: $grid-border-width; } } diff --git a/src/packages/grid/grid.taro.tsx b/src/packages/grid/grid.taro.tsx index 5f6ab1b3e8..043a9abfce 100644 --- a/src/packages/grid/grid.taro.tsx +++ b/src/packages/grid/grid.taro.tsx @@ -3,7 +3,6 @@ import classNames from 'classnames' import { View } from '@tarojs/components' import GridContext from './context' import { GridItem, GridItemProps } from '../griditem/griditem.taro' -import { pxCheck } from '@/utils/px-check' export type GridDirection = 'horizontal' | 'vertical' @@ -21,9 +20,9 @@ export interface GridProps { const defaultProps = { columns: 4, - gap: 0, + gap: 9, center: true, - square: false, + square: true, reverse: false, direction: 'vertical', } as GridProps @@ -65,10 +64,6 @@ export const Grid: FunctionComponent< if (style) { styleSelf = style } - if (gap) { - styleSelf.paddingLeft = pxCheck(gap) - } - return styleSelf } diff --git a/src/packages/grid/grid.tsx b/src/packages/grid/grid.tsx index 165eef1fc2..ec616bf152 100644 --- a/src/packages/grid/grid.tsx +++ b/src/packages/grid/grid.tsx @@ -2,7 +2,6 @@ import React, { CSSProperties, FunctionComponent } from 'react' import classNames from 'classnames' import { GridItem, GridItemProps } from '../griditem/griditem' import GridContext from './context' -import { pxCheck } from '@/utils/px-check' export type GridDirection = 'horizontal' | 'vertical' @@ -20,9 +19,9 @@ export interface GridProps { const defaultProps = { columns: 4, - gap: 0, + gap: 9, center: true, - square: false, + square: true, reverse: false, direction: 'vertical', } as GridProps @@ -64,10 +63,6 @@ export const Grid: FunctionComponent< if (style) { styleSelf = style } - if (gap) { - styleSelf.paddingLeft = pxCheck(gap) - } - return styleSelf } diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss index e1834f66e5..ee1df14ec0 100644 --- a/src/packages/griditem/griditem.scss +++ b/src/packages/griditem/griditem.scss @@ -4,6 +4,7 @@ position: relative; box-sizing: border-box; color: $grid-item-text-color; + overflow: hidden; &-text { color: $grid-item-text-color; @@ -35,13 +36,14 @@ border: 0 solid $grid-border-color; &-border { - border-right-width: 1px; - border-bottom-width: 1px; + border-right-width: $grid-border-width; + border-bottom-width: $grid-border-width; } &-surround { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: $grid-border-width; + border-left-width: $grid-border-width; + border-radius: $grid-item-border-radius; } &-center { diff --git a/src/packages/griditem/griditem.taro.tsx b/src/packages/griditem/griditem.taro.tsx index 66a1251e18..65243ea2a3 100644 --- a/src/packages/griditem/griditem.taro.tsx +++ b/src/packages/griditem/griditem.taro.tsx @@ -26,9 +26,9 @@ export interface GridItemProps extends BasicComponent { const defaultProps = { text: '', columns: 4, - gap: 0, + gap: 9, center: true, - square: false, + square: true, reverse: false, direction: 'vertical', } as GridItemProps @@ -58,23 +58,29 @@ export const GridItem: FunctionComponent< const context = useContext(GridContext) const rootStyle = () => { + const width = `calc(${100 / Number(columns)}% - ${pxTransform((Number(gap) * (Number(columns) - 1)) / Number(columns))})` const styles: CSSProperties = { - width: `${100 / +columns}%`, + width, overflow: 'hidden', ...style, } if (square) { - styles.paddingTop = `${100 / +columns}%` - } else if (gap) { - styles.paddingRight = pxTransform( - typeof gap === 'number' ? gap : parseFloat(gap) - ) + styles.paddingTop = width + } + if (gap) { + if ((index + 1) % Number(columns)) { + styles.marginRight = pxTransform( + typeof gap === 'number' ? gap : parseFloat(gap) + ) + } if (index >= Number(columns)) { styles.marginTop = pxTransform( typeof gap === 'number' ? gap : parseFloat(gap) ) } + } else { + styles.borderRadius = 0 } return styles @@ -131,5 +137,4 @@ export const GridItem: FunctionComponent< ) } - GridItem.displayName = 'NutGridItem' diff --git a/src/packages/griditem/griditem.tsx b/src/packages/griditem/griditem.tsx index 534505f2ef..80c534d1d6 100644 --- a/src/packages/griditem/griditem.tsx +++ b/src/packages/griditem/griditem.tsx @@ -25,9 +25,9 @@ export interface GridItemProps extends BasicComponent { const defaultProps = { text: '', columns: 4, - gap: 0, + gap: 9, center: true, - square: false, + square: true, reverse: false, direction: 'vertical', } as GridItemProps @@ -57,18 +57,25 @@ export const GridItem: FunctionComponent< const context = useContext(GridContext) const rootStyle = () => { + const width = `calc((100% - ${Number(gap) * (Number(columns) - 1)}px) / ${Number(columns)})` const styles: CSSProperties = { - flexBasis: `${100 / +columns}%`, + flexBasis: width, ...style, } if (square) { - styles.paddingTop = `${100 / +columns}%` - } else if (gap) { - styles.paddingRight = pxCheck(gap) + styles.paddingTop = width + } + if (gap) { + if ((index + 1) % Number(columns)) { + styles.marginRight = pxCheck(gap) + } + if (index >= Number(columns)) { styles.marginTop = pxCheck(gap) } + } else { + styles.borderRadius = 0 } return styles diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e00ca3545b..9f897fd8af 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2068,7 +2068,12 @@ $skeleton-line-border-radius: var( $card-border-radius: var(--nutui-card-border-radius, 4px) !default; // grid（✅） +$grid-border-width: var(--nutui-grid-border-width, 0px) !default; $grid-border-color: var(--nutui-grid-border-color, $color-border) !default; +$grid-item-border-radius: var( + --nutui-grid-item-border-radius, + $radius-l +) !default; $grid-item-content-padding: var( --nutui-grid-item-content-padding, 16px 8px