mirror of https://github.com/ElemeFE/element
update grid
baiyaaaaa
parent
8a00aff7e7
commit
2a8c368b0b
|
|
@ -0,0 +1,176 @@
|
|||
<style>
|
||||
.demo-layout {
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-col {
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
通过基础的 24 分栏，迅速简便地创建布局
|
||||
|
||||
### 基础布局
|
||||
|
||||
使用单一分栏创建基础的栅格布局
|
||||
|
||||
::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 分栏间隔
|
||||
|
||||
分栏之间存在间隔
|
||||
|
||||
::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 混合布局
|
||||
|
||||
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 分栏偏移
|
||||
|
||||
分栏支持按一定的栏数进行偏移
|
||||
|
||||
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 对齐方式
|
||||
|
||||
对分栏进行灵活的对齐。
|
||||
|
||||
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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 |
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
<template>
|
||||
<div class="el-row" :style="style">
|
||||
<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>
|
||||
|
|
@ -8,7 +18,16 @@
|
|||
name: 'ElRow',
|
||||
|
||||
props: {
|
||||
gutter: Number
|
||||
gutter: Number,
|
||||
type: String,
|
||||
justify: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue