feat: add xxxl grid col size for 4k&5k display (#4953)

* feat: add xxxl grid col size for 4k&5k display

* Update index.zh-CN.md

* Update index.zh-CN.md

* Update index.en-US.md

* Update index.zh-CN.md

Co-authored-by: undefined <undefined>
Co-authored-by: tangjinzhou <[email protected]>

Author: small-tou

components/_util/responsiveObserve.ts

@@ -1,9 +1,9 @@
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type BreakpointMap = Record<Breakpoint, string>;
 export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
-export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
 export const responsiveMap: BreakpointMap = {
   xs: '(max-width: 575px)',
@@ -12,6 +12,7 @@ export const responsiveMap: BreakpointMap = {
   lg: '(min-width: 992px)',
   xl: '(min-width: 1200px)',
   xxl: '(min-width: 1600px)',
+  xxxl: '(min-width: 2000px)',
 };
 
 type SubscribeFunc = (screens: ScreenMap) => void;

components/grid/Col.tsx

@@ -51,6 +51,7 @@ const colProps = {
   lg: objectOrNumber,
   xl: objectOrNumber,
   xxl: objectOrNumber,
+  xxxl: objectOrNumber,
   prefixCls: PropTypes.string,
   flex: stringOrNumber,
 };
@@ -67,7 +68,7 @@ export default defineComponent({
       const { span, order, offset, push, pull } = props;
       const pre = prefixCls.value;
       let sizeClassObj = {};
-      ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+      ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'].forEach(size => {
         let sizeProps: ColSize = {};
         const propSize = props[size];
         if (typeof propSize === 'number') {

components/grid/Row.tsx

@@ -44,6 +44,7 @@ const ARow = defineComponent({
       lg: true,
       xl: true,
       xxl: true,
+      xxxl: true,
     });
 
     const supportFlexGap = useFlexGapSupport();

components/grid/demo/responsive-more.vue

@@ -14,7 +14,7 @@ title:
 
 ## en-US
 
-`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` properties to use, where `:xs="6"` is equivalent to `:xs="{ span: 6 }"`.
+`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` `xxxl` properties to use, where `:xs="6"` is equivalent to `:xs="{ span: 6 }"`.
 </docs>
 
 <template>

components/grid/demo/responsive.vue

@@ -8,7 +8,7 @@ title:
 
 ## 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
 

components/grid/index.en-US.md

@@ -56,5 +56,6 @@ Our grid systems support Flex layout to allow the elements within the parent to
 | lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
 | xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
 | xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
+| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | - |
 
 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`).

components/grid/index.zh-CN.md

@@ -39,19 +39,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 
 ### Col
 
-| 成员   | 说明                                                     | 类型           | 默认值 |
-| ------ | -------------------------------------------------------- | -------------- | ------ |
-| flex   | flex 布局填充                                            | string\|number | -      |
-| offset | 栅格左侧的间隔格数，间隔内不可以有栅格                   | number         | 0      |
-| order  | 栅格顺序，`flex` 布局模式下有效                          | number         | 0      |
-| pull   | 栅格向左移动格数                                         | number         | 0      |
-| push   | 栅格向右移动格数                                         | number         | 0      |
-| span   | 栅格占位格数，为 0 时相当于 `display: none`              | number         | -      |
-| xs     | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      |
-| sm     | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      |
-| md     | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      |
-| lg     | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      |
-| xl     | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | -      |
-| xxl    | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | -      |
+| 成员   | 说明                                                     | 类型           | 默认值 | 版本 |
+| ------ | -------------------------------------------------------- | -------------- | ------ | --- |
+| flex   | flex 布局填充                                            | string\|number | -      | |
+| offset | 栅格左侧的间隔格数，间隔内不可以有栅格                   | number         | 0      | |
+| order  | 栅格顺序，`flex` 布局模式下有效                          | number         | 0      | |
+| pull   | 栅格向左移动格数                                         | number         | 0      | |
+| push   | 栅格向右移动格数                                         | number         | 0      | |
+| span   | 栅格占位格数，为 0 时相当于 `display: none`              | number         | -      | |
+| xs     | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      | |
+| sm     | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      | |
+| md     | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      | |
+| lg     | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | number\|object | -      | |
+| xl     | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | -      | |
+| xxl    | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | -      | |
+| xxxl   | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | -      | 3.0 |
 
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

components/grid/style/index.less

@@ -115,4 +115,8 @@
   .make-grid(-xxl);
 }
 
+@media (min-width: @screen-xxxl-min) {
+  .make-grid(-xxxl);
+}
+
 @import './rtl';

components/layout/Sider.tsx

@@ -18,6 +18,7 @@ const dimensionMaxMap = {
   lg: '991.98px',
   xl: '1199.98px',
   xxl: '1599.98px',
+  xxxl: '1999.98px',
 };
 
 export type CollapseType = 'clickTrigger' | 'responsive';
@@ -32,7 +33,7 @@ export const siderProps = {
   trigger: PropTypes.VNodeChild,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl')),
+  breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')),
   theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
   onBreakpoint: Function as PropType<(broken: boolean) => void>,
   onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,

components/layout/index.en-US.md

@@ -118,5 +118,6 @@ The sidebar.
   lg: '992px',
   xl: '1200px',
   xxl: '1600px',
+  xxxl: '2000px',
 }
 ```

components/layout/index.zh-CN.md

@@ -119,5 +119,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
   lg: '992px',
   xl: '1200px',
   xxl: '1600px',
+  xxxl: '2000px',
 }
 ```

components/list/demo/resposive.vue

@@ -17,7 +17,10 @@ Responsive grid list. The size property is as same as [Layout Grid](https://www.
 </docs>
 
 <template>
-  <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="data">
+  <a-list
+    :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
+    :data-source="data"
+  >
     <template #renderItem="{ item }">
       <a-list-item>
         <a-card :title="item.title">Card content</a-card>

components/list/index.en-US.md

@@ -43,17 +43,18 @@ More about pagination, please check [`Pagination`](https://www.antdv.com/compone
 
 ### List grid props
 
-| Property | Description              | Type                                     | Default   |
-| -------- | ------------------------ | ---------------------------------------- | --------- |
-| column   | column of grid           | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -         |
-| gutter   | spacing between grid     | number                                   | 0         |
-| size     | Size of list             | `default` \| `middle` \| `small`         | `default` |
-| xs       | `<576px` column of grid  | number                                   | -         |
-| sm       | `≥576px` column of grid  | number                                   | -         |
-| md       | `≥768px` column of grid  | number                                   | -         |
-| lg       | `≥992px` column of grid  | number                                   | -         |
-| xl       | `≥1200px` column of grid | number                                   | -         |
-| xxl      | `≥1600px` column of grid | number                                   | -         |
+| Property | Description              | Type                                     | Default   | Version |
+| -------- | ------------------------ | ---------------------------------------- | --------- | --------- |
+| column   | column of grid           | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -         | |
+| gutter   | spacing between grid     | number                                   | 0         | |
+| size     | Size of list             | `default` \| `middle` \| `small`         | `default` | |
+| xs       | `<576px` column of grid  | number                                   | -         | |
+| sm       | `≥576px` column of grid  | number                                   | -         | |
+| md       | `≥768px` column of grid  | number                                   | -         | |
+| lg       | `≥992px` column of grid  | number                                   | -         | |
+| xl       | `≥1200px` column of grid | number                                   | -         | |
+| xxl      | `≥1600px` column of grid | number                                   | -         | |
+| xxxl     | `≥2000px` column of grid | number                                   | -         | 3.0 |
 
 ### List.Item
 

components/list/index.tsx

@@ -32,6 +32,7 @@ export const ListGridType = {
   lg: PropTypes.number,
   xl: PropTypes.number,
   xxl: PropTypes.number,
+  xxxl: PropTypes.number,
 };
 
 export const ListSize = tuple('small', 'default', 'large');

components/list/index.zh-CN.md

@@ -45,16 +45,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
 
 ### List grid props
 
-| 参数   | 说明                 | 类型                                     | 默认值 |
-| ------ | -------------------- | ---------------------------------------- | ------ |
-| column | 列数                 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -      |
-| gutter | 栅格间隔             | number                                   | 0      |
-| xs     | `<576px` 展示的列数  | number                                   | -      |
-| sm     | `≥576px` 展示的列数  | number                                   | -      |
-| md     | `≥768px` 展示的列数  | number                                   | -      |
-| lg     | `≥992px` 展示的列数  | number                                   | -      |
-| xl     | `≥1200px` 展示的列数 | number                                   | -      |
-| xxl    | `≥1600px` 展示的列数 | number                                   | -      |
+| 参数   | 说明                 | 类型                                     | 默认值 | 版本 |
+| ------ | -------------------- | ---------------------------------------- | ------ | ------ |
+| column | 列数                 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -      ||
+| gutter | 栅格间隔             | number                                   | 0      ||
+| xs     | `<576px` 展示的列数  | number                                   | -      ||
+| sm     | `≥576px` 展示的列数  | number                                   | -      ||
+| md     | `≥768px` 展示的列数  | number                                   | -      ||
+| lg     | `≥992px` 展示的列数  | number                                   | -      ||
+| xl     | `≥1200px` 展示的列数 | number                                   | -      ||
+| xxl    | `≥1600px` 展示的列数 | number                                   | -      ||
+| xxxl   | `≥2000px` 展示的列数 | number                                   | -      |3.0|
 
 ### List.Item
 

components/style/themes/default.less

@@ -292,12 +292,17 @@
 @screen-xxl: 1600px;
 @screen-xxl-min: @screen-xxl;
 
+// Extra extra large screen / large desktop
+@screen-xxxl: 2000px;
+@screen-xxxl-min: @screen-xxxl;
+
 // provide a maximum
 @screen-xs-max: (@screen-sm-min - 1px);
 @screen-sm-max: (@screen-md-min - 1px);
 @screen-md-max: (@screen-lg-min - 1px);
 @screen-lg-max: (@screen-xl-min - 1px);
 @screen-xl-max: (@screen-xxl-min - 1px);
+@screen-xxl-max: (@screen-xxxl-min - 1px);
 
 // Grid system
 @grid-columns: 24;

components/table/index.en-US.md

@@ -187,7 +187,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 #### Breakpoint
 
 ```ts
-type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 ```
 
 ### ColumnGroup

components/table/index.zh-CN.md

@@ -193,7 +193,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
 #### Breakpoint
 
 ```ts
-type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 ```
 
 ### ColumnGroup

site/src/components/header.jsx

@@ -60,7 +60,7 @@ export default {
     return (
       <header id="header">
         <a-row>
-          <a-col class="header-left" xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
+          <a-col class="header-left" xxxl={3} xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
             <router-link to={{ path: '/' }} id="logo">
               <img alt="logo" height="32" src={logo} />
               <img alt="logo" height="16" src={antDesignVue} />
@@ -75,7 +75,7 @@ export default {
               {isCN ? 'English' : '中文'}
             </a-button>
           </a-col>
-          <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
+          <a-col xxxl={20} xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
             <div id="search-box">
               <SearchOutlined />
               <a-input

site/src/hooks/useMediaQuery.ts

@@ -29,6 +29,10 @@ export const MediaQueryEnum = {
     minWidth: 1600,
     matchMedia: '(min-width: 1600px)',
   },
+  xxxl: {
+    minWidth: 2000,
+    matchMedia: '(min-width: 2000px)',
+  },
 };
 
 export type MediaQueryKey = keyof typeof MediaQueryEnum;

site/src/layouts/header/index.vue

@@ -74,6 +74,7 @@ export default defineComponent({
       ? [{ flex: 'none' }, { flex: 'auto' }]
       : [
           {
+            xxxl: 4,
             xxl: 4,
             xl: 5,
             lg: 6,
@@ -82,6 +83,7 @@ export default defineComponent({
             xs: 24,
           },
           {
+            xxxl: 20,
             xxl: 20,
             xl: 19,
             lg: 18,

site/src/layouts/index.vue

@@ -23,7 +23,7 @@
         </a-drawer>
       </template>
       <template v-else>
-        <a-col :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
+        <a-col :xxxl="4" :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
           <a-affix>
             <section class="main-menu-inner">
               <!-- <Sponsors :is-c-n="isZhCN" /> -->
@@ -35,7 +35,7 @@
           </a-affix>
         </a-col>
       </template>
-      <a-col :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
+      <a-col :xxxl="20" :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
         <section :class="mainContainerClass">
           <TopAd :is-c-n="isZhCN" />
           <Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">