Tencent · LeeJim · Jul 20, 2022 · Jul 20, 2022
@@ -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
 

@@ -0,0 +1,9 @@
+Component({
+  methods: {
+    onGoHome() {
+      wx.navigateTo({
+        url: '/pages/home/home',
+      });
+    },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -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"
+/>
@@ -0,0 +1,11 @@
+.left-icon-back {
+  font-size: 48rpx !important;
+}
+
+.home-icon {
+  font-size: 48rpx !important;
+}
+
+.nav-title {
+  font-size: 32rpx !important;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -0,0 +1 @@
+<t-navbar title="标题" leftIcon="chevron-left" t-class-left-icon="left-icon-back" t-class-title="nav-title" />
@@ -0,0 +1,7 @@
+.left-icon-back {
+  font-size: 48rpx !important;
+}
+
+.nav-title {
+  font-size: 32rpx !important;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -0,0 +1 @@
+<t-navbar title="标题" t-class-title="nav-title" />
@@ -0,0 +1,3 @@
+.nav-title {
+  font-size: 32rpx !important;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -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>
@@ -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;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -0,0 +1,3 @@
+<t-navbar leftIcon="slot">
+  <span slot="left-icon" class="slot-left">品牌名称</span>
+</t-navbar>
@@ -0,0 +1,3 @@
+.slot-left {
+  padding-left: 20rpx;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -0,0 +1,3 @@
+<t-navbar>
+  <view slot="capsule" class="capsule">自定义胶囊</view>
+</t-navbar>
@@ -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;
+}
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
@@ -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>
@@ -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;
+}
@@ -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"
   }
 }
@@ -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;
-}
@@ -45,12 +45,6 @@ Page({
     ],
   },
 
-  onGoHome() {
-    wx.navigateTo({
-      url: '/pages/home/home',
-    });
-  },
-
   /** 切换 navbar 示例 */
   clickHandle(e) {
     const key = e.detail;