菜园前端

Appearance

Layout 布局 ​

布局组件，通过 24 分栏的形式，可以快速的创建横向布局。就像一块蛋糕切成 24 份，你想给每个人分多少块蛋糕都可以。

按需引入方式 ​

如果是完整引入可跳过此步骤

javascript
import Vue from 'vue'
import { Row, Col } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/row.css'
import 'element-ui/lib/theme-chalk/col.css'

Vue.use(Row)
Vue.use(Col)
import Vue from 'vue'
import { Row, Col } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/row.css'
import 'element-ui/lib/theme-chalk/col.css'

Vue.use(Row)
Vue.use(Col)

基础布局 ​

vue
<template>
    <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
    </el-row>

    <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>
<template>
    <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
    </el-row>

    <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>

分栏间隔 ​

vue
<template>
    <el-row :gutter="20">
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>
<template>
    <el-row :gutter="20">
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>

Row Attributes ​

参数说明类型默认值
gutter栅格间隔number0
...

Col Attributes ​

参数说明类型默认值
span占据的份数number24
...