feat(SideBar): title slot (#2873)

youzan · Mar 17, 2020 · 3beb578 · 3beb578
1 parent 9a3b5df
commit 3beb578
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/example/pages/sidebar/index.wxml b/example/pages/sidebar/index.wxml
@@ -13,3 +13,16 @@
     <van-sidebar-item title="标签名称" info="99+" />
   </van-sidebar>
 </demo-block>
+
+<demo-block title="自定义标题" class="custom-sidebar-slot">
+  <van-sidebar custom-class="custom-sidebar"  bind:change="onChange">
+    <van-sidebar-item info="5">
+      <view slot="title">
+        <van-icon name="wap-home-o" />
+        标签名称
+      </view>
+    </van-sidebar-item>
+    <van-sidebar-item title="标签名称" info="5" />
+    <van-sidebar-item title="标签名称" info="99+" />
+  </van-sidebar>
+</demo-block>
diff --git a/example/pages/sidebar/index.wxss b/example/pages/sidebar/index.wxss
@@ -5,3 +5,7 @@ page {
 .custom-sidebar {
   margin-left: 15px;
 }
+
+.custom-sidebar-slot {
+  --sidebar-width: 100px;
+}
diff --git a/packages/sidebar-item/index.wxml b/packages/sidebar-item/index.wxml
@@ -13,6 +13,7 @@
       info="{{ info }}"
       custom-style="right: 4px"
     />
-    {{ title }}
+    <view wx:if="{{ title }}">{{ title }}</view>
+    <slot wx:else name="title" />
   </view>
 </view>
diff --git a/packages/sidebar/README.md b/packages/sidebar/README.md
@@ -82,6 +82,12 @@ Page({
 | dot | 是否显示右上角小红点 | *boolean* | `false` | - |
 | info | 提示消息 | *string \| number* | `''` | - |
 
+### SidebarItem Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| title | 自定义标题栏，如果设置了`title`属性则不生效 |
+
 ### SidebarItem Event
 
 | 事件名 | 说明 | 参数 |