[新增] row 和 col 栅格组件

docs/docs/zh-CN/components/grid.md

@@ -0,0 +1,69 @@
+::: demo
+
+<template>
+  <lay-row space="10">
+     <lay-col md="6"><div class="grid-demo">1</div></lay-col>
+     <lay-col md="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="3"><div class="grid-demo">3</div></lay-col>
+     <lay-col md="3"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+     <lay-col md="3"><div class="grid-demo">5</div></lay-col>
+     <lay-col md="3"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-row space="10">
+     <lay-col md="6"><div class="grid-demo">1</div></lay-col>
+     <lay-col md="3" mdOffset="3"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-row space="10">
+     <lay-col md="6" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
+     <lay-col md="6" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -12,6 +12,7 @@
         <li><router-link to="/zh-CN/components/icon">图标</router-link></li>
         <li><router-link to="/zh-CN/components/panel">面板</router-link></li>
         <li><router-link to="/zh-CN/components/card">卡片</router-link></li>
+        <li><router-link to="/zh-CN/components/grid">栅格</router-link></li>
       </ul>
     </lay-side>
     <lay-body>

docs/src/router/zh-CN.ts

@@ -36,6 +36,10 @@ const zhCN = [
         path: '/zh-CN/components/card',
         component: () => import('../../docs/zh-CN/components/cards.md'),
         meta: { title: '卡片' },
+      },{
+        path: '/zh-CN/components/grid',
+        component: () => import('../../docs/zh-CN/components/grid.md'),
+        meta: { title: '栅格' },
       }
     ],
   },

src/css/all.css

@@ -0,0 +1,10 @@
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}

src/css/layui.css

@@ -1058,7 +1058,7 @@ a cite {
 	top: 0;
 	left: 0;
 	right: 0;
-	background-color: #23262E
+	background-color: #393D49
 }
 
 .layui-layout-admin .layui-side {

src/index.ts

@@ -1,7 +1,8 @@
 import type { App } from 'vue'
 import type { IDefineComponent, InstallOptions } from './module/type/index'
 
-import "./css/layui.css";
+import "./css/layui.css"
+import "./css/all.css"
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'
 import LayButtonContainer from './module/buttonContainer/index'
@@ -16,6 +17,8 @@ import LayFooter from "./module/footer/index"
 import LayLogo from "./module/logo/index"
 import LayPanel from "./module/panel/index"
 import LayProgress from "./module/panel/index"
+import LayCol from "./module/col/index"
+import LayRow from "./module/row/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -31,7 +34,9 @@ const components: Record<string, IDefineComponent> = {
   LayCard,
   LayProgress,
   LayButtonGroup,
-  LayButtonContainer
+  LayButtonContainer,
+  LayRow,
+  LayCol,
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -59,6 +64,8 @@ export {
   LayProgress,
   LayButtonGroup,
   LayButtonContainer,
+  LayRow,
+  LayCol,
   install,
 }
 

src/module/col/index.vue

@@ -1,6 +1,18 @@
 <template>
-  <div class="layui-col" :class="[md?'layui-col-md' + md : '', xs?'layui-col-xs':'', sm?'layui-col-sm':'']">
+  <div
-      <slot></slot>
+    class="layui-col"
+    :class="[
+      md ? 'layui-col-md' + md : '',
+      xs ? 'layui-col-xs' + xs : '',
+      sm ? 'layui-col-sm' + sm : '',
+      lg ? 'layui-col-lg' + lg : '',
+      mdOffset ? 'layui-col-md-offset' + mdOffset : '',
+      xsOffset ? 'layui-col-xs-offset' + xsOffset : '',
+      smOffset ? 'layui-col-sm-offset' + smOffset : '',
+      lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
+    ]"
+  >
+    <slot></slot>
   </div>
 </template>
 
@@ -12,5 +24,10 @@ const props =
     md?: string
     xs?: string
     sm?: string
+    lg?: string
+    mdOffset?: string
+    xsOffset?: string
+    smOffset?: string
+    lgOffset?: string
   }>()
 </script>