白色主题

miniprogram_npm/tdesign-miniprogram/side-bar-item/props.js

@@ -6,6 +6,9 @@ const props = {
         type: Boolean,
         value: false,
     },
+    icon: {
+        type: null,
+    },
     label: {
         type: String,
         value: '',

miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.d.ts

@@ -3,7 +3,9 @@ export default class SideBarItem extends SuperComponent {
     externalClasses: string[];
     properties: import("./type").TdSideBarItemProps;
     relations: RelationsOptions;
-    observers: {};
+    observers: {
+        icon(v: any): void;
+    };
     data: {
         classPrefix: string;
         prefix: string;

miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.js

@@ -23,7 +23,11 @@ let SideBarItem = class SideBarItem extends SuperComponent {
                 },
             },
         };
-        this.observers = {};
+        this.observers = {
+            icon(v) {
+                this.setData({ _icon: typeof v === 'string' ? { name: v } : v });
+            },
+        };
         this.data = {
             classPrefix: name,
             prefix,

miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "t-badge": "../badge/badge"
+    "t-badge": "../badge/badge",
+    "t-icon": "../icon/icon"
   }
 }

miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.wxml

@@ -1,4 +1,5 @@
 <import src="../common/template/badge" />
+<import src="../common/template/icon" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
@@ -13,6 +14,7 @@
     <view class="{{classPrefix}}__prefix"></view>
     <view class="{{classPrefix}}__suffix"></view>
   </block>
+  <template wx:if="{{_icon}}" is="icon" data="{{ class: classPrefix + '__icon', ..._icon }}" />
   <block wx:if="{{badgeProps}}">
     <template is="badge" data="{{ ...badgeProps, content: label }}" />
   </block>

miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.wxss

@@ -26,20 +26,28 @@
   transform: scale(1.5);
 }
 .t-side-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   padding: 32rpx;
   font-size: var(--td-side-bar-font-size, 32rpx);
   color: var(--td-side-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
   background: var(--td-side-bar-bg-color, var(--td-gray-color-1, #f3f3f3));
-  height: var(--td-side-bar-item-height, 112rpx);
+  min-height: var(--td-side-bar-item-height, 112rpx);
   box-sizing: border-box;
-  white-space: nowrap;
+  white-space: wrap;
+  line-height: var(--td-side-bar-item-line-height, 48rpx);
 }
 .t-side-bar-item--active {
   font-weight: 600;
   background: var(--td-bg-color-block, #fff);
   color: var(--td-side-bar-active-color, var(--td-primary-color, #0052d9));
 }
+.t-side-bar-item__icon {
+  font-size: var(--td-side-bar-icon-size, 40rpx);
+  margin-right: 4rpx;
+}
 .t-side-bar-item__prefix,
 .t-side-bar-item__suffix {
   z-index: 1;

miniprogram_npm/tdesign-miniprogram/side-bar-item/type.d.ts

@@ -7,6 +7,9 @@ export interface TdSideBarItemProps {
         type: BooleanConstructor;
         value?: boolean;
     };
+    icon?: {
+        type: null;
+    };
     label?: {
         type: StringConstructor;
         value?: string;