From 195224f7456c8642697aa91a54bb4bfac8f2d7b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Fri, 11 Mar 2022 00:13:29 +0800
Subject: [PATCH] docs: separate layout examples (#6526)

---
 docs/en-US/component/container.md          | 42 +++++++++-
 docs/examples/container/basic.vue          | 95 ----------------------
 docs/examples/container/common-layout.scss | 31 +++++++
 docs/examples/container/layout-ahm.vue     | 11 +++
 docs/examples/container/layout-ahmf.vue    | 12 +++
 docs/examples/container/layout-am.vue      |  8 ++
 docs/examples/container/layout-ham.vue     | 11 +++
 docs/examples/container/layout-hamf.vue    | 14 ++++
 docs/examples/container/layout-hm.vue      |  8 ++
 docs/examples/container/layout-hmf.vue     |  9 ++
 10 files changed, 145 insertions(+), 96 deletions(-)
 delete mode 100644 docs/examples/container/basic.vue
 create mode 100644 docs/examples/container/common-layout.scss
 create mode 100644 docs/examples/container/layout-ahm.vue
 create mode 100644 docs/examples/container/layout-ahmf.vue
 create mode 100644 docs/examples/container/layout-am.vue
 create mode 100644 docs/examples/container/layout-ham.vue
 create mode 100644 docs/examples/container/layout-hamf.vue
 create mode 100644 docs/examples/container/layout-hm.vue
 create mode 100644 docs/examples/container/layout-hmf.vue

diff --git a/docs/en-US/component/container.md b/docs/en-US/component/container.md
index 07368f9217..4eabb3b9fe 100644
--- a/docs/en-US/component/container.md
+++ b/docs/en-US/component/container.md
@@ -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
 
 :::
 
diff --git a/docs/examples/container/basic.vue b/docs/examples/container/basic.vue
deleted file mode 100644
index d657e83408..0000000000
--- a/docs/examples/container/basic.vue
+++ /dev/null
@@ -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>
diff --git a/docs/examples/container/common-layout.scss b/docs/examples/container/common-layout.scss
new file mode 100644
index 0000000000..af865be1ac
--- /dev/null
+++ b/docs/examples/container/common-layout.scss
@@ -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;
+  }
+}
diff --git a/docs/examples/container/layout-ahm.vue b/docs/examples/container/layout-ahm.vue
new file mode 100644
index 0000000000..4440d899da
--- /dev/null
+++ b/docs/examples/container/layout-ahm.vue
@@ -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>
diff --git a/docs/examples/container/layout-ahmf.vue b/docs/examples/container/layout-ahmf.vue
new file mode 100644
index 0000000000..b676c7ec6b
--- /dev/null
+++ b/docs/examples/container/layout-ahmf.vue
@@ -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>
diff --git a/docs/examples/container/layout-am.vue b/docs/examples/container/layout-am.vue
new file mode 100644
index 0000000000..3643e5610d
--- /dev/null
+++ b/docs/examples/container/layout-am.vue
@@ -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>
diff --git a/docs/examples/container/layout-ham.vue b/docs/examples/container/layout-ham.vue
new file mode 100644
index 0000000000..e86cfb0bdf
--- /dev/null
+++ b/docs/examples/container/layout-ham.vue
@@ -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>
diff --git a/docs/examples/container/layout-hamf.vue b/docs/examples/container/layout-hamf.vue
new file mode 100644
index 0000000000..a0ebbab5ea
--- /dev/null
+++ b/docs/examples/container/layout-hamf.vue
@@ -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>
diff --git a/docs/examples/container/layout-hm.vue b/docs/examples/container/layout-hm.vue
new file mode 100644
index 0000000000..340effc3b7
--- /dev/null
+++ b/docs/examples/container/layout-hm.vue
@@ -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>
diff --git a/docs/examples/container/layout-hmf.vue b/docs/examples/container/layout-hmf.vue
new file mode 100644
index 0000000000..d3af4a4145
--- /dev/null
+++ b/docs/examples/container/layout-hmf.vue
@@ -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>