From 14475c33de1a13c4a99b658ed6467a2c0bd3149c Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Mon, 14 Nov 2016 13:35:09 +0800 Subject: [PATCH] responsive layout --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + examples/docs/en-US/layout.md | 4 ++ examples/docs/zh-CN/layout.md | 6 ++- packages/col/src/col.vue | 63 +++++++++++++++++++++------- packages/theme-default/src/col.css | 67 ++++++++++++++++++++++++++++-- test/unit/specs/col.spec.js | 16 +++++++ 7 files changed, 138 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f3461fe73..cd68cf02a 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,7 @@ - Fixed Table render error using vue-loader 9.9.0 - Added `align-center` prop for Step, #994 - Fixed Upload missing progress component, #1013 +- Layout: support the responsive layout ### 1.0.0 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d573e10cf..1f5b79817 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,7 @@ - 修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错 - 新增 Step 支持内容居中对齐, #994 - 修复 Upload 单独引入时提示 progress 组件不存在, #1013 +- Layout 支持响应式布局 ### 1.0.0 diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md index 91795bd1f..0ff71abba 100644 --- a/examples/docs/en-US/layout.md +++ b/examples/docs/en-US/layout.md @@ -146,4 +146,8 @@ Flexible alignment of columns. | offset | number of spacing on the left side of the grid | number | — | 0 | | push | number of columns that grid moves to the right | number | — | 0 | | pull | number of columns that grid moves to the left | number | — | 0 | +| xs | `<768px` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — | +| sm | `≥768px` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — | +| md | `≥992` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — | +| lg | `≥1200` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — | diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md index c42c4f8fd..9d1bebf2e 100644 --- a/examples/docs/zh-CN/layout.md +++ b/examples/docs/zh-CN/layout.md @@ -134,7 +134,7 @@ ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 ```html -
+
@@ -176,3 +176,7 @@ | offset | 栅格左侧的间隔格数 | number | — | 0 | | push | 栅格向右移动格数 | number | — | 0 | | pull | 栅格向左移动格数 | number | — | 0 | +| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | +| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | +| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | +| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | \ No newline at end of file diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue index eb3154368..5af12793d 100644 --- a/packages/col/src/col.vue +++ b/packages/col/src/col.vue @@ -1,17 +1,3 @@ - diff --git a/packages/theme-default/src/col.css b/packages/theme-default/src/col.css index d15eeb4b8..b7ebff886 100644 --- a/packages/theme-default/src/col.css +++ b/packages/theme-default/src/col.css @@ -7,18 +7,77 @@ } @for $i from 1 to 24 { - .el-col-$i { + .el-col-$i, + .el-col-xs-$i { width: calc(1 / 24 * $(i) * 100)%; } - .el-col-offset-$i { + .el-col-offset-$i, + .el-col-xs-offset-$i { margin-left: calc(1 / 24 * $(i) * 100)%; } - .el-col-pull-$i { + .el-col-pull-$i, + .el-col-xs-pull-$i { position: relative; right: calc(1 / 24 * $(i) * 100)%; } - .el-col-push-$i { + .el-col-push-$i, + .el-col-xs-push-$i { position: relative; left: calc(1 / 24 * $(i) * 100)%; } } + +@media (min-width: 768px) { + @for $i from 1 to 24 { + .el-col-sm-$i { + width: calc(1 / 24 * $(i) * 100)%; + } + } + .el-col-xs-offset-$i { + margin-left: calc(1 / 24 * $(i) * 100)%; + } + .el-col-xs-pull-$i { + position: relative; + right: calc(1 / 24 * $(i) * 100)%; + } + .el-col-xs-push-$i { + position: relative; + left: calc(1 / 24 * $(i) * 100)%; + } +} +@media (min-width: 992px) { + @for $i from 1 to 24 { + .el-col-md-$i { + width: calc(1 / 24 * $(i) * 100)%; + } + } + .el-col-md-offset-$i { + margin-left: calc(1 / 24 * $(i) * 100)%; + } + .el-col-md-pull-$i { + position: relative; + right: calc(1 / 24 * $(i) * 100)%; + } + .el-col-md-push-$i { + position: relative; + left: calc(1 / 24 * $(i) * 100)%; + } +} +@media (min-width: 1200px) { + @for $i from 1 to 24 { + .el-col-lg-$i { + width: calc(1 / 24 * $(i) * 100)%; + } + } + .el-col-xs-offset-$i { + margin-left: calc(1 / 24 * $(i) * 100)%; + } + .el-col-xs-pull-$i { + position: relative; + right: calc(1 / 24 * $(i) * 100)%; + } + .el-col-xs-push-$i { + position: relative; + left: calc(1 / 24 * $(i) * 100)%; + } +} \ No newline at end of file diff --git a/test/unit/specs/col.spec.js b/test/unit/specs/col.spec.js index cf80edf66..4809dde17 100644 --- a/test/unit/specs/col.spec.js +++ b/test/unit/specs/col.spec.js @@ -59,4 +59,20 @@ describe('Col', () => { expect(colElm.style.paddingLeft === '10px').to.be.true; expect(colElm.style.paddingRight === '10px').to.be.true; }); + it('responsive', () => { + vm = createVue({ + template: ` + + + + + ` + }, true); + let colElm = vm.$refs.col.$el; + expect(colElm.classList.contains('el-col-sm-4')).to.be.true; + expect(colElm.classList.contains('el-col-sm-offset-2')).to.be.true; + expect(colElm.classList.contains('el-col-lg-6')).to.be.true; + expect(colElm.classList.contains('el-col-lg-offset-3')).to.be.true; + expect(colElm.classList.contains('el-col-md-8')).to.be.true; + }); });