From 1a5fd403d15aa7d0a4c1b581f8a6b3bc1b5c09cf Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 15 Dec 2023 00:51:26 +0800
Subject: [PATCH] chore(navbar): split demo (#2738)

---
 .../src/nav/pages/navbar/basic.vue            |   8 +
 .../src/nav/pages/navbar/index.vue            | 118 +++------
 .../src/nav/pages/navbar/left.vue             |  13 +
 .../src/nav/pages/navbar/right.vue            |  14 ++
 .../src/nav/pages/navbar/title.vue            |  13 +
 src/packages/__VUE/navbar/demo.vue            | 130 ----------
 src/packages/__VUE/navbar/demo/basic.vue      |   8 +
 src/packages/__VUE/navbar/demo/index.vue      |  42 ++++
 src/packages/__VUE/navbar/demo/left.vue       |  13 +
 src/packages/__VUE/navbar/demo/right.vue      |  14 ++
 src/packages/__VUE/navbar/demo/title.vue      |  13 +
 src/packages/__VUE/navbar/doc.en-US.md        | 228 ++++--------------
 src/packages/__VUE/navbar/doc.md              | 228 ++++--------------
 src/packages/__VUE/navbar/doc.taro.md         | 228 ++++--------------
 14 files changed, 326 insertions(+), 744 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/navbar/left.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/navbar/right.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/navbar/title.vue
 delete mode 100644 src/packages/__VUE/navbar/demo.vue
 create mode 100644 src/packages/__VUE/navbar/demo/basic.vue
 create mode 100644 src/packages/__VUE/navbar/demo/index.vue
 create mode 100644 src/packages/__VUE/navbar/demo/left.vue
 create mode 100644 src/packages/__VUE/navbar/demo/right.vue
 create mode 100644 src/packages/__VUE/navbar/demo/title.vue

diff --git a/packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue b/packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue
new file mode 100644
index 0000000000..b19d8defd6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-navbar title="Title" @click-title="onClick"></nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click title');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/navbar/index.vue b/packages/nutui-taro-demo/src/nav/pages/navbar/index.vue
index a4f25b4d83..9af454aa96 100644
--- a/packages/nutui-taro-demo/src/nav/pages/navbar/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/navbar/index.vue
@@ -1,102 +1,42 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-navbar title="订单详情" @click-back="back" @click-title="title">
-      <template #left>
-        <div>返回</div>
-      </template>
-      <template #right>
-        <ShareN width="16px"></ShareN>
-      </template>
-    </nut-navbar>
+    <h2>{{ t('left') }}</h2>
+    <Left />
 
-    <nut-navbar
-      title="浏览记录"
-      desc="清空"
-      @click-back="back"
-      @click-title="title"
-      @click-right="rightClick"
-    ></nut-navbar>
+    <h2>{{ t('right') }}</h2>
+    <Right />
 
-    <nut-navbar
-      :left-show="false"
-      title="购物车"
-      :title-icon="true"
-      desc="编辑"
-      @click-back="back"
-      @click-title="title"
-      @click-icon="icon"
-      @click-right="rightClick"
-    >
-      <template #title-icon>
-        <Cart2 width="16px"></Cart2>
-      </template>
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>自定义导航栏中间内容</h2>
-    <nut-navbar desc="编辑" @click-back="back" @click-title="title" @click-right="rightClick">
-      <template #content>
-        <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tab-pane title="商品"> </nut-tab-pane>
-          <nut-tab-pane title="店铺"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>多tab切换导航</h2>
-    <nut-navbar @click-back="back">
-      <template #content>
-        <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tab-pane title="商品"> </nut-tab-pane>
-          <nut-tab-pane title="评价"> </nut-tab-pane>
-          <nut-tab-pane title="详情"> </nut-tab-pane>
-          <nut-tab-pane title="推荐"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <HorizontalN class="right" width="16px"></HorizontalN>
-      </template>
-    </nut-navbar>
+    <h2>{{ t('title') }}</h2>
+    <Title />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue-taro';
-const tab1value = ref(0);
-const tab2value = ref(0);
-const back = () => {
-  console.log('header头部， 点击返回');
-};
-const title = () => {
-  console.log('header头部， 点击title');
-};
-const icon = () => {
-  console.log('icon');
-};
-
-const rightClick = () => {
-  console.log('右侧点击事件');
-};
-const changeTab = (tab: any) => {
-  tab1value.value = tab.paneKey as number;
-};
-const changeTabList = (tab: any) => {
-  tab2value.value = tab.paneKey as number;
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Left from './left.vue';
+import Right from './right.vue';
+import Title from './title.vue';
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    left: '自定义左侧插槽',
+    right: '自定义右侧插槽',
+    title: '自定义标题内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left: 'Custom Left Slot',
+    right: 'Custom Right Slot',
+    title: 'Custom Title Content'
+  }
+});
 </script>
-
-<style lang="scss">
+<style>
 .nut-navbar {
-  padding: 0 !important;
+  margin-bottom: 20px;
 }
 </style>
diff --git a/packages/nutui-taro-demo/src/nav/pages/navbar/left.vue b/packages/nutui-taro-demo/src/nav/pages/navbar/left.vue
new file mode 100644
index 0000000000..7868c483b7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/navbar/left.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar>
+  <nut-navbar title="Title" left-show @click-back="onClick">
+    <template #left>
+      <div>Back</div>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click back');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/navbar/right.vue b/packages/nutui-taro-demo/src/nav/pages/navbar/right.vue
new file mode 100644
index 0000000000..a8fefe35f7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/navbar/right.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-navbar title="Title" desc="Share" @click-right="onClick"></nut-navbar>
+  <nut-navbar title="Title" @click-right="onClick">
+    <template #right>
+      <ShareN width="16px"></ShareN>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { ShareN } from '@nutui/icons-vue-taro';
+const onClick = () => {
+  console.log('[Navbar]: on click right');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/navbar/title.vue b/packages/nutui-taro-demo/src/nav/pages/navbar/title.vue
new file mode 100644
index 0000000000..7ec48fd48b
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/navbar/title.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar left-show>
+    <template #content> Content </template>
+  </nut-navbar>
+  <nut-navbar left-show title="Title" title-icon>
+    <template #title-icon>
+      <Cart2 />
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { Cart2 } from '@nutui/icons-vue-taro';
+</script>
diff --git a/src/packages/__VUE/navbar/demo.vue b/src/packages/__VUE/navbar/demo.vue
deleted file mode 100644
index 127c03cd5b..0000000000
--- a/src/packages/__VUE/navbar/demo.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('title1') }}</h2>
-    <nut-navbar :title="translate('navTitle1')" @click-back="back" @click-title="title">
-      <template #left>
-        <div>{{ translate('back') }}</div>
-      </template>
-      <template #right>
-        <ShareN width="16px"></ShareN>
-      </template>
-    </nut-navbar>
-
-    <nut-navbar
-      :title="translate('navTitle2')"
-      :desc="translate('desc1')"
-      @click-back="back"
-      @click-title="title"
-      @click-right="rightClick"
-    ></nut-navbar>
-
-    <nut-navbar
-      :left-show="false"
-      :title="translate('navTitle3')"
-      :title-icon="true"
-      :desc="translate('desc2')"
-      @click-back="back"
-      @click-title="title"
-      @click-icon="icon"
-      @click-right="rightClick"
-    >
-      <template #title-icon>
-        <Cart2 width="16px"></Cart2>
-      </template>
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>{{ translate('title2') }}</h2>
-    <nut-navbar :desc="translate('desc2')" @click-back="back" @click-title="title" @click-right="rightClick">
-      <template #content>
-        <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tab-pane :title="translate('tab1')"> </nut-tab-pane>
-          <nut-tab-pane :title="translate('tab2')"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>{{ translate('title3') }}</h2>
-    <nut-navbar @click-back="back">
-      <template #content>
-        <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tab-pane :title="translate('tab1')"> </nut-tab-pane>
-          <nut-tab-pane :title="translate('tab2')"> </nut-tab-pane>
-          <nut-tab-pane :title="translate('tab3')"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-      <template #right>
-        <HorizontalN class="right" width="16px"></HorizontalN>
-      </template>
-    </nut-navbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    title1: '基础用法',
-    back: '返回',
-    navTitle1: '订单详情',
-    navTitle2: '浏览记录',
-    desc1: '清空',
-    navTitle3: '购物车',
-    desc2: '编辑',
-    title2: '自定义导航栏中间内容',
-    tab1: '标题1',
-    tab2: '标题2',
-    tab3: '标题3',
-    title3: '多 tab 切换导航'
-  },
-  'en-US': {
-    title1: 'Basic Usage',
-    back: 'Back',
-    navTitle1: 'Order details',
-    navTitle2: 'Browsing history',
-    desc1: 'Clear',
-    navTitle3: 'Cart',
-    desc2: 'Edit',
-    title2: 'Customize the middle content of the navigation bar',
-    tab1: 'Title1',
-    tab2: 'Title2',
-    tab3: 'Title3',
-    title3: 'Multi-tab switching navigation'
-  }
-});
-const tab1value = ref(0);
-const tab2value = ref(0);
-const back = () => {
-  console.log('header头部， 点击返回');
-};
-const title = () => {
-  console.log('header头部， 点击title');
-};
-const icon = () => {
-  console.log('icon');
-};
-
-const rightClick = () => {
-  console.log('右侧点击事件');
-};
-const changeTab = (tab: any) => {
-  tab1value.value = tab.paneKey as number;
-};
-const changeTabList = (tab: any) => {
-  tab2value.value = tab.paneKey as number;
-};
-</script>
-
-<style lang="scss" scoped>
-.right {
-  margin-left: 10px;
-}
-</style>
diff --git a/src/packages/__VUE/navbar/demo/basic.vue b/src/packages/__VUE/navbar/demo/basic.vue
new file mode 100644
index 0000000000..b19d8defd6
--- /dev/null
+++ b/src/packages/__VUE/navbar/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-navbar title="Title" @click-title="onClick"></nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click title');
+};
+</script>
diff --git a/src/packages/__VUE/navbar/demo/index.vue b/src/packages/__VUE/navbar/demo/index.vue
new file mode 100644
index 0000000000..79a65aa547
--- /dev/null
+++ b/src/packages/__VUE/navbar/demo/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('left') }}</h2>
+    <Left />
+
+    <h2>{{ t('right') }}</h2>
+    <Right />
+
+    <h2>{{ t('title') }}</h2>
+    <Title />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Left from './left.vue';
+import Right from './right.vue';
+import Title from './title.vue';
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    left: '自定义左侧插槽',
+    right: '自定义右侧插槽',
+    title: '自定义标题内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left: 'Custom Left Slot',
+    right: 'Custom Right Slot',
+    title: 'Custom Title Content'
+  }
+});
+</script>
+<style>
+.nut-navbar {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/packages/__VUE/navbar/demo/left.vue b/src/packages/__VUE/navbar/demo/left.vue
new file mode 100644
index 0000000000..7868c483b7
--- /dev/null
+++ b/src/packages/__VUE/navbar/demo/left.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar>
+  <nut-navbar title="Title" left-show @click-back="onClick">
+    <template #left>
+      <div>Back</div>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click back');
+};
+</script>
diff --git a/src/packages/__VUE/navbar/demo/right.vue b/src/packages/__VUE/navbar/demo/right.vue
new file mode 100644
index 0000000000..d9caf41a00
--- /dev/null
+++ b/src/packages/__VUE/navbar/demo/right.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-navbar title="Title" desc="Share" @click-right="onClick"></nut-navbar>
+  <nut-navbar title="Title" @click-right="onClick">
+    <template #right>
+      <ShareN width="16px"></ShareN>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { ShareN } from '@nutui/icons-vue';
+const onClick = () => {
+  console.log('[Navbar]: on click right');
+};
+</script>
diff --git a/src/packages/__VUE/navbar/demo/title.vue b/src/packages/__VUE/navbar/demo/title.vue
new file mode 100644
index 0000000000..5a18b0991e
--- /dev/null
+++ b/src/packages/__VUE/navbar/demo/title.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar left-show>
+    <template #content> Content </template>
+  </nut-navbar>
+  <nut-navbar left-show title="Title" title-icon>
+    <template #title-icon>
+      <Cart2 />
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { Cart2 } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/navbar/doc.en-US.md b/src/packages/__VUE/navbar/doc.en-US.md
index 191e78b0a8..16681ee48a 100644
--- a/src/packages/__VUE/navbar/doc.en-US.md
+++ b/src/packages/__VUE/navbar/doc.en-US.md
@@ -16,181 +16,59 @@ app.use(Navbar);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" title="Order details">
-    <template #left>
-      <div>Back</div>
-    </template>
-    <template #right>
-      <ShareN width="16px" />
-    </template>
-  </nut-navbar>
-
-  <nut-navbar
-    @click-back="back"
-    @click-title="title"
-    @click-right="rightClick"
-    title="Browsing history"
-    desc="Clear"
-  ></nut-navbar>
-
-  <nut-navbar
-    :left-show="false"
-    @click-back="back"
-    @click-title="title"
-    @click-icon="icon"
-    @click-right="rightClick"
-    title="Cart"
-    :titleIcon="true"
-    desc="Edit"
-  >
-    <template #title-icon>
-      <Cart2 width="16px" />
-    </template>
-    <template #right>
-      <MoreX class="right" width="16px" />
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const icon = () => {
-  console.log('Click Icon');
-};
-</script>
-```
+> demo: navbar basic
 
-:::
-
-### Customize the middle content of the navigation bar
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" @click-right="rightClick" desc="Edit">
-    <template #content>
-      <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tab-pane title="Title1"> </nut-tab-pane>
-        <nut-tab-pane title="Title2"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <MoreX class="right" width="16px"></MoreX>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { MoreX } from '@nutui/icons-vue';
-const tab1value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const changeTab = (tab) => {
-  tab1value.value = tab.paneKey;
-};
-</script>
-```
+### Custom Left Slot
 
-:::
-
-### Multi-tab switching navigation
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back">
-    <template #content>
-      <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tab-pane title="Title1"> </nut-tab-pane>
-        <nut-tab-pane title="Title2"> </nut-tab-pane>
-        <nut-tab-pane title="Title3"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <HorizontalN class="right" width="16px"></HorizontalN>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { HorizontalN } from '@nutui/icons-vue';
-const tab2value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const changeTabList = (tab) => {
-  tab2value.value = tab.paneKey;
-};
-</script>
-```
+> demo: navbar left
+
+### Custom Right Slot
+
+> demo: navbar right
+
+### Custom Title Content
 
-:::
+> demo: navbar title
 
 ## API
 
 ### Props
 
-| Attribute           | Description                                          | Type             | Default |
-| ------------------- | ---------------------------------------------------- | ---------------- | ------- |
-| title               | Title                                                | string           | -       |
-| left-text           | Left Text                                            | string           | -       |
-| desc                | Desc                                                 | string           | -       |
-| left-show           | Whether to show the left arrow                       | boolean          | `false` |
-| title-icon          | Whether to show icon in title                        | boolean          | `false` |
-| border              | Whether to show bottom border                        | boolean          | `false` |
-| fixed               | Is it pinned to the top                              | boolean          | `false` |
-| placeholder         | Whether to generate a placeholder element when fixed | boolean          | `false` |
-| safe-area-inset-top | Whether to enable top safety zone adaptation         | boolean          | `false` |
-| z-index             | Z-index                                              | number ｜ string | -       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Title | string | - |
+| left-text | Left Text | string | - |
+| desc | Desc | string | - |
+| left-show | Whether to show the left arrow | boolean | `false` |
+| title-icon | Whether to show icon in title | boolean | `false` |
+| border | Whether to show bottom border | boolean | `false` |
+| fixed | Is it pinned to the top | boolean | `false` |
+| placeholder | Whether to generate a placeholder element when fixed | boolean | `false` |
+| safe-area-inset-top | Whether to enable top safety zone adaptation | boolean | `false` |
+| z-index | Z-index | number ｜ string | - |
 
 ### Events
 
-| Event              | Description                     | Arguments   |
-| ------------------ | ------------------------------- | ----------- |
-| click-title`4.1.5` | Click page title event          | event:Event |
-| click-icon`4.1.5`  | Click the page title icon event | event:Event |
-| click-right`4.1.5` | Click right button event        | event:Event |
-| click-back`4.1.5`  | Click left Icon event           | event:Event |
-| on-click-title     | Click page title event          | event:Event |
-| on-click-icon      | Click the page title icon event | event:Event |
-| on-click-right     | Click right button event        | event:Event |
-| on-click-back      | Click left Icon event           | event:Event |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| click-title`4.1.5` | Click page title event | event:Event |
+| click-icon`4.1.5` | Click the page title icon event | event:Event |
+| click-right`4.1.5` | Click right button event | event:Event |
+| click-back`4.1.5` | Click left Icon event | event:Event |
+| on-click-title | Click page title event | event:Event |
+| on-click-icon | Click the page title icon event | event:Event |
+| on-click-right | Click right button event | event:Event |
+| on-click-back | Click left Icon event | event:Event |
 
 ### Slots
 
-| Name       | Description                                        |
-| ---------- | -------------------------------------------------- |
-| left       | Customize left content                             |
-| right      | Customize the content on the right                 |
-| content    | Customize the middle content of the navigation bar |
-| left-show  | Custom icon of left arrow                          |
-| title-icon | Custom icon in header                              |
+| Name | Description |
+| --- | --- |
+| left | Customize left content |
+| right | Customize the content on the right |
+| content | Customize the middle content of the navigation bar |
+| left-show | Custom icon of left arrow |
+| title-icon | Custom icon in header |
 
 ## Theming
 
@@ -198,17 +76,17 @@ const changeTabList = (tab) => {
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                           | Default Value                            |
-| ------------------------------ | ---------------------------------------- |
-| --nut-navbar-height            | _44px_                                   |
-| --nut-navbar-margin-bottom     | _20px_                                   |
-| --nut-navbar-padding           | _0 16px_                                 |
-| --nut-navbar-background        | _var(--nut-white)_                       |
-| --nut-navbar-box-shadow        | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
-| --nut-navbar-color             | _var(--nut-title-color2)_                |
-| --nut-navbar-title-base-font   | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font        | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font-weight | _0_                                      |
-| --nut-navbar-title-font-color  | _var(--nut-navbar-color)_                |
-| --nut-navbar-title-width       | _100px_                                  |
-| --nut-navbar-title-icon-margin | _0 0 0 13px_                             |
+| Name | Default Value |
+| --- | --- |
+| --nut-navbar-height | _44px_ |
+| --nut-navbar-margin-bottom | _20px_ |
+| --nut-navbar-padding | _0 16px_ |
+| --nut-navbar-background | _var(--nut-white)_ |
+| --nut-navbar-box-shadow | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
+| --nut-navbar-color | _var(--nut-title-color2)_ |
+| --nut-navbar-title-base-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font-weight | _0_ |
+| --nut-navbar-title-font-color | _var(--nut-navbar-color)_ |
+| --nut-navbar-title-width | _100px_ |
+| --nut-navbar-title-icon-margin | _0 0 0 13px_ |
diff --git a/src/packages/__VUE/navbar/doc.md b/src/packages/__VUE/navbar/doc.md
index 2664842878..8322906df5 100644
--- a/src/packages/__VUE/navbar/doc.md
+++ b/src/packages/__VUE/navbar/doc.md
@@ -16,181 +16,59 @@ app.use(Navbar);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" title="订单详情">
-    <template #left>
-      <div>返回</div>
-    </template>
-    <template #right>
-      <ShareN width="16px" />
-    </template>
-  </nut-navbar>
-
-  <nut-navbar
-    @click-back="back"
-    @click-title="title"
-    @click-right="rightClick"
-    title="浏览记录"
-    desc="清空"
-  ></nut-navbar>
-
-  <nut-navbar
-    :left-show="false"
-    @click-back="back"
-    @click-title="title"
-    @click-icon="icon"
-    @click-right="rightClick"
-    title="购物车"
-    :titleIcon="true"
-    desc="编辑"
-  >
-    <template #title-icon>
-      <Cart2 width="16px" />
-    </template>
-    <template #right>
-      <MoreX class="right" width="16px" />
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const icon = () => {
-  console.log('Click Icon');
-};
-</script>
-```
+> demo: navbar basic
 
-:::
-
-### 自定义导航栏中间内容
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" @click-right="rightClick" desc="编辑">
-    <template #content>
-      <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tab-pane title="标题1"> </nut-tab-pane>
-        <nut-tab-pane title="标题2"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <MoreX class="right" width="16px"></MoreX>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { MoreX } from '@nutui/icons-vue';
-const tab1value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const changeTab = (tab) => {
-  tab1value.value = tab.paneKey;
-};
-</script>
-```
+### 自定义左侧插槽
 
-:::
-
-### 多 tab 切换导航
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back">
-    <template #content>
-      <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tab-pane title="标题1"> </nut-tab-pane>
-        <nut-tab-pane title="标题2"> </nut-tab-pane>
-        <nut-tab-pane title="标题3"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <HorizontalN class="right" width="16px"></HorizontalN>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { HorizontalN } from '@nutui/icons-vue';
-const tab2value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const changeTabList = (tab) => {
-  tab2value.value = tab.paneKey;
-};
-</script>
-```
+> demo: navbar left
+
+### 自定义右侧插槽
+
+> demo: navbar right
+
+### 自定义标题内容
 
-:::
+> demo: navbar title
 
 ## API
 
 ### Props
 
-| 参数                | 说明                                               | 类型             | 默认值  |
-| ------------------- | -------------------------------------------------- | ---------------- | ------- |
-| title               | 标题名称                                           | string           | -       |
-| left-text           | 左侧文案                                           | string           | -       |
-| desc                | 右侧描述                                           | string           | -       |
-| left-show           | 是否展示左侧箭头                                   | boolean          | `false` |
-| title-icon          | 标题中是否展示 `icon`                              | boolean          | `false` |
-| border              | 是否显示下边框                                     | boolean          | `false` |
-| fixed               | 是否固定到顶部                                     | boolean          | `false` |
-| placeholder         | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean          | `false` |
-| safe-area-inset-top | 是否开启顶部安全区适配                             | boolean          | `false` |
-| z-index             | 导航栏 `z-index`                                   | number ｜ string | -       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题名称 | string | - |
+| left-text | 左侧文案 | string | - |
+| desc | 右侧描述 | string | - |
+| left-show | 是否展示左侧箭头 | boolean | `false` |
+| title-icon | 标题中是否展示 `icon` | boolean | `false` |
+| border | 是否显示下边框 | boolean | `false` |
+| fixed | 是否固定到顶部 | boolean | `false` |
+| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean | `false` |
+| safe-area-inset-top | 是否开启顶部安全区适配 | boolean | `false` |
+| z-index | 导航栏 `z-index` | number ｜ string | - |
 
 ### Events
 
-| 事件名             | 说明                     | 回调参数    |
-| ------------------ | ------------------------ | ----------- |
-| click-title`4.1.5` | 点击页面标题事件         | event:Event |
-| click-icon`4.1.5`  | 点击页面标题 `icon` 事件 | event:Event |
-| click-right`4.1.5` | 点击右侧按钮事件         | event:Event |
-| click-back`4.1.5`  | 点击左侧图标事件         | event:Event |
-| on-click-title     | 点击页面标题事件         | event:Event |
-| on-click-icon      | 点击页面标题 `icon` 事件 | event:Event |
-| on-click-right     | 点击右侧按钮事件         | event:Event |
-| on-click-back      | 点击左侧图标事件         | event:Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click-title`4.1.5` | 点击页面标题事件 | event:Event |
+| click-icon`4.1.5` | 点击页面标题 `icon` 事件 | event:Event |
+| click-right`4.1.5` | 点击右侧按钮事件 | event:Event |
+| click-back`4.1.5` | 点击左侧图标事件 | event:Event |
+| on-click-title | 点击页面标题事件 | event:Event |
+| on-click-icon | 点击页面标题 `icon` 事件 | event:Event |
+| on-click-right | 点击右侧按钮事件 | event:Event |
+| on-click-back | 点击左侧图标事件 | event:Event |
 
 ### Slots
 
-| 名称       | 说明                 |
-| ---------- | -------------------- |
-| left       | 自定义左侧内容       |
-| right      | 自定义右侧内容       |
-| content    | 自定义导航栏中间内容 |
-| left-show  | 左侧箭头自定义图标   |
-| title-icon | 标题中自定义图标     |
+| 名称 | 说明 |
+| --- | --- |
+| left | 自定义左侧内容 |
+| right | 自定义右侧内容 |
+| content | 自定义导航栏中间内容 |
+| left-show | 左侧箭头自定义图标 |
+| title-icon | 标题中自定义图标 |
 
 ## 主题定制
 
@@ -198,17 +76,17 @@ const changeTabList = (tab) => {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                           | 默认值                                   |
-| ------------------------------ | ---------------------------------------- |
-| --nut-navbar-height            | _44px_                                   |
-| --nut-navbar-margin-bottom     | _20px_                                   |
-| --nut-navbar-padding           | _0 16px_                                 |
-| --nut-navbar-background        | _var(--nut-white)_                       |
-| --nut-navbar-box-shadow        | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
-| --nut-navbar-color             | _var(--nut-title-color2)_                |
-| --nut-navbar-title-base-font   | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font        | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font-weight | _0_                                      |
-| --nut-navbar-title-font-color  | _var(--nut-navbar-color)_                |
-| --nut-navbar-title-width       | _100px_                                  |
-| --nut-navbar-title-icon-margin | _0 0 0 13px_                             |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-navbar-height | _44px_ |
+| --nut-navbar-margin-bottom | _20px_ |
+| --nut-navbar-padding | _0 16px_ |
+| --nut-navbar-background | _var(--nut-white)_ |
+| --nut-navbar-box-shadow | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
+| --nut-navbar-color | _var(--nut-title-color2)_ |
+| --nut-navbar-title-base-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font-weight | _0_ |
+| --nut-navbar-title-font-color | _var(--nut-navbar-color)_ |
+| --nut-navbar-title-width | _100px_ |
+| --nut-navbar-title-icon-margin | _0 0 0 13px_ |
diff --git a/src/packages/__VUE/navbar/doc.taro.md b/src/packages/__VUE/navbar/doc.taro.md
index 60fc3f1fd9..8c3011db77 100644
--- a/src/packages/__VUE/navbar/doc.taro.md
+++ b/src/packages/__VUE/navbar/doc.taro.md
@@ -16,181 +16,59 @@ app.use(Navbar);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" title="订单详情">
-    <template #left>
-      <div>返回</div>
-    </template>
-    <template #right>
-      <ShareN width="16px" />
-    </template>
-  </nut-navbar>
-
-  <nut-navbar
-    @click-back="back"
-    @click-title="title"
-    @click-right="rightClick"
-    title="浏览记录"
-    desc="清空"
-  ></nut-navbar>
-
-  <nut-navbar
-    :left-show="false"
-    @click-back="back"
-    @click-title="title"
-    @click-icon="icon"
-    @click-right="rightClick"
-    title="购物车"
-    :titleIcon="true"
-    desc="编辑"
-  >
-    <template #title-icon>
-      <Cart2 width="16px" />
-    </template>
-    <template #right>
-      <MoreX class="right" width="16px" />
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ShareN, Cart2, MoreX } from '@nutui/icons-vue-taro';
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const icon = () => {
-  console.log('Click Icon');
-};
-</script>
-```
+> demo: navbar basic nav
 
-:::
-
-### 自定义导航栏中间内容
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back" @click-title="title" @click-right="rightClick" desc="编辑">
-    <template #content>
-      <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tab-pane title="标题1"> </nut-tab-pane>
-        <nut-tab-pane title="标题2"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <MoreX class="right" width="16px"></MoreX>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { MoreX } from '@nutui/icons-vue-taro';
-const tab1value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const title = () => {
-  console.log('Click Title');
-};
-const rightClick = () => {
-  console.log('Click Right');
-};
-const changeTab = (tab) => {
-  tab1value.value = tab.paneKey;
-};
-</script>
-```
+### 自定义左侧插槽
 
-:::
-
-### 多 tab 切换导航
-
-:::demo
-
-```vue
-<template>
-  <nut-navbar @click-back="back">
-    <template #content>
-      <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tab-pane title="标题1"> </nut-tab-pane>
-        <nut-tab-pane title="标题2"> </nut-tab-pane>
-        <nut-tab-pane title="标题3"> </nut-tab-pane>
-      </nut-tabs>
-    </template>
-
-    <template #right>
-      <HorizontalN class="right" width="16px"></HorizontalN>
-    </template>
-  </nut-navbar>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { HorizontalN } from '@nutui/icons-vue-taro';
-const tab2value = ref(0);
-const back = () => {
-  console.log('Click Back');
-};
-const changeTabList = (tab) => {
-  tab2value.value = tab.paneKey;
-};
-</script>
-```
+> demo: navbar left nav
+
+### 自定义右侧插槽
+
+> demo: navbar right nav
+
+### 自定义标题内容
 
-:::
+> demo: navbar title nav
 
 ## API
 
 ### Props
 
-| 参数                | 说明                                               | 类型             | 默认值  |
-| ------------------- | -------------------------------------------------- | ---------------- | ------- |
-| title               | 标题名称                                           | string           | -       |
-| left-text           | 左侧文案                                           | string           | -       |
-| desc                | 右侧描述                                           | string           | -       |
-| left-show           | 是否展示左侧箭头                                   | boolean          | `false` |
-| title-icon          | 标题中是否展示 `icon`                              | boolean          | `false` |
-| border              | 是否显示下边框                                     | boolean          | `false` |
-| fixed               | 是否固定到顶部                                     | boolean          | `false` |
-| placeholder         | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean          | `false` |
-| safe-area-inset-top | 是否开启顶部安全区适配                             | boolean          | `false` |
-| z-index             | 导航栏 `z-index`                                   | number ｜ string | -       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题名称 | string | - |
+| left-text | 左侧文案 | string | - |
+| desc | 右侧描述 | string | - |
+| left-show | 是否展示左侧箭头 | boolean | `false` |
+| title-icon | 标题中是否展示 `icon` | boolean | `false` |
+| border | 是否显示下边框 | boolean | `false` |
+| fixed | 是否固定到顶部 | boolean | `false` |
+| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean | `false` |
+| safe-area-inset-top | 是否开启顶部安全区适配 | boolean | `false` |
+| z-index | 导航栏 `z-index` | number ｜ string | - |
 
 ### Events
 
-| 事件名             | 说明                     | 回调参数    |
-| ------------------ | ------------------------ | ----------- |
-| click-title`4.1.5` | 点击页面标题事件         | event:Event |
-| click-icon`4.1.5`  | 点击页面标题 `icon` 事件 | event:Event |
-| click-right`4.1.5` | 点击右侧按钮事件         | event:Event |
-| click-back`4.1.5`  | 点击左侧图标事件         | event:Event |
-| on-click-title     | 点击页面标题事件         | event:Event |
-| on-click-icon      | 点击页面标题 `icon` 事件 | event:Event |
-| on-click-right     | 点击右侧按钮事件         | event:Event |
-| on-click-back      | 点击左侧图标事件         | event:Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click-title`4.1.5` | 点击页面标题事件 | event:Event |
+| click-icon`4.1.5` | 点击页面标题 `icon` 事件 | event:Event |
+| click-right`4.1.5` | 点击右侧按钮事件 | event:Event |
+| click-back`4.1.5` | 点击左侧图标事件 | event:Event |
+| on-click-title | 点击页面标题事件 | event:Event |
+| on-click-icon | 点击页面标题 `icon` 事件 | event:Event |
+| on-click-right | 点击右侧按钮事件 | event:Event |
+| on-click-back | 点击左侧图标事件 | event:Event |
 
 ### Slots
 
-| 名称       | 说明                 |
-| ---------- | -------------------- |
-| left       | 自定义左侧内容       |
-| right      | 自定义右侧内容       |
-| content    | 自定义导航栏中间内容 |
-| left-show  | 左侧箭头自定义图标   |
-| title-icon | 标题中自定义图标     |
+| 名称 | 说明 |
+| --- | --- |
+| left | 自定义左侧内容 |
+| right | 自定义右侧内容 |
+| content | 自定义导航栏中间内容 |
+| left-show | 左侧箭头自定义图标 |
+| title-icon | 标题中自定义图标 |
 
 ## 主题定制
 
@@ -198,17 +76,17 @@ const changeTabList = (tab) => {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                           | 默认值                                   |
-| ------------------------------ | ---------------------------------------- |
-| --nut-navbar-height            | _44px_                                   |
-| --nut-navbar-margin-bottom     | _20px_                                   |
-| --nut-navbar-padding           | _0 16px_                                 |
-| --nut-navbar-background        | _var(--nut-white)_                       |
-| --nut-navbar-box-shadow        | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
-| --nut-navbar-color             | _var(--nut-title-color2)_                |
-| --nut-navbar-title-base-font   | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font        | _var(--nut-font-size-2)_                 |
-| --nut-navbar-title-font-weight | _0_                                      |
-| --nut-navbar-title-font-color  | _var(--nut-navbar-color)_                |
-| --nut-navbar-title-width       | _100px_                                  |
-| --nut-navbar-title-icon-margin | _0 0 0 13px_                             |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-navbar-height | _44px_ |
+| --nut-navbar-margin-bottom | _20px_ |
+| --nut-navbar-padding | _0 16px_ |
+| --nut-navbar-background | _var(--nut-white)_ |
+| --nut-navbar-box-shadow | _0px 1px 7px 0px rgba(237, 238, 241, 1)_ |
+| --nut-navbar-color | _var(--nut-title-color2)_ |
+| --nut-navbar-title-base-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font | _var(--nut-font-size-2)_ |
+| --nut-navbar-title-font-weight | _0_ |
+| --nut-navbar-title-font-color | _var(--nut-navbar-color)_ |
+| --nut-navbar-title-width | _100px_ |
+| --nut-navbar-title-icon-margin | _0 0 0 13px_ |