From 70494b5f19d560d08480b09fdfa111f9943f4729 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 20 Jul 2022 09:36:00 +0800
Subject: [PATCH] docs(navbar): update code sample

---
 src/navbar/README.md                          | 61 ++++++-------------
 src/navbar/_example/back-home/index.js        |  9 +++
 src/navbar/_example/back-home/index.json      |  6 ++
 src/navbar/_example/back-home/index.wxml      |  9 +++
 src/navbar/_example/back-home/index.wxss      | 11 ++++
 src/navbar/_example/back/index.js             |  1 +
 src/navbar/_example/back/index.json           |  6 ++
 src/navbar/_example/back/index.wxml           |  1 +
 src/navbar/_example/back/index.wxss           |  7 +++
 src/navbar/_example/base/index.js             |  1 +
 src/navbar/_example/base/index.json           |  6 ++
 src/navbar/_example/base/index.wxml           |  1 +
 src/navbar/_example/base/index.wxss           |  3 +
 src/navbar/_example/brand-long/index.js       |  1 +
 src/navbar/_example/brand-long/index.json     |  6 ++
 src/navbar/_example/brand-long/index.wxml     |  5 ++
 src/navbar/_example/brand-long/index.wxss     | 15 +++++
 src/navbar/_example/brand/index.js            |  1 +
 src/navbar/_example/brand/index.json          |  6 ++
 src/navbar/_example/brand/index.wxml          |  3 +
 src/navbar/_example/brand/index.wxss          |  3 +
 src/navbar/_example/custom-capsule/index.js   |  1 +
 src/navbar/_example/custom-capsule/index.json |  6 ++
 src/navbar/_example/custom-capsule/index.wxml |  3 +
 src/navbar/_example/custom-capsule/index.wxss | 14 +++++
 src/navbar/_example/img/index.js              |  1 +
 src/navbar/_example/img/index.json            |  6 ++
 src/navbar/_example/img/index.wxml            |  9 +++
 src/navbar/_example/img/index.wxss            | 14 +++++
 src/navbar/_example/navbar.json               |  8 ++-
 src/navbar/_example/navbar.less               | 56 -----------------
 src/navbar/_example/navbar.ts                 |  6 --
 src/navbar/_example/navbar.wxml               | 38 +++---------
 33 files changed, 189 insertions(+), 135 deletions(-)
 create mode 100644 src/navbar/_example/back-home/index.js
 create mode 100644 src/navbar/_example/back-home/index.json
 create mode 100644 src/navbar/_example/back-home/index.wxml
 create mode 100644 src/navbar/_example/back-home/index.wxss
 create mode 100644 src/navbar/_example/back/index.js
 create mode 100644 src/navbar/_example/back/index.json
 create mode 100644 src/navbar/_example/back/index.wxml
 create mode 100644 src/navbar/_example/back/index.wxss
 create mode 100644 src/navbar/_example/base/index.js
 create mode 100644 src/navbar/_example/base/index.json
 create mode 100644 src/navbar/_example/base/index.wxml
 create mode 100644 src/navbar/_example/base/index.wxss
 create mode 100644 src/navbar/_example/brand-long/index.js
 create mode 100644 src/navbar/_example/brand-long/index.json
 create mode 100644 src/navbar/_example/brand-long/index.wxml
 create mode 100644 src/navbar/_example/brand-long/index.wxss
 create mode 100644 src/navbar/_example/brand/index.js
 create mode 100644 src/navbar/_example/brand/index.json
 create mode 100644 src/navbar/_example/brand/index.wxml
 create mode 100644 src/navbar/_example/brand/index.wxss
 create mode 100644 src/navbar/_example/custom-capsule/index.js
 create mode 100644 src/navbar/_example/custom-capsule/index.json
 create mode 100644 src/navbar/_example/custom-capsule/index.wxml
 create mode 100644 src/navbar/_example/custom-capsule/index.wxss
 create mode 100644 src/navbar/_example/img/index.js
 create mode 100644 src/navbar/_example/img/index.json
 create mode 100644 src/navbar/_example/img/index.wxml
 create mode 100644 src/navbar/_example/img/index.wxss

diff --git a/src/navbar/README.md b/src/navbar/README.md
index b4bf59085..bc4656a27 100644
--- a/src/navbar/README.md
+++ b/src/navbar/README.md
@@ -19,52 +19,31 @@ isComponent: true
 
 ### 基础导航栏
 
-导航栏，可以带返回，主页按钮，或自定义展示内容
+{{ base }}
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/navbar-1.png" width="375px" height="50%">
+### 带返回导航栏
 
-```html
-<!-- 基础导航栏 -->
-<t-navbar title="标题" t-class-title="nav-title" />
-```
+{{ back }}
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/navbar-2.png" width="375px" height="50%">
-
-```html
-<!-- 带返回，主页按钮导航栏 -->
-<t-navbar
-  title="标题"
-  leftIcon="chevron-left"
-  homeIcon="home"
-  bind:go-home="onGoHome"
-  t-class-left-icon="left-icon-back"
-  t-class-home-icon="home-icon"
-  t-class-title="nav-title"
-/>
-```
+### 带返回，主页按钮导航栏
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/navnar-3.png" width="375px" height="50%">
-
-```html
-<!-- 自定义插槽导航栏 -->
-<t-navbar leftIcon="slot">
-  <t-image
-    t-class="img"
-    class="size-l radius-m slot-left"
-    src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%8D%A0%E4%BD%8D%E5%9B%BE%402x.png"
-    mode="aspectFill"
-    slot="left-icon"
-  ></t-image>
-</t-navbar>
-```
+{{ back-home }}
 
-```js
-  onGoHome() {
-    wx.navigateTo({
-      url: '/pages/index',
-    });
-  },
-```
+### 自定义品牌导航栏
+
+{{ brand }}
+
+### 自定义图片导航栏
+
+{{ img }}
+
+### 品牌超长文字导航栏
+
+{{ brand-long }}
+
+### 自定义导航胶囊
+
+{{ custom-capsule }}
 
 ## API
 
diff --git a/src/navbar/_example/back-home/index.js b/src/navbar/_example/back-home/index.js
new file mode 100644
index 000000000..95889b68a
--- /dev/null
+++ b/src/navbar/_example/back-home/index.js
@@ -0,0 +1,9 @@
+Component({
+  methods: {
+    onGoHome() {
+      wx.navigateTo({
+        url: '/pages/home/home',
+      });
+    },
+  },
+});
diff --git a/src/navbar/_example/back-home/index.json b/src/navbar/_example/back-home/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/back-home/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/back-home/index.wxml b/src/navbar/_example/back-home/index.wxml
new file mode 100644
index 000000000..f77a33650
--- /dev/null
+++ b/src/navbar/_example/back-home/index.wxml
@@ -0,0 +1,9 @@
+<t-navbar
+  title="标题"
+  leftIcon="chevron-left"
+  homeIcon="home"
+  bind:go-home="onGoHome"
+  t-class-left-icon="left-icon-back"
+  t-class-home-icon="home-icon"
+  t-class-title="nav-title"
+/>
diff --git a/src/navbar/_example/back-home/index.wxss b/src/navbar/_example/back-home/index.wxss
new file mode 100644
index 000000000..e78eb2000
--- /dev/null
+++ b/src/navbar/_example/back-home/index.wxss
@@ -0,0 +1,11 @@
+.left-icon-back {
+  font-size: 48rpx !important;
+}
+
+.home-icon {
+  font-size: 48rpx !important;
+}
+
+.nav-title {
+  font-size: 32rpx !important;
+}
diff --git a/src/navbar/_example/back/index.js b/src/navbar/_example/back/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/back/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/back/index.json b/src/navbar/_example/back/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/back/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/back/index.wxml b/src/navbar/_example/back/index.wxml
new file mode 100644
index 000000000..777777147
--- /dev/null
+++ b/src/navbar/_example/back/index.wxml
@@ -0,0 +1 @@
+<t-navbar title="标题" leftIcon="chevron-left" t-class-left-icon="left-icon-back" t-class-title="nav-title" />
diff --git a/src/navbar/_example/back/index.wxss b/src/navbar/_example/back/index.wxss
new file mode 100644
index 000000000..8e1d58bec
--- /dev/null
+++ b/src/navbar/_example/back/index.wxss
@@ -0,0 +1,7 @@
+.left-icon-back {
+  font-size: 48rpx !important;
+}
+
+.nav-title {
+  font-size: 32rpx !important;
+}
diff --git a/src/navbar/_example/base/index.js b/src/navbar/_example/base/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/base/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/base/index.json b/src/navbar/_example/base/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/base/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/base/index.wxml b/src/navbar/_example/base/index.wxml
new file mode 100644
index 000000000..b4506f7af
--- /dev/null
+++ b/src/navbar/_example/base/index.wxml
@@ -0,0 +1 @@
+<t-navbar title="标题" t-class-title="nav-title" />
diff --git a/src/navbar/_example/base/index.wxss b/src/navbar/_example/base/index.wxss
new file mode 100644
index 000000000..104b29754
--- /dev/null
+++ b/src/navbar/_example/base/index.wxss
@@ -0,0 +1,3 @@
+.nav-title {
+  font-size: 32rpx !important;
+}
diff --git a/src/navbar/_example/brand-long/index.js b/src/navbar/_example/brand-long/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/brand-long/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/brand-long/index.json b/src/navbar/_example/brand-long/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/brand-long/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/brand-long/index.wxml b/src/navbar/_example/brand-long/index.wxml
new file mode 100644
index 000000000..25062974c
--- /dev/null
+++ b/src/navbar/_example/brand-long/index.wxml
@@ -0,0 +1,5 @@
+<t-navbar leftIcon="slot" t-class-left="external-class-left" t-class-left-icon="left-icon-slot">
+  <span slot="left-icon" class="long-brand"
+    >品牌名称最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长</span
+  >
+</t-navbar>
diff --git a/src/navbar/_example/brand-long/index.wxss b/src/navbar/_example/brand-long/index.wxss
new file mode 100644
index 000000000..7e907113d
--- /dev/null
+++ b/src/navbar/_example/brand-long/index.wxss
@@ -0,0 +1,15 @@
+.external-class-left {
+  width: 100% !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.left-icon-slot {
+  overflow: hidden;
+}
+
+.long-brand {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/src/navbar/_example/brand/index.js b/src/navbar/_example/brand/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/brand/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/brand/index.json b/src/navbar/_example/brand/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/brand/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/brand/index.wxml b/src/navbar/_example/brand/index.wxml
new file mode 100644
index 000000000..da1dc7a05
--- /dev/null
+++ b/src/navbar/_example/brand/index.wxml
@@ -0,0 +1,3 @@
+<t-navbar leftIcon="slot">
+  <span slot="left-icon" class="slot-left">品牌名称</span>
+</t-navbar>
diff --git a/src/navbar/_example/brand/index.wxss b/src/navbar/_example/brand/index.wxss
new file mode 100644
index 000000000..65b79268a
--- /dev/null
+++ b/src/navbar/_example/brand/index.wxss
@@ -0,0 +1,3 @@
+.slot-left {
+  padding-left: 20rpx;
+}
diff --git a/src/navbar/_example/custom-capsule/index.js b/src/navbar/_example/custom-capsule/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/custom-capsule/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/custom-capsule/index.json b/src/navbar/_example/custom-capsule/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/custom-capsule/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/custom-capsule/index.wxml b/src/navbar/_example/custom-capsule/index.wxml
new file mode 100644
index 000000000..b38869334
--- /dev/null
+++ b/src/navbar/_example/custom-capsule/index.wxml
@@ -0,0 +1,3 @@
+<t-navbar>
+  <view slot="capsule" class="capsule">自定义胶囊</view>
+</t-navbar>
diff --git a/src/navbar/_example/custom-capsule/index.wxss b/src/navbar/_example/custom-capsule/index.wxss
new file mode 100644
index 000000000..6df62a782
--- /dev/null
+++ b/src/navbar/_example/custom-capsule/index.wxss
@@ -0,0 +1,14 @@
+.capsule {
+  width: 180rpx;
+  height: 48rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 24rpx;
+  line-height: 48rpx;
+  border-radius: 32rpx;
+  background: rgba(0, 0, 0, 0.14);
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  font-size: 24rpx;
+}
diff --git a/src/navbar/_example/img/index.js b/src/navbar/_example/img/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/navbar/_example/img/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/navbar/_example/img/index.json b/src/navbar/_example/img/index.json
new file mode 100644
index 000000000..857cc209a
--- /dev/null
+++ b/src/navbar/_example/img/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/src/navbar/_example/img/index.wxml b/src/navbar/_example/img/index.wxml
new file mode 100644
index 000000000..17d027a77
--- /dev/null
+++ b/src/navbar/_example/img/index.wxml
@@ -0,0 +1,9 @@
+<t-navbar leftIcon="slot" t-class-left="external-class-left">
+  <t-image
+    t-class="img"
+    class="slot-left"
+    src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%8D%A0%E4%BD%8D%E5%9B%BE%402x.png"
+    mode="aspectFill"
+    slot="left-icon"
+  ></t-image>
+</t-navbar>
diff --git a/src/navbar/_example/img/index.wxss b/src/navbar/_example/img/index.wxss
new file mode 100644
index 000000000..49a43b3dd
--- /dev/null
+++ b/src/navbar/_example/img/index.wxss
@@ -0,0 +1,14 @@
+.external-class-left {
+  width: 100% !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.img {
+  height: 50rpx;
+  width: 280rpx;
+}
+
+.slot-left {
+  padding-left: 20rpx;
+}
diff --git a/src/navbar/_example/navbar.json b/src/navbar/_example/navbar.json
index 7d6f365d9..b05228591 100644
--- a/src/navbar/_example/navbar.json
+++ b/src/navbar/_example/navbar.json
@@ -1,6 +1,12 @@
 {
   "navigationStyle": "custom",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "base": "./base",
+    "brand": "./brand",
+    "back": "./back",
+    "back-home": "./back-home",
+    "img": "./img",
+    "brand-long": "./brand-long",
+    "custom-capsule": "./custom-capsule"
   }
 }
diff --git a/src/navbar/_example/navbar.less b/src/navbar/_example/navbar.less
index 4792abb8d..5fbaccc46 100644
--- a/src/navbar/_example/navbar.less
+++ b/src/navbar/_example/navbar.less
@@ -2,62 +2,6 @@ page {
   background: #fff;
 }
 
-.slot-left {
-  padding-left: 20rpx;
-}
-
 .demo-block__oper {
   margin: 0 32rpx;
 }
-
-.img {
-  height: 50rpx;
-  width: 280rpx;
-}
-
-.t-navbar__left {
-  width: 100% !important;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.long-brand {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.navbar {
-  background-color: #999;
-}
-
-.left-icon-slot {
-  overflow: hidden;
-}
-
-.left-icon-back {
-  font-size: 24px !important;
-}
-
-.home-icon {
-  font-size: 24px !important;
-}
-
-.nav-title {
-  font-size: 16px !important;
-}
-
-.capsule {
-  width: 180rpx;
-  height: 48rpx;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 24rpx;
-  line-height: 48rpx;
-  border-radius: 32rpx;
-  background: rgba(0, 0, 0, 0.14);
-  border: 1rpx solid rgba(255, 255, 255, 0.2);
-  font-size: 24rpx;
-}
diff --git a/src/navbar/_example/navbar.ts b/src/navbar/_example/navbar.ts
index 03be2ac62..9f904e56a 100644
--- a/src/navbar/_example/navbar.ts
+++ b/src/navbar/_example/navbar.ts
@@ -45,12 +45,6 @@ Page({
     ],
   },
 
-  onGoHome() {
-    wx.navigateTo({
-      url: '/pages/home/home',
-    });
-  },
-
   /** 切换 navbar 示例 */
   clickHandle(e) {
     const key = e.detail;
diff --git a/src/navbar/_example/navbar.wxml b/src/navbar/_example/navbar.wxml
index 84ea74deb..53d55bbf2 100644
--- a/src/navbar/_example/navbar.wxml
+++ b/src/navbar/_example/navbar.wxml
@@ -1,49 +1,25 @@
 <block wx:if="{{demoType === 'base-default'}}">
-  <t-navbar title="标题" t-class-title="nav-title" />
+  <base />
 </block>
 <block wx:if="{{demoType === 'base-back'}}">
-  <t-navbar title="标题" leftIcon="chevron-left" t-class-left-icon="left-icon-back" t-class-title="nav-title" />
+  <back />
 </block>
 <block wx:if="{{demoType === 'base-back-home'}}">
-  <t-navbar
-    title="标题"
-    leftIcon="chevron-left"
-    homeIcon="home"
-    bind:go-home="onGoHome"
-    t-class-left-icon="left-icon-back"
-    t-class-home-icon="home-icon"
-    t-class-title="nav-title"
-  />
+  <back-home />
 </block>
 <block wx:if="{{demoType === 'base-brand'}}">
-  <t-navbar leftIcon="slot">
-    <span slot="left-icon" class="slot-left">品牌名称</span>
-  </t-navbar>
+  <brand />
 </block>
 <block wx:if="{{demoType === 'base-img'}}">
-  <t-navbar leftIcon="slot">
-    <t-image
-      t-class="img"
-      class="size-l radius-m slot-left"
-      src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%8D%A0%E4%BD%8D%E5%9B%BE%402x.png"
-      mode="aspectFill"
-      slot="left-icon"
-    ></t-image>
-  </t-navbar>
+  <img />
 </block>
 
 <block wx:if="{{demoType === 'base-brand-long'}}">
-  <t-navbar leftIcon="slot" t-class-left-icon="left-icon-slot">
-    <span slot="left-icon" class="long-brand"
-      >品牌名称最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长</span
-    >
-  </t-navbar>
+  <brand-long />
 </block>
 
 <block wx:if="{{demoType === 'custom-capsule'}}">
-  <t-navbar>
-    <view slot="capsule" class="capsule">自定义胶囊</view>
-  </t-navbar>
+  <custom-capsule />
 </block>
 
 <view class="demo">