From f44ec04609d78c36cd0f01466a197941a34cf27e Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Wed, 4 Feb 2026 00:01:55 +0800 Subject: [PATCH] feat(Grid): add xxxl (1920px) breakpoint for FHD screen (#56825) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(Grid): add xxxl (1840px) breakpoint for FHD screen * feat: update xxxl breakpoint from 1840px to 1920px for layout and list components * feat(Grid): update xxxl breakpoint from 2000px to 1920px for responsive layout * fix(Grid): 修正栅格间隔描述中的拼写错误 * feat(Grid): reverse * test(Form): update grid * size limit --------- Co-authored-by: thinkasany <480968828@qq.com> --- components/_util/responsiveObserver.ts | 7 +++-- components/avatar/Avatar.tsx | 2 +- components/descriptions/constant.ts | 1 + components/form/FormItemInput.tsx | 3 ++- components/form/__tests__/index.test.tsx | 9 ++++--- components/grid/__tests__/index.test.tsx | 1 + components/grid/col.tsx | 5 ++-- components/grid/demo/responsive.md | 4 +-- components/grid/hooks/useGutter.ts | 1 + components/grid/index.en-US.md | 7 ++--- components/grid/index.zh-CN.md | 7 ++--- components/grid/row.tsx | 4 +-- components/layout/Sider.tsx | 6 +++-- components/layout/index.en-US.md | 33 ++++++++++++------------ components/layout/index.zh-CN.md | 33 ++++++++++++------------ components/list/index.en-US.md | 1 + components/list/index.tsx | 6 +++-- components/list/index.zh-CN.md | 21 ++++++++------- components/theme/interface/alias.ts | 21 +++++++++++++++ components/theme/util/alias.ts | 4 +++ package.json | 2 +- 21 files changed, 109 insertions(+), 69 deletions(-) diff --git a/components/_util/responsiveObserver.ts b/components/_util/responsiveObserver.ts index 8bc599f61b..f3c34706c1 100644 --- a/components/_util/responsiveObserver.ts +++ b/components/_util/responsiveObserver.ts @@ -3,12 +3,14 @@ import React from 'react'; import type { GlobalToken } from '../theme/internal'; import { useToken } from '../theme/internal'; -export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; +export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const; +export const responsiveArrayReversed = [...responsiveArray].reverse(); + +export type Breakpoint = (typeof responsiveArray)[number]; export type BreakpointMap = Record; export type ScreenMap = Partial>; export type ScreenSizeMap = Partial>; -export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs']; type SubscribeFunc = (screens: ScreenMap) => void; const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({ @@ -18,6 +20,7 @@ const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({ lg: `(min-width: ${token.screenLG}px)`, xl: `(min-width: ${token.screenXL}px)`, xxl: `(min-width: ${token.screenXXL}px)`, + xxxl: `(min-width: ${token.screenXXXL}px)`, }); /** diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx index 2decbffd9a..1a463e230a 100644 --- a/components/avatar/Avatar.tsx +++ b/components/avatar/Avatar.tsx @@ -114,7 +114,7 @@ const Avatar = React.forwardRef((props, ref) => { const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'medium'); const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) => - ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key), + responsiveArray.includes(key as Breakpoint), ); const screens = useBreakpoint(needResponsive); const responsiveSizeStyle = React.useMemo(() => { diff --git a/components/descriptions/constant.ts b/components/descriptions/constant.ts index a42d33092d..cd60083fe7 100644 --- a/components/descriptions/constant.ts +++ b/components/descriptions/constant.ts @@ -1,6 +1,7 @@ import type { Breakpoint } from '../_util/responsiveObserver'; const DEFAULT_COLUMN_MAP: Record = { + xxxl: 4, xxl: 3, xl: 3, lg: 3, diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx index f9bdb59d3c..09b08fdbab 100644 --- a/components/form/FormItemInput.tsx +++ b/components/form/FormItemInput.tsx @@ -4,6 +4,7 @@ import { get, set } from '@rc-component/util'; import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; import { clsx } from 'clsx'; +import { responsiveArrayReversed } from '../_util/responsiveObserver'; import type { ColProps } from '../grid/col'; import Col from '../grid/col'; import { FormContext, FormItemPrefixContext } from './context'; @@ -68,7 +69,7 @@ const FormItemInput: React.FC = (pr const mergedWrapperCol = React.useMemo(() => { let mergedWrapper: ColProps = { ...(wrapperCol || formContext.wrapperCol || {}) }; if (label === null && !labelCol && !wrapperCol && formContext.labelCol) { - const list = [undefined, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; + const list = [undefined, ...responsiveArrayReversed] as const; list.forEach((size) => { const _size = size ? [size] : []; diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 78eeb299ff..1cc1024f99 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1,6 +1,7 @@ import type { ChangeEventHandler } from 'react'; import React, { version as ReactVersion, useEffect, useRef, useState } from 'react'; import { AlertFilled } from '@ant-design/icons'; +import { responsiveArrayReversed } from 'antd/es/_util/responsiveObserver'; import type { ColProps } from 'antd/es/grid'; import { clsx } from 'clsx'; import scrollIntoView from 'scroll-into-view-if-needed'; @@ -23,12 +24,12 @@ import type { InputProps } from '../../input'; import InputNumber from '../../input-number'; import zhCN from '../../locale/zh_CN'; import Modal from '../../modal'; +import Popover from '../../popover'; import Radio from '../../radio'; +import Segmented from '../../segmented'; import Select from '../../select'; import Slider from '../../slider'; import Switch from '../../switch'; -import Popover from '../../popover'; -import Segmented from '../../segmented'; import TreeSelect from '../../tree-select'; import Upload from '../../upload'; import type { NamePath } from '../interface'; @@ -1442,7 +1443,7 @@ describe('Form', () => { expect(twoItem).toHaveClass('ant-col-14 ant-col-offset-4'); // more size - const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; + const list = responsiveArrayReversed; list.forEach((size) => { const { container } = render(
@@ -1491,7 +1492,7 @@ describe('Form', () => { expect(twoItem?.className.includes('offset')).toBeFalsy(); // more size - const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; + const list = responsiveArrayReversed; list.forEach((size) => { const { container } = render( diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx index 52d47dd8aa..d2f41b6892 100644 --- a/components/grid/__tests__/index.test.tsx +++ b/components/grid/__tests__/index.test.tsx @@ -168,6 +168,7 @@ describe('Grid', () => { lg: false, xl: false, xxl: false, + xxxl: false, }); }); diff --git a/components/grid/col.tsx b/components/grid/col.tsx index e7377c45fa..87a35e4bda 100644 --- a/components/grid/col.tsx +++ b/components/grid/col.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { clsx } from 'clsx'; +import { responsiveArrayReversed } from '../_util/responsiveObserver'; import type { Breakpoint } from '../_util/responsiveObserver'; import type { LiteralUnion } from '../_util/type'; import { ConfigContext } from '../config-provider'; @@ -54,8 +55,6 @@ function parseFlex(flex: FlexType): string { return flex; } -const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; - const Col = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const { gutter, wrap } = React.useContext(RowContext); @@ -85,7 +84,7 @@ const Col = React.forwardRef((props, ref) => { const sizeStyle: Record = {}; let sizeClassObj: Record = {}; - sizes.forEach((size) => { + responsiveArrayReversed.forEach((size) => { let sizeProps: ColSize = {}; const propSize = props[size]; if (typeof propSize === 'number') { diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md index c284a628b1..208aaeaea2 100644 --- a/components/grid/demo/responsive.md +++ b/components/grid/demo/responsive.md @@ -1,7 +1,7 @@ ## zh-CN -参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。 +参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设七个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`。 ## en-US -Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl` `xxl`. +Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset seven dimensions: `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`. diff --git a/components/grid/hooks/useGutter.ts b/components/grid/hooks/useGutter.ts index b9dc65ab66..b9e69ad648 100644 --- a/components/grid/hooks/useGutter.ts +++ b/components/grid/hooks/useGutter.ts @@ -19,6 +19,7 @@ export default function useGutter( lg: true, xl: true, xxl: true, + xxxl: true, }; normalizedGutter.forEach((g, index) => { diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 78b1a84172..f80a5ed58a 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -62,9 +62,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | +| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | | gutter | Spacing between grids, could be a [string CSS units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) 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 \| string \| object \| array | 0 | string: 5.28.0 | -| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | | wrap | Auto wrap line | boolean | true | 4.8.0 | ### Col @@ -83,8 +83,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th | lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - | | | xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - | | | xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - | | +| xxxl | `screen ≥ 1920px`, could be a `span` value or an object containing above props | number \| object | - | 6.3.0 | -You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)). +You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL|XXXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)). The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`). diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index faba2a1ef8..eff1fb522c 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -61,9 +61,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | +| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | | gutter | 栅格间隔，可以写成[字符串CSS单位](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units)或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| string \| object \| array | 0 | string: 5.28.0 | -| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | +| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | | wrap | 是否自动换行 | boolean | true | 4.8.0 | ### Col @@ -82,8 +82,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 | lg | `窗口宽度 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | | xl | `窗口宽度 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | | xxl | `窗口宽度 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| xxxl | `窗口宽度 ≥ 1920px` 响应式栈格，可为栈格数或一个包含其他属性的对象 | number \| object | - | 6.3.0 | -您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。 +您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL|XXXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 diff --git a/components/grid/row.tsx b/components/grid/row.tsx index 2aa84ac18c..c27ce25f44 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -20,10 +20,8 @@ const _RowJustify = [ 'space-evenly', ] as const; -type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; - type ResponsiveLike = { - [key in Responsive]?: T; + [key in Breakpoint]?: T; }; export type Gutter = number | string | undefined | Partial>; diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index 1163e71bb6..30bd93bca4 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -6,17 +6,19 @@ import RightOutlined from '@ant-design/icons/RightOutlined'; import { omit } from '@rc-component/util'; import { clsx } from 'clsx'; +import type { Breakpoint } from '../_util/responsiveObserver'; import { ConfigContext } from '../config-provider'; import { LayoutContext } from './context'; import useStyle from './style/sider'; -const dimensionMaxMap = { +const dimensionMaxMap: Record = { xs: '479.98px', sm: '575.98px', md: '767.98px', lg: '991.98px', xl: '1199.98px', xxl: '1599.98px', + xxxl: `1839.98px`, }; const isNumeric = (val: any) => @@ -43,7 +45,7 @@ export interface SiderProps extends React.HTMLAttributes { trigger?: React.ReactNode; width?: number | string; collapsedWidth?: number | string; - breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; + breakpoint?: Breakpoint; theme?: SiderTheme; onBreakpoint?: (broken: boolean) => void; } diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index 8fdd60d3eb..cffe47b470 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -100,22 +100,22 @@ The wrapper. The sidebar. -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| breakpoint | [Breakpoints](/components/grid/#col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - | -| className | Container className | string | - | -| collapsed | To set the current status | boolean | - | -| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 | -| collapsible | Whether can be collapsed | boolean | false | -| defaultCollapsed | To set the initial status | boolean | false | -| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false | -| style | To customize the styles | CSSProperties | - | -| theme | Color theme of the sidebar | `light` \| `dark` | `dark` | -| trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - | -| width | Width of the sidebar | number \| string | 200 | -| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | -| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#api) changed | (broken) => {} | - | -| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| breakpoint | [Breakpoints](/components/grid/#col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` | - | xxxl: 6.3.0 | +| className | Container className | string | - | | +| collapsed | To set the current status | boolean | - | | +| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 | | +| collapsible | Whether can be collapsed | boolean | false | | +| defaultCollapsed | To set the initial status | boolean | false | | +| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false | | +| style | To customize the styles | CSSProperties | - | | +| theme | Color theme of the sidebar | `light` \| `dark` | `dark` | | +| trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - | | +| width | Width of the sidebar | number \| string | 200 | | +| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | | +| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#api) changed | (broken) => {} | - | | +| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | | #### breakpoint width @@ -127,6 +127,7 @@ The sidebar. lg: '992px', xl: '1200px', xxl: '1600px', + xxxl: '1920px', } ``` diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index be293cecca..8d6aa108b5 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -101,22 +101,22 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA 侧边栏。 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| breakpoint | 触发响应式布局的[断点](/components/grid-cn#col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - | -| className | 容器 className | string | - | -| collapsed | 当前收起状态 | boolean | - | -| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | -| collapsible | 是否可收起 | boolean | false | -| defaultCollapsed | 是否默认收起 | boolean | false | -| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | -| style | 指定样式 | CSSProperties | - | -| theme | 主题颜色 | `light` \| `dark` | `dark` | -| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - | -| width | 宽度 | number \| string | 200 | -| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | -| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#api)时的回调 | (broken) => {} | - | -| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| breakpoint | 触发响应式布局的[断点](/components/grid-cn#col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` | - | xxxl: 6.3.0 | +| className | 容器 className | string | - | | +| collapsed | 当前收起状态 | boolean | - | | +| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | | +| collapsible | 是否可收起 | boolean | false | | +| defaultCollapsed | 是否默认收起 | boolean | false | | +| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | | +| style | 指定样式 | CSSProperties | - | | +| theme | 主题颜色 | `light` \| `dark` | `dark` | | +| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - | | +| width | 宽度 | number \| string | 200 | | +| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | | +| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#api)时的回调 | (broken) => {} | - | | +| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | | #### breakpoint width @@ -128,6 +128,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA lg: '992px', xl: '1200px', xxl: '1600px', + xxxl: '1920px', } ``` diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 9ba3e28f67..ba9ecc60e6 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -82,6 +82,7 @@ More about pagination, please check [`Pagination`](/components/pagination/). | lg | `≥992px` column of grid | number | - | | | xl | `≥1200px` column of grid | number | - | | | xxl | `≥1600px` column of grid | number | - | | +| xxxl | `≥1920px` column of grid | number | - | 6.3.0 | ### List.Item diff --git a/components/list/index.tsx b/components/list/index.tsx index 1d1b1a7bd0..e17d41214c 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -3,6 +3,7 @@ import { clsx } from 'clsx'; import extendsObject from '../_util/extendsObject'; import { responsiveArray } from '../_util/responsiveObserver'; +import type { Breakpoint } from '../_util/responsiveObserver'; import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; import { useComponentConfig } from '../config-provider/context'; @@ -30,7 +31,7 @@ export type { export type ColumnCount = number; -export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; +export type ColumnType = 'gutter' | 'column' | Breakpoint; export interface ListGridType { gutter?: RowProps['gutter']; @@ -41,6 +42,7 @@ export interface ListGridType { lg?: ColumnCount; xl?: ColumnCount; xxl?: ColumnCount; + xxxl?: ColumnCount; } export type ListSize = 'small' | 'default' | 'large'; @@ -241,7 +243,7 @@ const InternalList = (props: ListProps, ref: React.ForwardedRef - ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key), + responsiveArray.includes(key as Breakpoint), ); const screens = useBreakpoint(needResponsive); const currentBreakpoint = React.useMemo(() => { diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index c989578360..870c36d245 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -75,16 +75,17 @@ List 组件已经进入废弃阶段，将于下个 major 版本移除。 ### List grid props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------ | -------------------- | ------ | ------ | ---- | -| column | 列数 | number | - | | -| gutter | 栅格间隔 | number | 0 | | -| xs | `<576px` 展示的列数 | number | - | | -| sm | `≥576px` 展示的列数 | number | - | | -| md | `≥768px` 展示的列数 | number | - | | -| lg | `≥992px` 展示的列数 | number | - | | -| xl | `≥1200px` 展示的列数 | number | - | | -| xxl | `≥1600px` 展示的列数 | number | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ------ | -------------------- | ------ | ------ | ----- | +| column | 列数 | number | - | | +| gutter | 栅格间隔 | number | 0 | | +| xs | `<576px` 展示的列数 | number | - | | +| sm | `≥576px` 展示的列数 | number | - | | +| md | `≥768px` 展示的列数 | number | - | | +| lg | `≥992px` 展示的列数 | number | - | | +| xl | `≥1200px` 展示的列数 | number | - | | +| xxl | `≥1600px` 展示的列数 | number | - | | +| xxxl | `≥1920px` 展示的列数 | number | - | 6.3.0 | ### List.Item diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts index 180a09d892..3e3e42a34c 100644 --- a/components/theme/interface/alias.ts +++ b/components/theme/interface/alias.ts @@ -579,6 +579,27 @@ export interface AliasToken extends MapToken { * @descEN Control the minimum width of extra extra large screens. */ screenXXLMin: number; + /** + * @nameZH 屏幕宽度（像素） - 超超大屏幕最大值 + * @nameEN Screen width (pixels) - Extra extra large screens maximum value + * @desc 控制超超大屏幕的最大宽度。 + * @descEN Control the maximum width of extra extra large screens. + */ + screenXXLMax: number; + /** + * @nameZH 屏幕宽度（像素） - 超超超大屏幕 + * @nameEN Screen width (pixels) - XXXL screens + * @desc 控制超超超大屏幕的屏幕宽度。 + * @descEN Control the screen width of XXXL screens. + */ + screenXXXL: number; + /** + * @nameZH 屏幕宽度（像素） - 超超超大屏幕最小值 + * @nameEN Screen width (pixels) - XXXL screens minimum value + * @desc 控制超超超大屏幕的最小宽度。 + * @descEN Control the minimum width of XXXL screens. + */ + screenXXXLMin: number; /** * @deprecated diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 32d48e92ca..458bb2acef 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -31,6 +31,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken const screenLG = 992; const screenXL = 1200; const screenXXL = 1600; + const screenXXXL = 1920; // Motion if (mergedToken.motion === false) { @@ -164,6 +165,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken screenXLMax: screenXXL - 1, screenXXL, screenXXLMin: screenXXL, + screenXXLMax: screenXXXL - 1, + screenXXXL, + screenXXXLMin: screenXXXL, boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)', boxShadowCard: ` diff --git a/package.json b/package.json index 02ab2ea13a..399f8422d5 100644 --- a/package.json +++ b/package.json @@ -337,7 +337,7 @@ }, { "path": "./dist/antd-with-locales.min.js", - "limit": "526 KiB", + "limit": "527 KiB", "gzip": true } ],