From 2a8c368b0bdd766e0ef84962871fb4ea5d49f471 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Fri, 26 Aug 2016 15:49:12 +0800 Subject: [PATCH] update grid --- examples/docs/layout.md | 176 +++++++++++++++++++++++++++++ packages/row/src/row.vue | 23 +++- packages/theme-default/src/row.css | 22 ++++ 3 files changed, 219 insertions(+), 2 deletions(-) diff --git a/examples/docs/layout.md b/examples/docs/layout.md index e69de29bb..48960519d 100644 --- a/examples/docs/layout.md +++ b/examples/docs/layout.md @@ -0,0 +1,176 @@ + + +## Layout 布局 + +通过基础的 24 分栏，迅速简便地创建布局 + +### 基础布局 + +使用单一分栏创建基础的栅格布局 + +::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。 +```html + +
+ + +
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ +``` +::: + +### 分栏间隔 + +分栏之间存在间隔 + +::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。 +```html + +
+
+
+
+ +``` +::: + +### 混合布局 + +通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局 + +::: demo +```html + +
+
+ + +
+
+
+
+ + +
+
+
+ +``` +::: + +### 分栏偏移 + +分栏支持按一定的栏数进行偏移 + +::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数 +```html + +
+
+ + +
+
+ + +
+ +``` +::: + +### 对齐方式 + +对分栏进行灵活的对齐。 + +::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式 +```html + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ +``` +::: + +### Row Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| gutter | 栅格间隔 | number | — | 0 | +| type | 布局模式，可选 flex，现代浏览器下有效 | string | - | - | +| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start | +| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top | + +### Col Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| **span** | 栅格占据的列数，**必选参数** | number | — | — | +| offset | 栅格左侧的间隔格数 | number | - | 0 | +| push | 栅格向右移动格数 | number | - | 0 | +| pull | 栅格向左移动格数 | number | - | 0 | diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue index 62f19fe96..72b9fd654 100644 --- a/packages/row/src/row.vue +++ b/packages/row/src/row.vue @@ -1,5 +1,15 @@ @@ -8,7 +18,16 @@ name: 'ElRow', props: { - gutter: Number + gutter: Number, + type: String, + justify: { + type: String, + default: 'start' + }, + align: { + type: String, + default: 'top' + } }, computed: { diff --git a/packages/theme-default/src/row.css b/packages/theme-default/src/row.css index 186ebb2c2..0dc738651 100644 --- a/packages/theme-default/src/row.css +++ b/packages/theme-default/src/row.css @@ -6,5 +6,27 @@ position: relative; box-sizing: border-box; @utils-clearfix; + + @m flex { + display: flex; + &:before, + &:after { + display: none; + } + + @when justify-center { + justify-content: center; + } + @when justify-end { + justify-content: flex-end; + } + @when justify-space-between { + justify-content: space-between; + } + @when justify-space-around { + justify-content: space-around; + } + } + } }