mirror of https://github.com/ElemeFE/element
181 lines
6.6 KiB
Markdown
181 lines
6.6 KiB
Markdown
|
<style>
|
||
|
|
.demo-layout {
|
||
|
|
.el-row {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-col {
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.bg-purple-dark {
|
||
|
|
background: #99a9bf;
|
||
|
|
}
|
||
|
|
.bg-purple {
|
||
|
|
background: #d3dce6;
|
||
|
|
}
|
||
|
|
.bg-purple-light {
|
||
|
|
background: #e5e9f2;
|
||
|
|
}
|
||
|
|
.grid-content {
|
||
|
|
border-radius: 4px;
|
||
|
|
min-height: 36px;
|
||
|
|
}
|
||
|
|
.row-bg {
|
||
|
|
padding: 10px 0;
|
||
|
|
background-color: #f9fafc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
Quickly and easily create layouts with the basic 24-column.
|
||
|
|
|
||
|
|
### Basic layout
|
||
|
|
|
||
|
|
Create basic grid layout using columns.
|
||
|
|
|
||
|
|
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Column spacing
|
||
|
|
|
||
|
|
Column spacing is supported.
|
||
|
|
|
||
|
|
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Hybrid layout
|
||
|
|
|
||
|
|
Form a more complex hybrid layout by combining the basic 1/24 columns.
|
||
|
|
|
||
|
|
::: 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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Column offset
|
||
|
|
|
||
|
|
You can specify column offsets.
|
||
|
|
|
||
|
|
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Alignment
|
||
|
|
|
||
|
|
Flexible alignment of columns.
|
||
|
|
|
||
|
|
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or 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
|
||
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
||
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
|
|
| gutter | grid spacing | number | — | 0 |
|
||
|
|
| 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 |
|
||
|
|
|
||
|
|
### Col Attributes
|
||
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
||
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
|
|
| **span** | number of column the grid spans, **required** | number | — | — |
|
||
|
|
| offset | number of spacing on the left side of the grid | number | — | 0 |
|
||
|
|
| push | number of columns that grid moves to the right | number | — | 0 |
|
||
|
|
| pull | number of columns that grid moves to the left | number | — | 0 |
|
||
|
|
|