mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
363 lines
11 KiB
Markdown
363 lines
11 KiB
Markdown
## Layout
|
|
|
|
Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.
|
|
|
|
:::tip
|
|
The component uses flex layout by default, no need to set `type="flex"` manually.
|
|
|
|
Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width.
|
|
:::
|
|
|
|
### Mise en page basique
|
|
|
|
Créez une grille de mise en page basique grâce aux colonnes.
|
|
|
|
:::demo Grâce à `row` et `col`, vous pouvez arranger la mise en page en utilisant l'attribut `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>
|
|
|
|
<style>
|
|
.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>
|
|
```
|
|
:::
|
|
|
|
### Espacement
|
|
|
|
L'espacement entre colonnes est configurable.
|
|
|
|
:::demo Utilisez l'attribut `gutter` dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 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>
|
|
|
|
<style>
|
|
.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>
|
|
```
|
|
:::
|
|
|
|
### Mise en page complexe
|
|
|
|
Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.
|
|
|
|
:::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>
|
|
|
|
<style>
|
|
.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>
|
|
```
|
|
:::
|
|
|
|
### Décalage des colonnes
|
|
|
|
Vous pouvez spécifier un décalage pour les colonnes.
|
|
|
|
:::demo Utiliser l'attribut `offset` pour régler le décalage.
|
|
|
|
```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>
|
|
|
|
<style>
|
|
.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>
|
|
```
|
|
:::
|
|
|
|
### Alignement
|
|
|
|
Default use the flex layout to make flexible alignment of columns.
|
|
|
|
:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
|
```html
|
|
<el-row 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 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 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 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 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>
|
|
|
|
<style>
|
|
.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>
|
|
```
|
|
:::
|
|
|
|
### Mise en page responsive
|
|
|
|
Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.
|
|
|
|
:::demo
|
|
```html
|
|
<el-row :gutter="10">
|
|
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
|
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
|
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
|
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
|
</el-row>
|
|
|
|
<style>
|
|
.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;
|
|
}
|
|
</style>
|
|
```
|
|
:::
|
|
|
|
### Classes pour cacher certains éléments
|
|
|
|
Element Plus fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:
|
|
|
|
```js
|
|
import 'element-plus/lib/theme-chalk/display.css';
|
|
```
|
|
|
|
Ces classes sont:
|
|
- `hidden-xs-only` - disparaît sur les très petits viewports uniquement
|
|
- `hidden-sm-only` - disparaît sur les petits viewports uniquement
|
|
- `hidden-sm-and-down` - disparaît sur les petits viewports et plus petits
|
|
- `hidden-sm-and-up` - disparaît sur les petits viewports et plus grand
|
|
- `hidden-md-only` - disparaît sur les viewports moyens uniquement
|
|
- `hidden-md-and-down` - disparaît sur les viewports moyens et plus petits
|
|
- `hidden-md-and-up` - disparaît sur les viewports moyens et plus grand
|
|
- `hidden-lg-only` - disparaît sur les viewports larges uniquement
|
|
- `hidden-lg-and-down` - disparaît sur les viewports larges et plus petits
|
|
- `hidden-lg-and-up` - disparaît sur les viewports larges et plus grand
|
|
- `hidden-xl-only` - disparaît sur les viewports très larges uniquement
|
|
|
|
### Attributs des lignes
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|
| gutter | Espacement de la grille. | number | — | 0 |
|
|
| justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
|
|
| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
|
|
| tag | Élément de tag personnalisé. | string | * | div |
|
|
|
|
### Attributs des colonnes
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|
| span | Nombre de colonnes sur lesquelles l'élément s'étend. | number | — | 24 |
|
|
| offset | Nombre d'espacements sur la gauche de l'élément. | number | — | 0 |
|
|
| push | Nombre de colonnes dont l'élément se déplace vers la droite. | number | — | 0 |
|
|
| pull | Nombre de colonnes dont l'élément se déplace vers la gauche. | number | — | 0 |
|
|
| xs | `<768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| sm | `≥768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| md | `≥992px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| lg | `≥1200px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| xl | `≥1920px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| tag | Élément de tag personnalisé. | string | * | div |
|