diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index bc891c555..eb247b46c 100644 --- a/components/grid/Col.tsx +++ b/components/grid/Col.tsx @@ -141,7 +141,7 @@ export default defineComponent({ }); return () => { return ( -
+
{slots.default?.()}
); diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx index 8b26150ce..26bd288ba 100644 --- a/components/grid/Row.tsx +++ b/components/grid/Row.tsx @@ -9,9 +9,10 @@ import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import useProvideRow from './context'; 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>; +type Gap = number | undefined; +export type Gutter = number | undefined | Partial>; export interface rowContextState { gutter?: [number, number]; @@ -68,9 +69,9 @@ const ARow = defineComponent({ }); const gutter = computed(() => { - const results: [number, number] = [0, 0]; + const results: [Gap, Gap] = [undefined, undefined]; const { gutter = 0 } = props; - const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0]; + const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined]; normalizedGutter.forEach((g, index) => { if (typeof g === 'object') { for (let i = 0; i < responsiveArray.length; i++) { @@ -81,7 +82,7 @@ const ARow = defineComponent({ } } } else { - results[index] = g || 0; + results[index] = g; } }); return results; @@ -106,8 +107,8 @@ const ARow = defineComponent({ const gt = gutter.value; // Add gutter related style const style: CSSProperties = {}; - const horizontalGutter = gt[0] > 0 ? `${gt[0] / -2}px` : undefined; - const verticalGutter = gt[1] > 0 ? `${gt[1] / -2}px` : undefined; + const horizontalGutter = gt[0] != null && gt[0] > 0 ? `${gt[0] / -2}px` : undefined; + const verticalGutter = gt[1] != null && gt[1] > 0 ? `${gt[1] / -2}px` : undefined; if (horizontalGutter) { style.marginLeft = horizontalGutter; @@ -126,7 +127,7 @@ const ARow = defineComponent({ return () => { return ( -
+
{slots.default?.()}
); diff --git a/components/grid/demo/playfround.vue b/components/grid/demo/playfround.vue index 857a9e144..c04a38594 100644 --- a/components/grid/demo/playfround.vue +++ b/components/grid/demo/playfround.vue @@ -58,7 +58,6 @@ A simple playground for column count and gutter. >
Column
- diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index a35cb0b2b..af025c1cf 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -10,6 +10,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg ## Design concept +
+ grid design +
+ In most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections. We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit. @@ -37,7 +41,7 @@ Our grid systems support Flex layout to allow the elements within the parent to | --- | --- | --- | --- | | align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `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]` (supported after `1.5.0`) | number/object/array | 0 | -| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` | +| justify | horizontal arrangement of the flex layout: `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` | | wrap | Auto wrap line | boolean | false | ### Col diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 1a0564b3b..b66180875 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -11,6 +11,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg ## 设计理念 +
+ grid design +
+ 在多数业务情况下，Ant Design Vue 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 ## 概述 @@ -34,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg | --- | --- | --- | --- | | align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。 | number/object/array | 0 | -| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | +| justify | flex 布局下的水平排列方式： `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` | | wrap | 是否自动换行 | boolean | false | ### Col diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 1d999fd8f..eb6c07680 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -2,9 +2,6 @@ @import '../../style/mixins/index'; @import './mixin'; -@row-prefix-cls: ~'@{ant-prefix}-row'; -@col-prefix-cls: ~'@{ant-prefix}-col'; - // Grid system .@{row-prefix-cls} { display: flex; @@ -46,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; diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less index 4d9de4706..7182bf4e4 100644 --- a/components/grid/style/mixin.less +++ b/components/grid/style/mixin.less @@ -1,49 +1,52 @@ @import '../../style/mixins/index'; +@row-prefix-cls: ~'@{ant-prefix}-row'; +@col-prefix-cls: ~'@{ant-prefix}-col'; + // mixins for grid system // ------------------------ .loop-grid-columns(@index, @class) when (@index > 0) { - .@{ant-prefix}-col@{class}-@{index} { + .@{col-prefix-cls}@{class}-@{index} { display: block; flex: 0 0 percentage((@index / @grid-columns)); max-width: percentage((@index / @grid-columns)); } - .@{ant-prefix}-col@{class}-push-@{index} { + .@{col-prefix-cls}@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } - .@{ant-prefix}-col@{class}-pull-@{index} { + .@{col-prefix-cls}@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } - .@{ant-prefix}-col@{class}-offset-@{index} { + .@{col-prefix-cls}@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } - .@{ant-prefix}-col@{class}-order-@{index} { + .@{col-prefix-cls}@{class}-order-@{index} { order: @index; } .loop-grid-columns((@index - 1), @class); } .loop-grid-columns(@index, @class) when (@index = 0) { - .@{ant-prefix}-col@{class}-@{index} { + .@{col-prefix-cls}@{class}-@{index} { display: none; } - .@{ant-prefix}-col-push-@{index} { + .@{col-prefix-cls}-push-@{index} { left: auto; } - .@{ant-prefix}-col-pull-@{index} { + .@{col-prefix-cls}-pull-@{index} { right: auto; } - .@{ant-prefix}-col@{class}-push-@{index} { + .@{col-prefix-cls}@{class}-push-@{index} { left: auto; } - .@{ant-prefix}-col@{class}-pull-@{index} { + .@{col-prefix-cls}@{class}-pull-@{index} { right: auto; } - .@{ant-prefix}-col@{class}-offset-@{index} { + .@{col-prefix-cls}@{class}-offset-@{index} { margin-left: 0; } - .@{ant-prefix}-col@{class}-order-@{index} { + .@{col-prefix-cls}@{class}-order-@{index} { order: 0; } } diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less index 5a9e7256b..b098812bc 100644 --- a/components/grid/style/rtl.less +++ b/components/grid/style/rtl.less @@ -1,7 +1,8 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; +@import './mixin'; -.@{ant-prefix}-row { +.@{row-prefix-cls} { &-rtl { direction: rtl; } @@ -9,25 +10,25 @@ // mixin .loop-grid-columns(@index, @class) when (@index > 0) { - .@{ant-prefix}-col@{class}-push-@{index} { + .@{col-prefix-cls}@{class}-push-@{index} { // reset property in RTL direction - &.@{ant-prefix}-col-rtl { + &.@{col-prefix-cls}-rtl { right: percentage((@index / @grid-columns)); left: auto; } } - .@{ant-prefix}-col@{class}-pull-@{index} { + .@{col-prefix-cls}@{class}-pull-@{index} { // reset property in RTL direction - &.@{ant-prefix}-col-rtl { + &.@{col-prefix-cls}-rtl { right: auto; left: percentage((@index / @grid-columns)); } } - .@{ant-prefix}-col@{class}-offset-@{index} { + .@{col-prefix-cls}@{class}-offset-@{index} { // reset property in RTL direction - &.@{ant-prefix}-col-rtl { + &.@{col-prefix-cls}-rtl { margin-right: percentage((@index / @grid-columns)); margin-left: 0; } @@ -35,33 +36,33 @@ } .loop-grid-columns(@index, @class) when (@index = 0) { - .@{ant-prefix}-col-push-@{index} { + .@{col-prefix-cls}-push-@{index} { // reset property in RTL direction - &.@{ant-prefix}-col-rtl { + &.@{col-prefix-cls}-rtl { right: auto; } } - .@{ant-prefix}-col-pull-@{index} { - &.@{ant-prefix}-col-rtl { + .@{col-prefix-cls}-pull-@{index} { + &.@{col-prefix-cls}-rtl { left: auto; } } - .@{ant-prefix}-col@{class}-push-@{index} { - &.@{ant-prefix}-col-rtl { + .@{col-prefix-cls}@{class}-push-@{index} { + &.@{col-prefix-cls}-rtl { right: auto; } } - .@{ant-prefix}-col@{class}-pull-@{index} { - &.@{ant-prefix}-col-rtl { + .@{col-prefix-cls}@{class}-pull-@{index} { + &.@{col-prefix-cls}-rtl { left: auto; } } - .@{ant-prefix}-col@{class}-offset-@{index} { - &.@{ant-prefix}-col-rtl { + .@{col-prefix-cls}@{class}-offset-@{index} { + &.@{col-prefix-cls}-rtl { margin-right: 0; } }