Skip to content

Commit 4a80b55

Browse files
small-toutangjinzhou
small-tou
and
tangjinzhou
authored
feat: add xxxl grid col size for 4k&5k display (vueComponent#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]>
1 parent 65fc82e commit 4a80b55

File tree

22 files changed

+77
-48
lines changed

22 files changed

+77
-48
lines changed

‎components/_util/responsiveObserve.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
1+
export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
22
export type BreakpointMap = Record<Breakpoint, string>;
33
export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
44
export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
55

6-
export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
6+
export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
77

88
export const responsiveMap: BreakpointMap = {
99
xs: '(max-width: 575px)',
@@ -12,6 +12,7 @@ export const responsiveMap: BreakpointMap = {
1212
lg: '(min-width: 992px)',
1313
xl: '(min-width: 1200px)',
1414
xxl: '(min-width: 1600px)',
15+
xxxl: '(min-width: 2000px)',
1516
};
1617

1718
type SubscribeFunc = (screens: ScreenMap) => void;

‎components/grid/Col.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const colProps = {
5151
lg: objectOrNumber,
5252
xl: objectOrNumber,
5353
xxl: objectOrNumber,
54+
xxxl: objectOrNumber,
5455
prefixCls: PropTypes.string,
5556
flex: stringOrNumber,
5657
};
@@ -67,7 +68,7 @@ export default defineComponent({
6768
const { span, order, offset, push, pull } = props;
6869
const pre = prefixCls.value;
6970
let sizeClassObj = {};
70-
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
71+
['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'].forEach(size => {
7172
let sizeProps: ColSize = {};
7273
const propSize = props[size];
7374
if (typeof propSize === 'number') {

‎components/grid/Row.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const ARow = defineComponent({
4444
lg: true,
4545
xl: true,
4646
xxl: true,
47+
xxxl: true,
4748
});
4849

4950
const supportFlexGap = useFlexGapSupport();

‎components/grid/demo/responsive-more.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ title:
1414

1515
## en-US
1616

17-
`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 }"`.
17+
`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 }"`.
1818
</docs>
1919

2020
<template>

‎components/grid/demo/responsive.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ title:
88

99
## zh-CN
1010

11-
参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。
11+
参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设七个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`。
1212

1313
## en-US
1414

‎components/grid/index.en-US.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,6 @@ Our grid systems support Flex layout to allow the elements within the parent to
5656
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
5757
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
5858
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
59+
| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | - |
5960

6061
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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
3939

4040
### Col
4141

42-
| 成员 | 说明 | 类型 | 默认值 |
43-
| ------ | -------------------------------------------------------- | -------------- | ------ |
44-
| flex | flex 布局填充 | string\|number | - |
45-
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
46-
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
47-
| pull | 栅格向左移动格数 | number | 0 |
48-
| push | 栅格向右移动格数 | number | 0 |
49-
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
50-
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
51-
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
52-
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
53-
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
54-
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
55-
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
42+
| 成员 | 说明 | 类型 | 默认值 | 版本 |
43+
| ------ | -------------------------------------------------------- | -------------- | ------ | --- |
44+
| flex | flex 布局填充 | string\|number | - | |
45+
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
46+
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | |
47+
| pull | 栅格向左移动格数 | number | 0 | |
48+
| push | 栅格向右移动格数 | number | 0 | |
49+
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
50+
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
51+
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
52+
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
53+
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
54+
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
55+
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
56+
| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 |
5657

5758
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

‎components/grid/style/index.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,4 +115,8 @@
115115
.make-grid(-xxl);
116116
}
117117

118+
@media (min-width: @screen-xxxl-min) {
119+
.make-grid(-xxxl);
120+
}
121+
118122
@import './rtl';

‎components/layout/Sider.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const dimensionMaxMap = {
1818
lg: '991.98px',
1919
xl: '1199.98px',
2020
xxl: '1599.98px',
21+
xxxl: '1999.98px',
2122
};
2223

2324
export type CollapseType = 'clickTrigger' | 'responsive';
@@ -32,7 +33,7 @@ export const siderProps = {
3233
trigger: PropTypes.VNodeChild,
3334
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
3435
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
35-
breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl')),
36+
breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')),
3637
theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
3738
onBreakpoint: Function as PropType<(broken: boolean) => void>,
3839
onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,

‎components/layout/index.en-US.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,6 @@ The sidebar.
118118
lg: '992px',
119119
xl: '1200px',
120120
xxl: '1600px',
121+
xxxl: '2000px',
121122
}
122123
```

‎components/layout/index.zh-CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,5 +119,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
119119
lg: '992px',
120120
xl: '1200px',
121121
xxl: '1600px',
122+
xxxl: '2000px',
122123
}
123124
```

‎components/list/demo/resposive.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ Responsive grid list. The size property is as same as [Layout Grid](https://www.
1717
</docs>
1818

1919
<template>
20-
<a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="data">
20+
<a-list
21+
:grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
22+
:data-source="data"
23+
>
2124
<template #renderItem="{ item }">
2225
<a-list-item>
2326
<a-card :title="item.title">Card content</a-card>

‎components/list/index.en-US.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,18 @@ More about pagination, please check [`Pagination`](https://www.antdv.com/compone
4343

4444
### List grid props
4545

46-
| Property | Description | Type | Default |
47-
| -------- | ------------------------ | ---------------------------------------- | --------- |
48-
| column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - |
49-
| gutter | spacing between grid | number | 0 |
50-
| size | Size of list | `default` \| `middle` \| `small` | `default` |
51-
| xs | `<576px` column of grid | number | - |
52-
| sm | `≥576px` column of grid | number | - |
53-
| md | `≥768px` column of grid | number | - |
54-
| lg | `≥992px` column of grid | number | - |
55-
| xl | `≥1200px` column of grid | number | - |
56-
| xxl | `≥1600px` column of grid | number | - |
46+
| Property | Description | Type | Default | Version |
47+
| -------- | ------------------------ | ---------------------------------------- | --------- | --------- |
48+
| column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
49+
| gutter | spacing between grid | number | 0 | |
50+
| size | Size of list | `default` \| `middle` \| `small` | `default` | |
51+
| xs | `<576px` column of grid | number | - | |
52+
| sm | `≥576px` column of grid | number | - | |
53+
| md | `≥768px` column of grid | number | - | |
54+
| lg | `≥992px` column of grid | number | - | |
55+
| xl | `≥1200px` column of grid | number | - | |
56+
| xxl | `≥1600px` column of grid | number | - | |
57+
| xxxl | `≥2000px` column of grid | number | - | 3.0 |
5758

5859
### List.Item
5960

‎components/list/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const ListGridType = {
3232
lg: PropTypes.number,
3333
xl: PropTypes.number,
3434
xxl: PropTypes.number,
35+
xxxl: PropTypes.number,
3536
};
3637

3738
export const ListSize = tuple('small', 'default', 'large');

‎components/list/index.zh-CN.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
4545

4646
### List grid props
4747

48-
| 参数 | 说明 | 类型 | 默认值 |
49-
| ------ | -------------------- | ---------------------------------------- | ------ |
50-
| column | 列数 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - |
51-
| gutter | 栅格间隔 | number | 0 |
52-
| xs | `<576px` 展示的列数 | number | - |
53-
| sm | `≥576px` 展示的列数 | number | - |
54-
| md | `≥768px` 展示的列数 | number | - |
55-
| lg | `≥992px` 展示的列数 | number | - |
56-
| xl | `≥1200px` 展示的列数 | number | - |
57-
| xxl | `≥1600px` 展示的列数 | number | - |
48+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
49+
| ------ | -------------------- | ---------------------------------------- | ------ | ------ |
50+
| column | 列数 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - ||
51+
| gutter | 栅格间隔 | number | 0 ||
52+
| xs | `<576px` 展示的列数 | number | - ||
53+
| sm | `≥576px` 展示的列数 | number | - ||
54+
| md | `≥768px` 展示的列数 | number | - ||
55+
| lg | `≥992px` 展示的列数 | number | - ||
56+
| xl | `≥1200px` 展示的列数 | number | - ||
57+
| xxl | `≥1600px` 展示的列数 | number | - ||
58+
| xxxl | `≥2000px` 展示的列数 | number | - |3.0|
5859

5960
### List.Item
6061

‎components/style/themes/default.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,12 +292,17 @@
292292
@screen-xxl: 1600px;
293293
@screen-xxl-min: @screen-xxl;
294294

295+
// Extra extra large screen / large desktop
296+
@screen-xxxl: 2000px;
297+
@screen-xxxl-min: @screen-xxxl;
298+
295299
// provide a maximum
296300
@screen-xs-max: (@screen-sm-min - 1px);
297301
@screen-sm-max: (@screen-md-min - 1px);
298302
@screen-md-max: (@screen-lg-min - 1px);
299303
@screen-lg-max: (@screen-xl-min - 1px);
300304
@screen-xl-max: (@screen-xxl-min - 1px);
305+
@screen-xxl-max: (@screen-xxxl-min - 1px);
301306

302307
// Grid system
303308
@grid-columns: 24;

‎components/table/index.en-US.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
187187
#### Breakpoint
188188

189189
```ts
190-
type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
190+
type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
191191
```
192192

193193
### ColumnGroup

‎components/table/index.zh-CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
193193
#### Breakpoint
194194

195195
```ts
196-
type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
196+
type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
197197
```
198198

199199
### ColumnGroup

‎site/src/components/header.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default {
6060
return (
6161
<header id="header">
6262
<a-row>
63-
<a-col class="header-left" xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
63+
<a-col class="header-left" xxxl={3} xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
6464
<router-link to={{ path: '/' }} id="logo">
6565
<img alt="logo" height="32" src={logo} />
6666
<img alt="logo" height="16" src={antDesignVue} />
@@ -75,7 +75,7 @@ export default {
7575
{isCN ? 'English' : '中文'}
7676
</a-button>
7777
</a-col>
78-
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
78+
<a-col xxxl={20} xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
7979
<div id="search-box">
8080
<SearchOutlined />
8181
<a-input

‎site/src/hooks/useMediaQuery.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export const MediaQueryEnum = {
2929
minWidth: 1600,
3030
matchMedia: '(min-width: 1600px)',
3131
},
32+
xxxl: {
33+
minWidth: 2000,
34+
matchMedia: '(min-width: 2000px)',
35+
},
3236
};
3337

3438
export type MediaQueryKey = keyof typeof MediaQueryEnum;

‎site/src/layouts/header/index.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export default defineComponent({
7474
? [{ flex: 'none' }, { flex: 'auto' }]
7575
: [
7676
{
77+
xxxl: 4,
7778
xxl: 4,
7879
xl: 5,
7980
lg: 6,
@@ -82,6 +83,7 @@ export default defineComponent({
8283
xs: 24,
8384
},
8485
{
86+
xxxl: 20,
8587
xxl: 20,
8688
xl: 19,
8789
lg: 18,

‎site/src/layouts/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</a-drawer>
2424
</template>
2525
<template v-else>
26-
<a-col :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
26+
<a-col :xxxl="4" :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
2727
<a-affix>
2828
<section class="main-menu-inner">
2929
<!-- <Sponsors :is-c-n="isZhCN" /> -->
@@ -35,7 +35,7 @@
3535
</a-affix>
3636
</a-col>
3737
</template>
38-
<a-col :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
38+
<a-col :xxxl="20" :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
3939
<section :class="mainContainerClass">
4040
<TopAd :is-c-n="isZhCN" />
4141
<Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">

0 commit comments

Comments
 (0)