mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: support flex responsive

Browse Source
This commit is contained in:
二货机器人 2024-01-23 20:43:55 +08:00
parent 4e12c3eca9
commit 7d6aed50c0
7 changed files with 149 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1387,6 +1387,75 @@ exports[`renders components/grid/demo/responsive.tsx extend context correctly 1`
exports[`renders components/grid/demo/responsive.tsx extend context correctly 2`] = `[]`;
exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
>
Col
</div>
</div>
`;
exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 2`] = `[]`;
exports[`renders components/grid/demo/responsive-more.tsx extend context correctly 1`] = `
<div
class="ant-row"

67
components/grid/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1312,6 +1312,73 @@ exports[`renders components/grid/demo/responsive.tsx correctly 1`] = `
</div>
`;
exports[`renders components/grid/demo/responsive-flex.tsx correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
</div>
`;
exports[`renders components/grid/demo/responsive-more.tsx correctly 1`] = `
<div
class="ant-row"

3
components/grid/col.tsx
View File

@ -73,7 +73,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
// ===================== Size ======================
const sizeStyle: Record<string, string> = {};
let sizeClassObj = {};
let sizeClassObj: Record<string, boolean | ColSpanType> = {};
sizes.forEach((size) => {
let sizeProps: ColSize = {};
const propSize = props[size];
@ -98,6 +98,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
// Responsive flex layout
if (sizeProps.flex) {
sizeClassObj[`${prefixCls}-${size}-flex`] = true;
sizeStyle[`--${prefixCls}-${size}-flex`] = parseFlex(sizeProps.flex);
}
});

4
components/grid/demo/responsive-flex.md
View File

@ -1,7 +1,7 @@
## zh-CN
支持响应式下的任意 flex 比例，该功能需要浏览器支持 CSS Variables。
支持更灵活的响应式下的任意 flex 比例，该功能需要浏览器支持 CSS Variables。
## en-US
Support flex ratio in any responsive, this feature requires browser support CSS Variables.
Support much more flexible responsive flex ratio, which requires CSS Variables supported by browser.

1
components/grid/index.en-US.md
View File

@ -45,6 +45,7 @@ Layout uses a 24 grid layout to define the width of each "box", but does not rig
<code src="./demo/flex-order.tsx">Order</code>
<code src="./demo/flex-stretch.tsx">Flex Stretch</code>
<code src="./demo/responsive.tsx">Responsive</code>
<code src="./demo/responsive-flex.tsx" version="5.14.0">Flex Responsive</code>
<code src="./demo/responsive-more.tsx">More responsive</code>
<code src="./demo/playground.tsx">Playground</code>
<code src="./demo/useBreakpoint.tsx">useBreakpoint Hook</code>

1
components/grid/index.zh-CN.md
View File

@ -44,6 +44,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
<code src="./demo/flex-order.tsx">排序</code>
<code src="./demo/flex-stretch.tsx">Flex 填充</code>
<code src="./demo/responsive.tsx">响应式布局</code>
<code src="./demo/responsive-flex.tsx" version="5.14.0">Flex 响应式布局</code>
<code src="./demo/responsive-more.tsx">其他属性的响应式</code>
<code src="./demo/playground.tsx">栅格配置器</code>
<code src="./demo/useBreakpoint.tsx">useBreakpoint Hook</code>

9
components/grid/style/index.ts
View File

@ -1,4 +1,4 @@
import { type CSSObject, unit } from '@ant-design/cssinjs';
import { unit, type CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
@ -94,7 +94,7 @@ const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
};
const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => {
const { componentCls, gridColumns } = token;
const { prefixCls, componentCls, gridColumns } = token;
const gridColumnsStyle: CSSObject = {};
for (let i = gridColumns; i >= 0; i--) {
@ -151,6 +151,11 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
}
}
// Flex CSS Var
gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = {
flex: `var(--${prefixCls}${sizeCls}-flex)`,
};
return gridColumnsStyle;
};