Layout: custom element tag

examples/docs/en-US/layout.md

@@ -317,6 +317,7 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 | type | layout mode, you can use flex, works in modern browsers | string | — | — |
 | justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
 | align | vertical alignment of flex layout | string | top/middle/bottom | top |
+| tag | custom element tag | string | * | div |
 
 ### Col Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -329,4 +330,6 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 | sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | md | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | lg | `≥1200` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| tag | custom element tag | string | * | div |
+
 

examples/docs/zh-CN/layout.md

@@ -347,6 +347,7 @@
 | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
 | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
 | align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
+| tag | 自定义元素标签 | string | * | div |
 
 ### Col Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -359,3 +360,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}) | — | — |
+| tag | 自定义元素标签 | string | * | div |

packages/col/src/col.js

@@ -6,6 +6,10 @@ export default {
       type: Number,
       default: 24
     },
+    tag: {
+      type: String,
+      default: 'div'
+    },
     offset: Number,
     pull: Number,
     push: Number,
@@ -58,12 +62,9 @@ export default {
       }
     });
 
-    return (
+    return h(this.tag, {
-      <div
+      class: ['el-col', classList],
-        class={['el-col', classList]}
+      style
-        style={style}>
+    }, this.$slots.default);
-        {this.$slots.default}
-      </div>
-    );
   }
 };

packages/row/src/row.js

@@ -0,0 +1,47 @@
+export default {
+  name: 'ElRow',
+
+  componentName: 'ElRow',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    gutter: Number,
+    type: String,
+    justify: {
+      type: String,
+      default: 'start'
+    },
+    align: {
+      type: String,
+      default: 'top'
+    }
+  },
+
+  computed: {
+    style() {
+      var ret = {};
+
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`;
+        ret.marginRight = ret.marginLeft;
+      }
+
+      return ret;
+    }
+  },
+
+  render(h) {
+    return h(this.tag, {
+      class: [
+        'el-row',
+        justify !== 'start' ? `is-justify-${this.justify}` : '',
+        align !== 'top' ? `is-align-${this.align}` : '',
+        { 'el-row--flex': this.type === 'flex' }
+      ],
+      style: this.style
+    }, this.$slots.default);
+  }
+};

packages/row/src/row.vue

@@ -1,48 +0,0 @@
-<template>
-  <div
-    class="el-row"
-    :style="style"
-    :class="[
-      justify !== 'start' ? 'is-justify-' + justify : '',
-      align !== 'top' ? 'is-align-' + align : '',
-      {
-        'el-row--flex': type === 'flex'
-      }
-    ]"
-  >
-    <slot></slot>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'ElRow',
-
-    componentName: 'ElRow',
-
-    props: {
-      gutter: Number,
-      type: String,
-      justify: {
-        type: String,
-        default: 'start'
-      },
-      align: {
-        type: String,
-        default: 'top'
-      }
-    },
-
-    computed: {
-      style() {
-        var ret = {};
-
-        if (this.gutter) {
-          ret.marginLeft = `-${this.gutter / 2}px`;
-          ret.marginRight = ret.marginLeft;
-        }
-
-        return ret;
-      }
-    }
-  };
-</script>