diff --git a/src/components/grid/col.vue b/src/components/grid/col.vue index 959b692..4695c42 100644 --- a/src/components/grid/col.vue +++ b/src/components/grid/col.vue @@ -19,7 +19,9 @@ xs: [Number, Object], sm: [Number, Object], md: [Number, Object], - lg: [Number, Object] + lg: [Number, Object], + xl: [Number, Object], + xxl: [Number, Object] }, data () { return { @@ -40,7 +42,7 @@ } ]; - ['xs', 'sm', 'md', 'lg'].forEach(size => { + ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => { if (typeof this[size] === 'number') { classList.push(`${prefixCls}-span-${size}-${this[size]}`); } else if (typeof this[size] === 'object') { diff --git a/src/styles/common/layout.less b/src/styles/common/layout.less index b57119a..db19735 100644 --- a/src/styles/common/layout.less +++ b/src/styles/common/layout.less @@ -81,8 +81,26 @@ // Large grid // -// Columns, offsets, pushes, and pulls for the large desktop device range. +// Columns, offsets, pushes, and pulls for the wide desktop device range. @media (min-width: @screen-lg-min) { .make-grid(-lg); } + + +// Extra large grid +// +// Columns, offsets, pushes, and pulls for the full hd desktop device range. + +@media (min-width: @screen-xl-min) { + .make-grid(-xl); +} + + +// Extra extra large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-xxl-min) { + .make-grid(-xxl); +} diff --git a/types/grid.d.ts b/types/grid.d.ts index ac071a4..cfcac4c 100644 --- a/types/grid.d.ts +++ b/types/grid.d.ts @@ -54,19 +54,27 @@ export declare interface Col extends Vue { */ 'class-name'?: string; /** - * <768px 响应式栅格,可为栅格数或一个包含其他属性的对象 + * <576px 响应式栅格,可为栅格数或一个包含其他属性的对象 */ xs?: number | object; /** - * ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 + * ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 */ sm?: number | object; /** - * ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 + * ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 */ md?: number | object; /** - * ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 + * ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 */ lg?: number | object; -} \ No newline at end of file + /** + * ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 + */ + xl?: number | object; + /** + * ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 + */ + xxl?: number | object; +} -- libgit2 0.21.4