From 5c2183c5bbe0f9587c48bc526bb16f75315512bd Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 25 May 2021 16:56:53 +0800
Subject: [PATCH] docs(layout): rewrite with better look

---
 src/layout/demos/enUS/absolute.demo.md        |  35 +++--
 src/layout/demos/enUS/basic.demo.md           |  80 +++++++----
 src/layout/demos/enUS/border.demo.md          |  22 ++-
 src/layout/demos/enUS/collapse.demo.md        |  65 ++++-----
 src/layout/demos/enUS/index.demo-entry.md     |   6 +-
 src/layout/demos/enUS/inverted.demo.md        | 136 ++++++++++++++++++
 src/layout/demos/enUS/scroll-to.demo.md       |  63 +++++---
 src/layout/demos/enUS/scrollbar.demo.md       |  52 +++++--
 src/layout/demos/enUS/set-padding.demo.md     |  60 ++++----
 .../demos/enUS/show-sider-content.demo.md     |  52 +++----
 src/layout/demos/enUS/trigger-button.demo.md  |  49 -------
 src/layout/demos/zhCN/absolute.demo.md        |  35 +++--
 src/layout/demos/zhCN/basic.demo.md           |  68 +++++----
 src/layout/demos/zhCN/border.demo.md          |  20 ++-
 src/layout/demos/zhCN/collapse.demo.md        |  56 +++-----
 src/layout/demos/zhCN/index.demo-entry.md     |   3 +-
 src/layout/demos/zhCN/inverted.demo.md        |   4 +-
 src/layout/demos/zhCN/scroll-to.demo.md       |  58 ++++++--
 src/layout/demos/zhCN/scrollbar.demo.md       |  52 +++++--
 src/layout/demos/zhCN/set-padding.demo.md     |  60 ++++----
 .../demos/zhCN/show-sider-content.demo.md     |  48 +++----
 src/layout/demos/zhCN/trigger-button.demo.md  |  49 -------
 src/menu/demos/enUS/inverted.demo.md          |   5 +-
 src/menu/demos/enUS/long-label.demo.md        |  10 +-
 src/menu/demos/zhCN/inverted.demo.md          |   4 +-
 25 files changed, 642 insertions(+), 450 deletions(-)
 create mode 100644 src/layout/demos/enUS/inverted.demo.md
 delete mode 100644 src/layout/demos/enUS/trigger-button.demo.md
 delete mode 100644 src/layout/demos/zhCN/trigger-button.demo.md

diff --git a/src/layout/demos/enUS/absolute.demo.md b/src/layout/demos/enUS/absolute.demo.md
index 630f376d8..503e6202e 100644
--- a/src/layout/demos/enUS/absolute.demo.md
+++ b/src/layout/demos/enUS/absolute.demo.md
@@ -3,19 +3,36 @@
 All layout components can use absolute positioning. It can be used when you want content scrolling inside fixed area.
 
 ```html
-<div style="width: 100%; height: 240px; position: relative">
+<div style="height: 360px; position: relative">
   <n-layout position="absolute">
-    <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
+    <n-layout-header style="height: 64px; padding: 24px;" bordered
+      >Yiheyuan Road</n-layout-header
+    >
     <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
-      <n-layout-sider> Cool Sider </n-layout-sider>
-      <n-layout>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1
-        ><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1
-        ><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+      <n-layout-sider bordered content-style="padding: 24px;"
+        >Handian Bridge</n-layout-sider
+      >
+      <n-layout content-style="padding: 24px;">
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
       </n-layout>
     </n-layout>
-    <n-layout-footer position="absolute" style="height: 64px">
-      Cool Footer
+    <n-layout-footer
+      bordered
+      position="absolute"
+      style="height: 64px; padding: 24px;"
+    >
+      城府路
     </n-layout-footer>
   </n-layout>
 </div>
diff --git a/src/layout/demos/enUS/basic.demo.md b/src/layout/demos/enUS/basic.demo.md
index 46203a20c..5dd105c46 100644
--- a/src/layout/demos/enUS/basic.demo.md
+++ b/src/layout/demos/enUS/basic.demo.md
@@ -1,37 +1,61 @@
 # Basic
 
+I hope the demo can meet you demand, so that you can have more time to do other things.
+
 ```html
-<n-layout>
-  <n-layout-header> Cool Header </n-layout-header>
-  <n-layout-content> Cool Content </n-layout-content>
-  <n-layout-footer> Cool Footer </n-layout-footer>
-</n-layout>
-<br />
-<n-layout>
-  <n-layout-header> Cool Header </n-layout-header>
-  <n-layout has-sider>
-    <n-layout-sider> Cool Sider </n-layout-sider>
-    <n-layout-content> Cool Content </n-layout-content>
-  </n-layout>
-  <n-layout-footer> Cool Footer </n-layout-footer>
-</n-layout>
-<br />
-<n-layout has-sider>
-  <n-layout-sider> Cool Sider </n-layout-sider>
+<n-space vertical size="large">
   <n-layout>
-    <n-layout-header> Cool Header </n-layout-header>
-    <n-layout-content> Cool Content </n-layout-content>
-    <n-layout-footer> Cool Footer </n-layout-footer>
+    <n-layout-header>Yiheyuan Road</n-layout-header>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
+    <n-layout-footer>Chengfu Road</n-layout-footer>
   </n-layout>
-</n-layout>
+  <n-layout>
+    <n-layout-header>Yiheyuan Road</n-layout-header>
+    <n-layout has-sider>
+      <n-layout-sider content-style="padding: 24px"
+        >Handian Bridge</n-layout-sider
+      >
+      <n-layout-content content-style="padding: 24px"
+        >Pingshan Road</n-layout-content
+      >
+    </n-layout>
+    <n-layout-footer>Chengfu Road</n-layout-footer>
+  </n-layout>
+  <n-layout has-sider>
+    <n-layout-sider content-style="padding: 24px;"
+      >Handian Bridge</n-layout-sider
+    >
+    <n-layout>
+      <n-layout-header>Yiheyuan Road</n-layout-header>
+      <n-layout-content content-style="padding: 24px"
+        >Pingshan Road</n-layout-content
+      >
+      <n-layout-footer content-style="padding: 24px"
+        >Chengfu Road</n-layout-footer
+      >
+    </n-layout>
+  </n-layout>
+</n-space>
 ```
 
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
+```css
+.n-layout-header {
+  background: rgba(128, 128, 128, 0.2);
+  padding: 24px;
+}
+
+.n-layout-footer {
+  background: rgba(128, 128, 128, 0.2);
+  padding: 24px;
+}
+
+.n-layout-sider {
+  background: rgba(128, 128, 128, 0.3);
+}
+
+.n-layout-content {
+  background: rgba(128, 128, 128, 0.4);
 }
 ```
diff --git a/src/layout/demos/enUS/border.demo.md b/src/layout/demos/enUS/border.demo.md
index 8548f5f39..9d94e6b4b 100644
--- a/src/layout/demos/enUS/border.demo.md
+++ b/src/layout/demos/enUS/border.demo.md
@@ -4,11 +4,25 @@ You can set `bordered` on sider、footer、header.
 
 ```html
 <n-layout has-sider>
-  <n-layout-sider bordered> Cool Sider </n-layout-sider>
+  <n-layout-sider bordered content-style="padding: 24px;"
+    >Handian Bridge</n-layout-sider
+  >
   <n-layout>
-    <n-layout-header bordered> Cool Header </n-layout-header>
-    <n-layout-content> Cool Content </n-layout-content>
-    <n-layout-footer bordered> Cool Footer </n-layout-footer>
+    <n-layout-header bordered>Yiheyuan Road</n-layout-header>
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
+    <n-layout-footer bordered>Chengfu Road</n-layout-footer>
   </n-layout>
 </n-layout>
 ```
+
+```css
+.n-layout-header {
+  padding: 24px;
+}
+
+.n-layout-footer {
+  padding: 24px;
+}
+```
diff --git a/src/layout/demos/enUS/collapse.demo.md b/src/layout/demos/enUS/collapse.demo.md
index 6ea02f5bb..83655412c 100644
--- a/src/layout/demos/enUS/collapse.demo.md
+++ b/src/layout/demos/enUS/collapse.demo.md
@@ -1,62 +1,47 @@
 # Collapse Sider
 
-Use `collapsed` prop to control status of sider. (Not working for `n-layout` and `n-layout-sider` with `absolute` position.)
+Use `collapsed` prop to control status of sider. (The adjacent `n-layout-sider` and `n-layout-sider` must be `static` positioned.)
 
-Sider has two `collapse-mode`: `width`, `transform`. `width` will actually change width of sider, `transform` will just move sider out of layout.
+Sider has two `collapse-mode`, `width` & `transform`. `width` will actually change width of sider, `transform` will just move sider out of layout.
 
 Use `collapsed-width` and `width` to set sider's width.
 
+Use `show-trigger` to use builtin button.
+
 ```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+<n-space vertical size="large">
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      Cool Sider Cool Sider Cool Sider
+      <p>
+        Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian
+        Bridge
+      </p>
     </n-layout-sider>
-    <n-layout style="padding: 24px">
-      <n-layout-content>
-        <span>Content</span>
-      </n-layout-content>
-      <n-layout-footer>
-        <n-h1>Footer</n-h1>
-      </n-layout-footer>
-    </n-layout>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
   </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    Cool Header
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      <n-h1>Sider</n-h1>
+      <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout style="padding: 24px">
-      <span>Content</span>
-    </n-layout>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
   </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: true
-    }
-  }
-}
+</n-space>
 ```
diff --git a/src/layout/demos/enUS/index.demo-entry.md b/src/layout/demos/enUS/index.demo-entry.md
index 58131f142..f822f821d 100644
--- a/src/layout/demos/enUS/index.demo-entry.md
+++ b/src/layout/demos/enUS/index.demo-entry.md
@@ -12,13 +12,13 @@ If you are use version before v2.3.0, you may want to know about <n-a href="#Cha
 
 ```demo
 basic
+set-padding
 border
 embedded
-set-padding
 absolute
 scrollbar
 collapse
-trigger-button
+inverted
 show-sider-content
 scroll-to
 ```
@@ -64,7 +64,7 @@ scroll-to
 | inverted | `boolean` | `false` | Whether to use inverted background. |
 | native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content |
 | position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect. |
-| show-content | `boolean` | `true` | If set to `false`, sider content will be invisible. |
+| show-collapsed-content | `boolean` | `true` | Whether to show content in sider after it is collapsed. |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
 | trigger-style | `string \| Object` | `undefined` |  |
 | width | `number` | `272` |  |
diff --git a/src/layout/demos/enUS/inverted.demo.md b/src/layout/demos/enUS/inverted.demo.md
new file mode 100644
index 000000000..6d63447ca
--- /dev/null
+++ b/src/layout/demos/enUS/inverted.demo.md
@@ -0,0 +1,136 @@
+# Inverted
+
+Use `inverted` to add contrast. You can set the prop on header, footer and sider. Usually used with menu.
+
+```html
+<n-space vertical>
+  <n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
+  <n-layout>
+    <n-layout-header :inverted="inverted" bordered>
+      Header Header Header
+      <n-menu mode="horizontal" :inverted="inverted" :options="menuOptions" />
+    </n-layout-header>
+    <n-layout has-sider>
+      <n-layout-sider
+        bordered
+        show-trigger
+        collapse-mode="width"
+        :collapsed-width="64"
+        :width="240"
+        :native-scrollbar="false"
+        :inverted="inverted"
+        style="max-height: 320px;"
+      >
+        <n-menu
+          :inverted="inverted"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="menuOptions"
+        />
+      </n-layout-sider>
+      <n-layout style="max-height: 320px;" />
+    </n-layout>
+    <n-layout-footer :inverted="inverted" bordered>
+      Footer Footer Footer
+    </n-layout-footer>
+  </n-layout>
+</n-space>
+```
+
+```js
+import { h, defineComponent, ref } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  BookOutline as BookIcon,
+  PersonOutline as PersonIcon,
+  WineOutline as WineIcon
+} from '@vicons/ionicons5'
+
+function renderIcon (icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+  {
+    label: 'Hear the Wind Sing',
+    key: 'hear-the-wind-sing',
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: 'Pinball 1973',
+    key: 'pinball-1973',
+    icon: renderIcon(BookIcon),
+    disabled: true,
+    children: [
+      {
+        label: 'Rat',
+        key: 'rat'
+      }
+    ]
+  },
+  {
+    label: 'A Wild Sheep Chase',
+    key: 'a-wild-sheep-chase',
+    disabled: true,
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: 'Dance Dance Dance',
+    key: 'Dance Dance Dance',
+    icon: renderIcon(BookIcon),
+    children: [
+      {
+        type: 'group',
+        label: 'People',
+        key: 'people',
+        children: [
+          {
+            label: 'Narrator',
+            key: 'narrator',
+            icon: renderIcon(PersonIcon)
+          },
+          {
+            label: 'Sheep Man',
+            key: 'sheep-man',
+            icon: renderIcon(PersonIcon)
+          }
+        ]
+      },
+      {
+        label: 'Beverage',
+        key: 'beverage',
+        icon: renderIcon(WineIcon),
+        children: [
+          {
+            label: 'Whisky',
+            key: 'whisky'
+          }
+        ]
+      },
+      {
+        label: 'Food',
+        key: 'food',
+        children: [
+          {
+            label: 'Sandwich',
+            key: 'sandwich'
+          }
+        ]
+      },
+      {
+        label: 'The past increases. The future recedes.',
+        key: 'the-past-increases-the-future-recedes'
+      }
+    ]
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      inverted: ref(false),
+      menuOptions
+    }
+  }
+})
+```
diff --git a/src/layout/demos/enUS/scroll-to.demo.md b/src/layout/demos/enUS/scroll-to.demo.md
index 1a1756ee2..cbb5faeba 100644
--- a/src/layout/demos/enUS/scroll-to.demo.md
+++ b/src/layout/demos/enUS/scroll-to.demo.md
@@ -1,32 +1,59 @@
 # Scroll To
 
 ```html
-<n-space vertical>
+<n-space vertical size="large">
   <n-space>
     <n-button @click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })">
-      Sider Scroll to 120px
+      Sider scroll to 120px
     </n-button>
     <n-button @click="$refs.content.scrollTo({ top: 120, behavior: 'smooth' })">
-      Content Scroll to 120px
+      Content scroll to 120px
     </n-button>
   </n-space>
-
-  <n-layout style="height: 480px;">
-    <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
-    <n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
-      <n-layout-sider ref="sider">
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1
-        ><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1
-        ><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+  <n-layout style="height: 360px;">
+    <n-layout-header style="height: 64px; padding: 24px;" bordered
+      >Yiheyuan Road</n-layout-header
+    >
+    <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
+      <n-layout-sider ref="sider" bordered content-style="padding: 24px;">
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
+        <n-h2>Handian Bridge</n-h2>
       </n-layout-sider>
-      <n-layout :native-scrollbar="false" ref="content">
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1
-        ><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1
-        ><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-      </n-layout>
+      <n-layout-content
+        ref="content"
+        content-style="padding: 24px;"
+        :native-scrollbar="false"
+      >
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+        <n-h2>Pingshan Road</n-h2>
+      </n-layout-content>
     </n-layout>
-    <n-layout-footer position="absolute" style="height: 64px">
-      Cool Footer
+    <n-layout-footer
+      bordered
+      position="absolute"
+      style="height: 64px; padding: 24px;"
+    >
+      Chengfu Road
     </n-layout-footer>
   </n-layout>
 </n-space>
diff --git a/src/layout/demos/enUS/scrollbar.demo.md b/src/layout/demos/enUS/scrollbar.demo.md
index 75aec55fa..21e0e0463 100644
--- a/src/layout/demos/enUS/scrollbar.demo.md
+++ b/src/layout/demos/enUS/scrollbar.demo.md
@@ -3,22 +3,50 @@
 Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on `n-layout-sider`, `n-layout` or `n-content`).
 
 ```html
-<n-layout style="height: 480px;">
-  <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
+<n-layout style="height: 360px;">
+  <n-layout-header style="height: 64px; padding: 24px;" bordered
+    >Yiheyuan Road</n-layout-header
+  >
   <n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
-    <n-layout-sider :native-scrollbar="false">
-      <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1
-      ><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1
-      ><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+    <n-layout-sider
+      content-style="padding: 24px;"
+      :native-scrollbar="false"
+      bordered
+    >
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
+      <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout :native-scrollbar="false">
-      <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1
-      ><n-h1>Long</n-h1><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1
-      ><n-h1>Long</n-h1> <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+    <n-layout content-style="padding: 24px;" :native-scrollbar="false">
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
+      <n-h2>Pingshan Road</n-h2>
     </n-layout>
   </n-layout>
-  <n-layout-footer position="absolute" style="height: 64px">
-    Cool Footer
+  <n-layout-footer
+    position="absolute"
+    style="height: 64px; padding: 24px;"
+    bordered
+  >
+    城府路
   </n-layout-footer>
 </n-layout>
 ```
diff --git a/src/layout/demos/enUS/set-padding.demo.md b/src/layout/demos/enUS/set-padding.demo.md
index 8455da0f6..2e3a956c6 100644
--- a/src/layout/demos/enUS/set-padding.demo.md
+++ b/src/layout/demos/enUS/set-padding.demo.md
@@ -1,34 +1,40 @@
-# Set Padding
+# About Setting Padding
 
 Naive-ui doesn't recommend setting padding on `n-layout` and `n-layout-sider` directly, since sometimes nested DOM structure exists in them. A better solution is to set padding on their children.
 
 If you still want to do so, please make sure you know about their DOM structure.
 
 ```html
-Not Recommended:
-<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
-  <n-layout-sider style="padding: 24px;">
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-  </n-layout-sider>
-</n-layout>
-Recommended:
-<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
-  <n-layout-sider content-style="padding: 24px;">
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-  </n-layout-sider>
-</n-layout>
+<n-space vertical size="large">
+  <n-layout has-sider style="height: 240px;">
+    <n-layout-sider style="padding: 24px;">
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+      <n-h2>... Not Recommended</n-h2>
+    </n-layout-sider>
+  </n-layout>
+  <n-layout has-sider style="height: 240px;">
+    <n-layout-sider content-style="padding: 24px;">
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+      <n-h2>Recommended</n-h2>
+    </n-layout-sider>
+  </n-layout>
+</n-space>
+```
+
+```css
+.n-layout-sider {
+  background: rgba(128, 128, 128, 0.3);
+}
 ```
diff --git a/src/layout/demos/enUS/show-sider-content.demo.md b/src/layout/demos/enUS/show-sider-content.demo.md
index 7d3d33a3a..6525dfcac 100644
--- a/src/layout/demos/enUS/show-sider-content.demo.md
+++ b/src/layout/demos/enUS/show-sider-content.demo.md
@@ -1,51 +1,39 @@
 # Hide Sider Content
 
-Sometimes you don't want to see content inside sider after it's collapsed.
+Sometimes you don't want to see content inside sider after it's collapsed. Set `show-collapsed-content` to `false` on sider.
 
 ```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+<n-space vertical size="large">
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="width"
-      :show-content="!collapsed"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      :show-collapsed-content="false"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      <n-h1>Sider</n-h1>
+      Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge
     </n-layout-sider>
-    <n-layout style="padding: 24px;"> Content </n-layout>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
   </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    Cool Header
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
-      :show-content="!collapsed"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      <n-h1>Sider Sider Sider</n-h1>
+      <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout style="padding: 24px;"> Content </n-layout>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
   </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
-}
+</n-space>
 ```
diff --git a/src/layout/demos/enUS/trigger-button.demo.md b/src/layout/demos/enUS/trigger-button.demo.md
deleted file mode 100644
index 8e82a0ee6..000000000
--- a/src/layout/demos/enUS/trigger-button.demo.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Trigger Button
-
-A trigger button, for free.
-
-```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
-    <n-layout-sider
-      collapse-mode="width"
-      show-trigger
-      :collapsed-width="120"
-      :width="240"
-      v-model:collapsed="collapsed"
-    >
-      <n-h1>Sider</n-h1>
-    </n-layout-sider>
-    <n-layout style="padding: 24px;"> Content </n-layout>
-  </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    Cool Header
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
-    <n-layout-sider
-      show-trigger="arrow-circle"
-      collapse-mode="transform"
-      :collapsed-width="120"
-      :width="240"
-      v-model:collapsed="collapsed"
-    >
-      <n-h1>Sider</n-h1>
-    </n-layout-sider>
-    <n-layout position="absolute" style="padding: 24px;"> Content </n-layout>
-  </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
-}
-```
diff --git a/src/layout/demos/zhCN/absolute.demo.md b/src/layout/demos/zhCN/absolute.demo.md
index 942a781ae..274cf1ef8 100644
--- a/src/layout/demos/zhCN/absolute.demo.md
+++ b/src/layout/demos/zhCN/absolute.demo.md
@@ -3,19 +3,36 @@
 所有布局组件可以使用绝对定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
 
 ```html
-<div style="width: 100%; height: 240px; position: relative">
+<div style="height: 360px; position: relative">
   <n-layout position="absolute">
-    <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
+    <n-layout-header style="height: 64px; padding: 24px;" bordered
+      >颐和园路</n-layout-header
+    >
     <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
-      <n-layout-sider> 酷的边栏 </n-layout-sider>
-      <n-layout>
-        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1
-        ><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1
-        ><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+      <n-layout-sider bordered content-style="padding: 24px;"
+        >海淀桥</n-layout-sider
+      >
+      <n-layout content-style="padding: 24px;">
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
       </n-layout>
     </n-layout>
-    <n-layout-footer position="absolute" style="height: 64px">
-      酷的页脚
+    <n-layout-footer
+      bordered
+      position="absolute"
+      style="height: 64px; padding: 24px;"
+    >
+      城府路
     </n-layout-footer>
   </n-layout>
 </div>
diff --git a/src/layout/demos/zhCN/basic.demo.md b/src/layout/demos/zhCN/basic.demo.md
index 9f08382df..d4d44092e 100644
--- a/src/layout/demos/zhCN/basic.demo.md
+++ b/src/layout/demos/zhCN/basic.demo.md
@@ -1,37 +1,49 @@
 # 基础用法
 
+我希望这个 demo 就能满足你的需求，这样你的时间还能干点别的。
+
 ```html
-<n-layout>
-  <n-layout-header> 酷的页头 </n-layout-header>
-  <n-layout-content> 酷的内容 </n-layout-content>
-  <n-layout-footer> 酷的页脚 </n-layout-footer>
-</n-layout>
-<br />
-<n-layout>
-  <n-layout-header> 酷的页头 </n-layout-header>
-  <n-layout has-sider>
-    <n-layout-sider> 酷的边栏 </n-layout-sider>
-    <n-layout-content> 酷的内容 </n-layout-content>
-  </n-layout>
-  <n-layout-footer> 酷的页脚 </n-layout-footer>
-</n-layout>
-<br />
-<n-layout has-sider>
-  <n-layout-sider> 酷的边栏 </n-layout-sider>
+<n-space vertical size="large">
   <n-layout>
-    <n-layout-header> 酷的页头 </n-layout-header>
-    <n-layout-content> 酷的内容 </n-layout-content>
-    <n-layout-footer> 酷的页脚 </n-layout-footer>
+    <n-layout-header>颐和园路</n-layout-header>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
-</n-layout>
+  <n-layout>
+    <n-layout-header>颐和园路</n-layout-header>
+    <n-layout has-sider>
+      <n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
+      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    </n-layout>
+    <n-layout-footer>成府路</n-layout-footer>
+  </n-layout>
+  <n-layout has-sider>
+    <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
+    <n-layout>
+      <n-layout-header>颐和园路</n-layout-header>
+      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-footer content-style="padding: 24px">成府路</n-layout-footer>
+    </n-layout>
+  </n-layout>
+</n-space>
 ```
 
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
+```css
+.n-layout-header {
+  background: rgba(128, 128, 128, 0.2);
+  padding: 24px;
+}
+
+.n-layout-footer {
+  background: rgba(128, 128, 128, 0.2);
+  padding: 24px;
+}
+
+.n-layout-sider {
+  background: rgba(128, 128, 128, 0.3);
+}
+
+.n-layout-content {
+  background: rgba(128, 128, 128, 0.4);
 }
 ```
diff --git a/src/layout/demos/zhCN/border.demo.md b/src/layout/demos/zhCN/border.demo.md
index 3b9b3a63e..f1ce08485 100644
--- a/src/layout/demos/zhCN/border.demo.md
+++ b/src/layout/demos/zhCN/border.demo.md
@@ -4,11 +4,23 @@ sider、footer、header 可以设定 `bordered`。
 
 ```html
 <n-layout has-sider>
-  <n-layout-sider bordered> 酷的边栏 </n-layout-sider>
+  <n-layout-sider bordered content-style="padding: 24px;"
+    >海淀桥</n-layout-sider
+  >
   <n-layout>
-    <n-layout-header bordered> 酷的页头 </n-layout-header>
-    <n-layout-content> 酷的内容 </n-layout-content>
-    <n-layout-footer bordered> 酷的页脚 </n-layout-footer>
+    <n-layout-header bordered>颐和园路</n-layout-header>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
+    <n-layout-footer bordered>成府路</n-layout-footer>
   </n-layout>
 </n-layout>
 ```
+
+```css
+.n-layout-header {
+  padding: 24px;
+}
+
+.n-layout-footer {
+  padding: 24px;
+}
+```
diff --git a/src/layout/demos/zhCN/collapse.demo.md b/src/layout/demos/zhCN/collapse.demo.md
index 8f9bc2bb0..c56f2ebeb 100644
--- a/src/layout/demos/zhCN/collapse.demo.md
+++ b/src/layout/demos/zhCN/collapse.demo.md
@@ -1,62 +1,38 @@
 # 折叠侧边栏
 
-使用 `collapsed` 属性控制侧边栏状态。（对于 `absolute` position 的 `n-layout` 和 `n-layout-sider` 不生效。）
+使用 `collapsed` 属性控制侧边栏状态。（关联的 `n-layout-sider` 和 `n-layout-content` 必须是 static position 的）。
 
-侧边栏有两种 `collapse-mode`：`width` 和 `transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏挪出布局。
+侧边栏有两种 `collapse-mode`，`width` 和 `transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏挪出布局。
 
 使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
 
 ```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
-  <n-layout has-sider position="absolute" style="top: 64px;">
+<n-space vertical size="large">
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
-      show-trigger
-      v-model:collapsed="collapsed"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      <p>边栏 边栏 边栏 边栏 边栏</p>
+      <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout style="padding: 24px">
-      <n-layout-content>
-        <span>内容</span>
-      </n-layout-content>
-      <n-layout-footer>
-        <n-h1>页脚</n-h1>
-      </n-layout-footer>
-    </n-layout>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    酷的页头
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
-      show-trigger
-      v-model:collapsed="collapsed"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
     >
-      <n-h1>边栏</n-h1>
+      <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout style="padding: 24px">
-      <span>内容</span>
-    </n-layout>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: true
-    }
-  }
-}
+</n-space>
 ```
diff --git a/src/layout/demos/zhCN/index.demo-entry.md b/src/layout/demos/zhCN/index.demo-entry.md
index 2e6880ada..567516e53 100644
--- a/src/layout/demos/zhCN/index.demo-entry.md
+++ b/src/layout/demos/zhCN/index.demo-entry.md
@@ -18,7 +18,6 @@ border
 absolute
 scrollbar
 collapse
-trigger-button
 inverted
 show-sider-content
 scroll-to
@@ -65,7 +64,7 @@ scroll-to
 | inverted | `boolean` | `false` | 使用反转背景色 |
 | native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条 |
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
-| show-content | `boolean` | `true` | 如果设为 `false`，Sider 的内容将会变透明 |
+| show-collapsed-content | `boolean` | `true` | 是否在 sider 折叠后展示内部内容 |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
 | trigger-style | `string \| Object` | `undefined` |  |
 | width | `number` | `272` |  |
diff --git a/src/layout/demos/zhCN/inverted.demo.md b/src/layout/demos/zhCN/inverted.demo.md
index 2645144ca..eca7cf394 100644
--- a/src/layout/demos/zhCN/inverted.demo.md
+++ b/src/layout/demos/zhCN/inverted.demo.md
@@ -28,9 +28,7 @@
           :options="menuOptions"
         />
       </n-layout-sider>
-      <n-layout style="max-height: 320px;">
-        <span>内容</span>
-      </n-layout>
+      <n-layout style="max-height: 320px;" />
     </n-layout>
     <n-layout-footer :inverted="inverted" bordered>
       Footer Footer Footer
diff --git a/src/layout/demos/zhCN/scroll-to.demo.md b/src/layout/demos/zhCN/scroll-to.demo.md
index 554531006..3d6d3e1e4 100644
--- a/src/layout/demos/zhCN/scroll-to.demo.md
+++ b/src/layout/demos/zhCN/scroll-to.demo.md
@@ -1,7 +1,7 @@
 # 滚动到
 
 ```html
-<n-space vertical :size="12">
+<n-space vertical size="large">
   <n-space>
     <n-button @click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })">
       边栏滚到 120px
@@ -10,22 +10,50 @@
       内容滚到 120px
     </n-button>
   </n-space>
-  <n-layout style="height: 480px;">
-    <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
-    <n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
-      <n-layout-sider ref="sider">
-        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1
-        ><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1
-        ><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+  <n-layout style="height: 360px;">
+    <n-layout-header style="height: 64px; padding: 24px;" bordered
+      >颐和园路</n-layout-header
+    >
+    <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
+      <n-layout-sider ref="sider" bordered content-style="padding: 24px;">
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
+        <n-h2>海淀桥</n-h2>
       </n-layout-sider>
-      <n-layout :native-scrollbar="false" ref="content">
-        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1
-        ><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1
-        ><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
-      </n-layout>
+      <n-layout-content
+        ref="content"
+        content-style="padding: 24px;"
+        :native-scrollbar="false"
+      >
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+        <n-h2>平山道</n-h2>
+      </n-layout-content>
     </n-layout>
-    <n-layout-footer position="absolute" style="height: 64px">
-      酷的页脚
+    <n-layout-footer
+      bordered
+      position="absolute"
+      style="height: 64px; padding: 24px;"
+    >
+      成府路
     </n-layout-footer>
   </n-layout>
 </n-space>
diff --git a/src/layout/demos/zhCN/scrollbar.demo.md b/src/layout/demos/zhCN/scrollbar.demo.md
index 1d67d0604..a4897c588 100644
--- a/src/layout/demos/zhCN/scrollbar.demo.md
+++ b/src/layout/demos/zhCN/scrollbar.demo.md
@@ -3,22 +3,50 @@
 有时原生滚动条与 naive-ui 的样式不协调。可以（在 `n-layout-sider`、`n-layout` 或 `n-layout-content`）使用 naive-ui 内置的滚动条。
 
 ```html
-<n-layout style="height: 480px;">
-  <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
+<n-layout style="height: 360px;">
+  <n-layout-header style="height: 64px; padding: 24px;" bordered
+    >颐和园路</n-layout-header
+  >
   <n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
-    <n-layout-sider :native-scrollbar="false">
-      <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1
-      ><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1
-      ><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+    <n-layout-sider
+      content-style="padding: 24px;"
+      :native-scrollbar="false"
+      bordered
+    >
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
+      <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout :native-scrollbar="false">
-      <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1
-      ><n-h1>长</n-h1><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1
-      ><n-h1>长</n-h1> <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+    <n-layout content-style="padding: 24px;" :native-scrollbar="false">
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
+      <n-h2>平山道</n-h2>
     </n-layout>
   </n-layout>
-  <n-layout-footer position="absolute" style="height: 64px">
-    酷的页脚
+  <n-layout-footer
+    position="absolute"
+    style="height: 64px; padding: 24px;"
+    bordered
+  >
+    城府路
   </n-layout-footer>
 </n-layout>
 ```
diff --git a/src/layout/demos/zhCN/set-padding.demo.md b/src/layout/demos/zhCN/set-padding.demo.md
index d4c4377dc..aebd59608 100644
--- a/src/layout/demos/zhCN/set-padding.demo.md
+++ b/src/layout/demos/zhCN/set-padding.demo.md
@@ -1,32 +1,38 @@
-# 设定 Padding
+# 关于设定 Padding
 
 naive-ui 不推荐直接在 `n-layout-sider` 和 `n-layout` 上设定 padding。因为他们存在嵌套的 DOM 结构，你可以使用 `content-style` 来设定可滚动内容的样式。
 
 ```html
-不推荐：
-<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
-  <n-layout-sider style="padding: 24px;">
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-  </n-layout-sider>
-</n-layout>
-推荐：
-<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
-  <n-layout-sider content-style="padding: 24px;">
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-    <n-h1>Content</n-h1>
-  </n-layout-sider>
-</n-layout>
+<n-space vertical size="large">
+  <n-layout has-sider style="height: 240px;">
+    <n-layout-sider style="padding: 24px;">
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+      <n-h2>... 不推荐</n-h2>
+    </n-layout-sider>
+  </n-layout>
+  <n-layout has-sider style="height: 240px;">
+    <n-layout-sider content-style="padding: 24px;">
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+      <n-h2>推荐</n-h2>
+    </n-layout-sider>
+  </n-layout>
+</n-space>
+```
+
+```css
+.n-layout-sider {
+  background: rgba(128, 128, 128, 0.3);
+}
 ```
diff --git a/src/layout/demos/zhCN/show-sider-content.demo.md b/src/layout/demos/zhCN/show-sider-content.demo.md
index b03703953..fcc3c6c5e 100644
--- a/src/layout/demos/zhCN/show-sider-content.demo.md
+++ b/src/layout/demos/zhCN/show-sider-content.demo.md
@@ -1,51 +1,35 @@
 # 隐藏侧边栏内容
 
-有时候收起边栏后，你不想看到里面有什么。
+有时候收起边栏后，你不想看到里面有什么，你可以设定 `show-collapsed-content` 为 `false`。
 
 ```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+<n-space vertical size="large">
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="width"
-      :show-content="!collapsed"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      :show-collapsed-content="false"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px;"
+      bordered
     >
-      <n-h1>酷的边栏</n-h1>
+      海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
     </n-layout-sider>
-    <n-layout style="padding: 24px;"> 内容 </n-layout>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    酷的页头
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
+  <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
-      :show-content="!collapsed"
       :collapsed-width="120"
       :width="240"
-      v-model:collapsed="collapsed"
-      show-trigger
+      show-trigger="arrow-circle"
+      content-style="padding: 24px;"
+      bordered
     >
-      <n-h1>边栏 边栏 边栏</n-h1>
+      <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout style="padding: 24px;"> 内容 </n-layout>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
-}
+</n-space>
 ```
diff --git a/src/layout/demos/zhCN/trigger-button.demo.md b/src/layout/demos/zhCN/trigger-button.demo.md
deleted file mode 100644
index 15ca524f1..000000000
--- a/src/layout/demos/zhCN/trigger-button.demo.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# 触发按钮
-
-免费附赠一个触发按钮。
-
-```html
-<n-switch v-model:value="collapsed" />
-<n-layout style="height: 240px;">
-  <n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
-    <n-layout-sider
-      collapse-mode="width"
-      show-trigger
-      :collapsed-width="120"
-      :width="240"
-      v-model:collapsed="collapsed"
-    >
-      <n-h1>边栏</n-h1>
-    </n-layout-sider>
-    <n-layout style="padding: 24px;"> 内容 </n-layout>
-  </n-layout>
-</n-layout>
-<n-layout style="height: 240px; overflow: hidden;">
-  <n-layout-header position="absolute" style="height: 64px;">
-    酷的页头
-  </n-layout-header>
-  <n-layout position="absolute" style="top: 64px;" has-sider>
-    <n-layout-sider
-      show-trigger="arrow-circle"
-      collapse-mode="transform"
-      :collapsed-width="120"
-      :width="240"
-      v-model:collapsed="collapsed"
-    >
-      <n-h1>边栏</n-h1>
-    </n-layout-sider>
-    <n-layout style="padding: 24px;"> 内容 </n-layout>
-  </n-layout>
-</n-layout>
-```
-
-```js
-export default {
-  data () {
-    return {
-      collapsed: false
-    }
-  }
-}
-```
diff --git a/src/menu/demos/enUS/inverted.demo.md b/src/menu/demos/enUS/inverted.demo.md
index e96099167..748432280 100644
--- a/src/menu/demos/enUS/inverted.demo.md
+++ b/src/menu/demos/enUS/inverted.demo.md
@@ -1,10 +1,10 @@
 # Inverted
 
-Set `inverted` to add contrast.
+Set `inverted` to add contrast. Usually used with `n-layout`.
 
 ```html
 <n-space vertical>
-  <n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
+  <n-space><n-switch v-model:value="inverted" />inverted</n-space>
   <n-layout has-sider>
     <n-layout-sider
       bordered
@@ -19,7 +19,6 @@ Set `inverted` to add contrast.
         :collapsed-width="64"
         :collapsed-icon-size="22"
         :options="menuOptions"
-        v-model:value="activeKey"
       />
     </n-layout-sider>
     <n-layout>
diff --git a/src/menu/demos/enUS/long-label.demo.md b/src/menu/demos/enUS/long-label.demo.md
index 67dc469db..46b041b25 100644
--- a/src/menu/demos/enUS/long-label.demo.md
+++ b/src/menu/demos/enUS/long-label.demo.md
@@ -16,12 +16,18 @@ export default defineComponent({
       options: [
         {
           label: () =>
-            h(NEllipsis, null, { default: () => '电灯熄灭 物换星移 泥牛入海' }),
+            h(NEllipsis, null, {
+              default: () =>
+                'The lights are extinguished. Matter is transformed and the heavens have shifted. Clay figures vanish into the sea.'
+            }),
           key: '1'
         },
         {
           label: () =>
-            h(NEllipsis, null, { default: () => '黑暗好像 一颗巨石 按在胸口' }),
+            h(NEllipsis, null, {
+              default: () =>
+                'The darkness is like a boulder pressing down upon the breast.'
+            }),
           key: '2'
         }
       ]
diff --git a/src/menu/demos/zhCN/inverted.demo.md b/src/menu/demos/zhCN/inverted.demo.md
index b55a13c40..892e11a97 100644
--- a/src/menu/demos/zhCN/inverted.demo.md
+++ b/src/menu/demos/zhCN/inverted.demo.md
@@ -1,10 +1,10 @@
 # 反转
 
-通过 `inverted` 来增加对比。
+通过 `inverted` 来增加对比，一般和 `n-layout` 配合使用。
 
 ```html
 <n-space vertical>
-  <n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
+  <n-space> <n-switch v-model:value="inverted" />inverted</n-space>
   <n-layout has-sider>
     <n-layout-sider
       bordered