From 8562427674729784a8b295bb0baabf83c996aa85 Mon Sep 17 00:00:00 2001 From: paul <34345790@qq.com> Date: Mon, 21 Mar 2022 09:49:21 +0800 Subject: [PATCH] feat(row): add support for space-evenly (#34606) * feat(row): add support for space-evenly * docs: update demo snapshot. Co-authored-by: gp5251 --- .../__snapshots__/demo-extend.test.ts.snap | 34 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 34 +++++++++++++++++++ components/grid/demo/flex.md | 12 +++++-- components/grid/index.en-US.md | 2 +- components/grid/index.zh-CN.md | 2 +- components/grid/row.tsx | 2 +- components/grid/style/index.less | 5 +++ 7 files changed, 86 insertions(+), 5 deletions(-) diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap index 902f65cfd5..441f59fc6e 100644 --- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -243,6 +243,40 @@ Array [ col-4 , + , +
+
+ col-4 +
+
+ col-4 +
+
+ col-4 +
+
+ col-4 +
+
, ] `; diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap index 4e9428a144..de51051625 100644 --- a/components/grid/__tests__/__snapshots__/demo.test.js.snap +++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap @@ -243,6 +243,40 @@ Array [ col-4 , + , +
+
+ col-4 +
+
+ col-4 +
+
+ col-4 +
+
+ col-4 +
+
, ] `; diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md index 422916fcc9..4e3f6caedb 100644 --- a/components/grid/demo/flex.md +++ b/components/grid/demo/flex.md @@ -9,11 +9,11 @@ title: 布局基础。 -子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 +子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`，分别定义其在父节点里面的排版方式。 ## en-US -Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode. +Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode. ```jsx import { Row, Col, Divider } from 'antd'; @@ -59,6 +59,14 @@ ReactDOM.render( col-4 col-4 + + sub-element align evenly + + col-4 + col-4 + col-4 + col-4 + , mountNode, ); diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index d7644285ef..7192292433 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th | --- | --- | --- | --- | --- | | align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | | | gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | | -| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | | | wrap | Auto wrap line | boolean | true | 4.8.0 | ### Col diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 58b83047ca..b20ac449b8 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 | --- | --- | --- | --- | --- | | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | | | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | | -| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | +| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | | | wrap | 是否自动换行 | boolean | true | 4.8.0 | ### Col diff --git a/components/grid/row.tsx b/components/grid/row.tsx index c154f50489..b5cc2a5939 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -11,7 +11,7 @@ import ResponsiveObserve, { import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; const RowAligns = tuple('top', 'middle', 'bottom', 'stretch'); -const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between'); +const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'); export type Gutter = number | Partial>; export interface RowProps extends React.HTMLAttributes { diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 1369f0035c..3dcb534789 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -43,6 +43,11 @@ justify-content: space-around; } +// x轴有间隔地均分 +.@{row-prefix-cls}-space-evenly { + justify-content: space-evenly; +} + // 顶部对齐 .@{row-prefix-cls}-top { align-items: flex-start;