github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 <415800467@qq.com>
pull/4956/head
芋头 2021-11-30 21:07:50 +08:00 committed by GitHub
parent 65fc82e105
commit 4a80b556f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/responsiveObserve.ts
View File

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

3
components/grid/Col.tsx
View File

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

1
components/grid/Row.tsx
View File

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

2
components/grid/demo/responsive-more.vue
View File

@ -14,7 +14,7 @@ title:
## en-US ## 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> </docs>
<template> <template>

2
components/grid/demo/responsive.vue
View File

@ -8,7 +8,7 @@ title:
## zh-CN ## 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 ## en-US

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

@ -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 | - | | 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 | - | | 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 | - | | 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`). 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`).

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

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

4
components/grid/style/index.less
View File

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

3
components/layout/Sider.tsx
View File

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

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

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

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

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

5
components/list/demo/resposive.vue
View File

@ -17,7 +17,10 @@ Responsive grid list. The size property is as same as [Layout Grid](https://www.
</docs> </docs>
<template> <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 }"> <template #renderItem="{ item }">
<a-list-item> <a-list-item>
<a-card :title="item.title">Card content</a-card> <a-card :title="item.title">Card content</a-card>

23
components/list/index.en-US.md
View File

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

1
components/list/index.tsx
View File

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

21
components/list/index.zh-CN.md
View File

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

5
components/style/themes/default.less
View File

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

2
components/table/index.en-US.md
View File

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

2
components/table/index.zh-CN.md
View File

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

4
site/src/components/header.jsx
View File

@ -60,7 +60,7 @@ export default {
return ( return (
<header id="header"> <header id="header">
<a-row> <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"> <router-link to={{ path: '/' }} id="logo">
<img alt="logo" height="32" src={logo} /> <img alt="logo" height="32" src={logo} />
<img alt="logo" height="16" src={antDesignVue} /> <img alt="logo" height="16" src={antDesignVue} />
@ -75,7 +75,7 @@ export default {
{isCN ? 'English' : '中文'} {isCN ? 'English' : '中文'}
</a-button> </a-button>
</a-col> </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"> <div id="search-box">
<SearchOutlined /> <SearchOutlined />
<a-input <a-input

4
site/src/hooks/useMediaQuery.ts
View File

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

2
site/src/layouts/header/index.vue
View File

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

4
site/src/layouts/index.vue
View File

@ -23,7 +23,7 @@
</a-drawer> </a-drawer>
</template> </template>
<template v-else> <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> <a-affix>
<section class="main-menu-inner"> <section class="main-menu-inner">
<!-- <Sponsors :is-c-n="isZhCN" /> --> <!-- <Sponsors :is-c-n="isZhCN" /> -->
@ -35,7 +35,7 @@
</a-affix> </a-affix>
</a-col> </a-col>
</template> </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"> <section :class="mainContainerClass">
<TopAd :is-c-n="isZhCN" /> <TopAd :is-c-n="isZhCN" />
<Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN"> <Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">