test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 10:18:02 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: separate layout examples (#6526)

Browse Source
This commit is contained in:
云游君 2022-03-11 00:13:29 +08:00 committed by GitHub
parent 5bb0f8cd1c
commit 195224f745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 145 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/en-US/component/container.md
View File

@ -25,9 +25,49 @@ These components use flex for layout, so please make sure your browser supports
## Common layouts
<style lang="scss">
@use '../../examples/container/common-layout.scss';
</style>
:::demo
container/basic
container/layout-hm
:::
:::demo
container/layout-hmf
:::
:::demo
container/layout-am
:::
:::demo
container/layout-ham
:::
:::demo
container/layout-hamf
:::
:::demo
container/layout-ahm
:::
:::demo
container/layout-ahmf
:::

95
docs/examples/container/basic.vue
View File

@ -1,95 +0,0 @@
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<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>
</el-container>
<el-container>
<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>
</el-container>
</div>
</template>
<style scoped>
.common-layout .el-header,
.common-layout .el-footer {
background-color: #b3c0d1;
color: var(--el-text-color-primary);
text-align: center;
line-height: 60px;
}
.common-layout .el-footer {
line-height: 60px;
}
.common-layout .el-aside {
background-color: #d3dce6;
color: var(--el-text-color-primary);
text-align: center;
line-height: 200px;
}
.common-layout .el-main {
background-color: #e9eef3;
color: var(--el-text-color-primary);
text-align: center;
line-height: 160px;
}
.common-layout > .el-container {
margin-bottom: 40px;
}
.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.common-layout .el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

31
docs/examples/container/common-layout.scss Normal file
View File

@ -0,0 +1,31 @@
.common-layout {
.el-header,
.el-footer,
.el-main,
.el-aside {
display: flex;
justify-content: center;
align-items: center;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: var(--el-text-color-primary);
text-align: center;
}
.el-aside {
background-color: #d3dce6;
color: var(--el-text-color-primary);
text-align: center;
}
.el-main {
background-color: #e9eef3;
color: var(--el-text-color-primary);
text-align: center;
height: 150px;
}
}

11
docs/examples/container/layout-ahm.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="common-layout">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>

12
docs/examples/container/layout-ahmf.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div class="common-layout">
<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>
</el-container>
</div>
</template>

8
docs/examples/container/layout-am.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="common-layout">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</div>
</template>

11
docs/examples/container/layout-ham.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>

14
docs/examples/container/layout-hamf.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<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>
</el-container>
</div>
</template>

8
docs/examples/container/layout-hm.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</div>
</template>

9
docs/examples/container/layout-hmf.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>