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