2020-08-13 15:18:26 +08:00
## Container
Les composants Container servent à structurer la page:
`<el-container>` : Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>` , tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
`<el-header>` : Conteneur pour headers.
`<el-aside>` : Conteneur pour section latérale (en général un menu).
`<el-main>` : Conteneur pour la section principal.
`<el-footer>` : Conteneur pour footers.
:::tip
Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être `<el-container>` .
:::
### Mises en page habituelles
:::demo
```html
2021-01-06 14:12:22 +08:00
< div class = "common-layout" >
2020-08-13 15:18:26 +08:00
< el-container >
2021-01-06 14:12:22 +08:00
< el-header > Header< / el-header >
< el-main > Main< / el-main >
< / el-container >
< el-container >
< el-header > Header< / el-header >
2020-08-13 15:18:26 +08:00
< el-main > Main< / el-main >
2021-01-06 14:12:22 +08:00
< el-footer > Footer< / el-footer >
2020-08-13 15:18:26 +08:00
< / el-container >
< el-container >
< el-aside width = "200px" > Aside< / el-aside >
2021-01-06 14:12:22 +08:00
< el-main > Main< / el-main >
< / el-container >
< el-container >
< el-header > Header< / el-header >
2020-08-13 15:18:26 +08:00
< el-container >
2021-01-06 14:12:22 +08:00
< el-aside width = "200px" > Aside< / el-aside >
2020-08-13 15:18:26 +08:00
< el-main > Main< / el-main >
< / el-container >
< / el-container >
< el-container >
< el-header > Header< / el-header >
2021-01-06 14:12:22 +08:00
< el-container >
< el-aside width = "200px" > Aside< / el-aside >
< el-container >
< el-main > Main< / el-main >
< el-footer > Footer< / el-footer >
< / el-container >
< / el-container >
2020-08-13 15:18:26 +08:00
< / el-container >
< el-container >
2021-01-06 14:12:22 +08:00
< el-aside width = "200px" > Aside< / el-aside >
< el-container >
< el-header > Header< / el-header >
< el-main > Main< / el-main >
< / el-container >
< / el-container >
< el-container >
< el-aside width = "200px" > Aside< / el-aside >
< el-container >
< el-header > Header< / el-header >
< el-main > Main< / el-main >
< el-footer > Footer< / el-footer >
< / el-container >
2020-08-13 15:18:26 +08:00
< / el-container >
2021-01-06 14:12:22 +08:00
< / div >
2020-08-13 15:18:26 +08:00
< style >
.el-header, .el-footer {
background-color: #B3C0D1 ;
color: #333 ;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6 ;
color: #333 ;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3 ;
color: #333 ;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
< / style >
```
:::
### Exemple
:::demo
```html
< el-container style = "height: 500px; border: 1px solid #eee " >
< el-aside width = "200px" style = "background-color: rgb(238, 241, 246)" >
< el-menu :default-openeds = "['1', '3']" >
2021-08-25 10:03:36 +08:00
< el-sub-menu index = "1" >
2020-11-26 23:12:06 +08:00
< template #title >< i class = "el-icon-message" ></ i > Navigator One</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item-group >
2020-11-26 23:12:06 +08:00
< template #title > Group 1</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "1-1" > Option 1< / el-menu-item >
< el-menu-item index = "1-2" > Option 2< / el-menu-item >
< / el-menu-item-group >
< el-menu-item-group title = "Group 2" >
< el-menu-item index = "1-3" > Option 3< / el-menu-item >
< / el-menu-item-group >
2021-08-25 10:03:36 +08:00
< el-sub-menu index = "1-4" >
2020-11-26 23:12:06 +08:00
< template #title > Option4</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "1-4-1" > Option 4-1< / el-menu-item >
2021-08-25 10:03:36 +08:00
< / el-sub-menu >
< / el-sub-menu >
< el-sub-menu index = "2" >
2020-11-26 23:12:06 +08:00
< template #title >< i class = "el-icon-menu" ></ i > Navigator Two</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item-group >
2020-11-26 23:12:06 +08:00
< template #title > Group 1</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "2-1" > Option 1< / el-menu-item >
< el-menu-item index = "2-2" > Option 2< / el-menu-item >
< / el-menu-item-group >
< el-menu-item-group title = "Group 2" >
< el-menu-item index = "2-3" > Option 3< / el-menu-item >
< / el-menu-item-group >
2021-08-25 10:03:36 +08:00
< el-sub-menu index = "2-4" >
2020-11-26 23:12:06 +08:00
< template #title > Option 4</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "2-4-1" > Option 4-1< / el-menu-item >
2021-08-25 10:03:36 +08:00
< / el-sub-menu >
< / el-sub-menu >
< el-sub-menu index = "3" >
2020-11-26 23:12:06 +08:00
< template #title >< i class = "el-icon-setting" ></ i > Navigator Three</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item-group >
2020-11-26 23:12:06 +08:00
< template #title > Group 1</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "3-1" > Option 1< / el-menu-item >
< el-menu-item index = "3-2" > Option 2< / el-menu-item >
< / el-menu-item-group >
< el-menu-item-group title = "Group 2" >
< el-menu-item index = "3-3" > Option 3< / el-menu-item >
< / el-menu-item-group >
2021-08-25 10:03:36 +08:00
< el-sub-menu index = "3-4" >
2020-11-26 23:12:06 +08:00
< template #title > Option 4</ template >
2020-08-13 15:18:26 +08:00
< el-menu-item index = "3-4-1" > Option 4-1< / el-menu-item >
2021-08-25 10:03:36 +08:00
< / el-sub-menu >
< / el-sub-menu >
2020-08-13 15:18:26 +08:00
< / el-menu >
< / el-aside >
< el-container >
< el-header style = "text-align: right; font-size: 12px" >
< el-dropdown >
< i class = "el-icon-setting" style = "margin-right: 15px" > < / i >
2020-11-26 23:12:06 +08:00
< template #dropdown >
< el-dropdown-menu >
< el-dropdown-item > View< / el-dropdown-item >
< el-dropdown-item > Add< / el-dropdown-item >
< el-dropdown-item > Delete< / el-dropdown-item >
< / el-dropdown-menu >
< / template >
2020-08-13 15:18:26 +08:00
< / el-dropdown >
< span > Tom< / span >
< / el-header >
< el-main >
< el-table :data = "tableData" >
< el-table-column prop = "date" label = "Date" width = "140" >
< / el-table-column >
< el-table-column prop = "name" label = "Name" width = "120" >
< / el-table-column >
< el-table-column prop = "address" label = "Address" >
< / el-table-column >
< / el-table >
< / el-main >
< / el-container >
< / el-container >
< style >
.el-header {
background-color: #B3C0D1 ;
color: #333 ;
line-height: 60px;
}
.el-aside {
color: #333 ;
}
< / style >
< script >
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
< / script >
2021-06-08 13:31:14 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
};
const tableData = ref(Array(20).fill(item));
return {
tableData,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Attributs de Container
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | Direction d'affichage pour les éléments enfants. | string | horizontal / vertical | vertical quand dans `el-header` ou `el-footer` ; horizontal sinon |
### Attributs de Header
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du header. | string | — | 60px |
### Attributs de Aside
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | Largeur de la section. | string | — | 300px |
### Attributs de Footer
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du footer. | string | — | 60px |