Przeglądaj źródła

✨ feat(tab-bar): 支持自定义图标类名

- 为TabBarItem添加iconClass和selectedIconClass属性
- 实现通过类名渲染图标的功能
- 更新首页、发现和我的页面的图标为iconClass形式
yourname 4 miesięcy temu
rodzic
commit
7918f08a78

+ 17 - 3
mini/src/components/ui/tab-bar.tsx

@@ -8,6 +8,8 @@ export interface TabBarItem {
   title: string
   icon?: string
   selectedIcon?: string
+  iconClass?: string
+  selectedIconClass?: string
   badge?: number | string
   dot?: boolean
 }
@@ -79,18 +81,30 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
               onClick={() => handleTabChange(item.key)}
             >
               <View className="relative">
-                {item.icon && (
+                {(item.iconClass || item.icon) && (
                   <View
                     className={clsx(
-                      'text-2xl',
                       'mb-1',
+                      'flex items-center justify-center',
+                      item.iconClass ? 'w-6 h-6' : 'text-2xl',
                       isActive ? 'text-blue-500' : 'text-gray-500'
                     )}
                     style={{
                       color: isActive ? selectedColor : color,
                     }}
                   >
-                    {isActive && item.selectedIcon ? item.selectedIcon : item.icon}
+                    {item.iconClass ? (
+                      <View
+                        className={clsx(
+                          isActive && item.selectedIconClass
+                            ? item.selectedIconClass
+                            : item.iconClass,
+                          'w-full h-full'
+                        )}
+                      />
+                    ) : (
+                      isActive && item.selectedIcon ? item.selectedIcon : item.icon
+                    )}
                   </View>
                 )}
                 

+ 6 - 6
mini/src/layouts/tab-bar-layout.tsx

@@ -12,20 +12,20 @@ const tabBarItems: TabBarItem[] = [
   {
     key: 'home',
     title: '首页',
-    icon: '🏠',
-    selectedIcon: '🏠',
+    iconClass: 'i-heroicons-home-20-solid',
+    selectedIconClass: 'i-heroicons-home-20-solid',
   },
   {
     key: 'explore',
     title: '发现',
-    icon: '🔍',
-    selectedIcon: '🔍',
+    iconClass: 'i-heroicons-magnifying-glass-20-solid',
+    selectedIconClass: 'i-heroicons-magnifying-glass-20-solid',
   },
   {
     key: 'profile',
     title: '我的',
-    icon: '👤',
-    selectedIcon: '👤',
+    iconClass: 'i-heroicons-user-20-solid',
+    selectedIconClass: 'i-heroicons-user-20-solid',
   },
 ]