feat(Tabbar): v15 样式适配；增加 icon/value/title 的function类型，支持根据active状态渲染不同数据；增加 onDoubleClick 事件

src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 0px;">11</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">分类</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">逛</div></div></div></div></div>"`;
+exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active nut-tabbar-item-large" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-text">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 0px;">11</div></div></div><div class="nut-tabbar-item nut-tabbar-item-large" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-text">分类</div></div></div><div class="nut-tabbar-item nut-tabbar-item-large" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-text">逛</div></div></div></div></div>"`;
 
-exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;
+exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div><div class="nut-tabbar-item-text">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div><div class="nut-tabbar-item-text">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;

src/packages/tabbar/__tests__/tabbar.spec.tsx

@@ -21,8 +21,8 @@ test('should render tabbar when default', () => {
   expect(container.firstChild).toBeInTheDocument()
   expect(container.querySelectorAll('.nut-tabbar-item').length).toEqual(5)
   expect(
-    container.querySelectorAll('.nut-tabbar-item-icon-box').length
-  ).toEqual(10)
+    container.querySelectorAll('.nut-tabbar-item .nut-icon').length
+  ).toEqual(5)
 })
 
 test('should render custom color and badge when using prop', () => {

src/packages/tabbar/demo.taro.tsx

@@ -17,36 +17,36 @@ const TabbarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '基础用法',
-      c38a08ef: '自定义选中',
+      c38a08ef: '首坑品牌+营销态',
       ce5c5448: '只配图标',
-      ce5c5440: '无图标',
+      ce5c5440: '只配文字',
       b840c88f: '徽标提示',
-      customColor: '自定义颜色',
-      '8dab2f66': '可自定义icon个数的tabbar',
+      customColor: '自定义颜色+数量',
       cfbdc781: '固定底部',
-      c9e6df49: '红点',
+      c9e6df49: '受控',
+      c9e6df48: '模拟双击支持回调',
     },
     'zh-TW': {
       ce5c5446: '基礎用法',
-      c38a08ef: '自定義選中',
-      ce5c5448: '只配图标',
-      ce5c5440: '无图标',
+      c38a08ef: '首坑品牌+營銷態',
+      ce5c5448: '只配圖標',
+      ce5c5440: '只配文字',
       b840c88f: '徽標提示',
-      customColor: '自定義顏色',
-      '8dab2f66': '可自定義icon個數的tabbar',
+      customColor: '自定義顏色+數量',
       cfbdc781: '固定底部',
-      c9e6df49: '紅點',
+      c9e6df49: '受控',
+      c9e6df48: '模擬雙擊支持回調',
     },
     'en-US': {
       ce5c5446: 'Basic Usage',
-      c38a08ef: 'Custom DefaultValue',
+      c38a08ef: 'Custom',
       ce5c5448: 'Only Icon',
-      ce5c5440: 'No Icon',
+      ce5c5440: 'Only Text',
       b840c88f: 'Logo Tips',
-      customColor: 'Custom Color',
-      '8dab2f66': 'Tabbar With Custom Number Of Icons',
+      customColor: 'Custom Color and Size',
       cfbdc781: 'Fixed Bottom',
-      c9e6df49: 'Dot',
+      c9e6df49: 'With Controled',
+      c9e6df48: 'Mock Double Click',
     },
   })
   return (
@@ -55,19 +55,19 @@ const TabbarDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.ce5c5446}</View>
         <Demo1 />
-        <View className="h2">{translated.c38a08ef}</View>
+        <View className="h2">{translated.b840c88f}</View>
         <Demo2 />
         <View className="h2">{translated.ce5c5448}</View>
         <Demo3 />
         <View className="h2">{translated.ce5c5440}</View>
         <Demo4 />
-        <View className="h2">{translated.b840c88f}</View>
+        <View className="h2">{translated.c38a08ef}</View>
         <Demo5 />
-        <View className="h2">{translated.c9e6df49}</View>
-        <Demo6 />
         <View className="h2">{translated.customColor}</View>
+        <Demo6 />
+        <View className="h2">{translated.c9e6df49}</View>
         <Demo7 />
-        <View className="h2">{translated['8dab2f66']}</View>
+        <View className="h2">{translated.c9e6df48}</View>
         <Demo8 />
         <View className="h2" style={{ marginBottom: 100 }}>
           {translated.cfbdc781}

src/packages/tabbar/demo.tsx

@@ -14,36 +14,36 @@ const TabbarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '基础用法',
-      c38a08ef: '自定义选中',
+      c38a08ef: '首坑品牌+营销态',
       ce5c5448: '只配图标',
-      ce5c5440: '无图标',
+      ce5c5440: '只配文字',
       b840c88f: '徽标提示',
-      customColor: '自定义颜色',
-      '8dab2f66': '可自定义icon个数的tabbar',
+      customColor: '自定义颜色+数量',
       cfbdc781: '固定底部',
-      c9e6df49: '红点',
+      c9e6df49: '受控',
+      c9e6df48: '模拟双击支持回调',
     },
     'zh-TW': {
       ce5c5446: '基礎用法',
-      c38a08ef: '自定義選中',
-      ce5c5448: '只配图标',
-      ce5c5440: '无图标',
+      c38a08ef: '首坑品牌+營銷態',
+      ce5c5448: '只配圖標',
+      ce5c5440: '只配文字',
       b840c88f: '徽標提示',
-      customColor: '自定義顏色',
-      '8dab2f66': '可自定義icon個數的tabbar',
+      customColor: '自定義顏色+數量',
       cfbdc781: '固定底部',
-      c9e6df49: '紅點',
+      c9e6df49: '受控',
+      c9e6df48: '模擬雙擊支持回調',
     },
     'en-US': {
       ce5c5446: 'Basic Usage',
-      c38a08ef: 'Custom DefaultValue',
+      c38a08ef: 'Custom',
       ce5c5448: 'Only Icon',
-      ce5c5440: 'No Icon',
+      ce5c5440: 'Only Text',
       b840c88f: 'Logo Tips',
-      customColor: 'Custom Color',
-      '8dab2f66': 'Tabbar With Custom Number Of Icons',
+      customColor: 'Custom Color and Size',
       cfbdc781: 'Fixed Bottom',
-      c9e6df49: 'Dot',
+      c9e6df49: 'With Controled',
+      c9e6df48: 'Mock Double Click',
     },
   })
 
@@ -52,21 +52,21 @@ const TabbarDemo = () => {
       <div className="demo">
         <h2>{translated.ce5c5446}</h2>
         <Demo1 />
-        <h2>{translated.c38a08ef}</h2>
+        <h2>{translated.b840c88f}</h2>
         <Demo2 />
         <h2>{translated.ce5c5448}</h2>
         <Demo3 />
         <h2>{translated.ce5c5440}</h2>
         <Demo4 />
-        <h2>{translated.b840c88f}</h2>
+        <h2>{translated.c38a08ef}</h2>
         <Demo5 />
-        <h2>{translated.c9e6df49}</h2>
-        <Demo6 />
         <h2>{translated.customColor}</h2>
+        <Demo6 />
+        <h2>{translated.c9e6df49}</h2>
         <Demo7 />
-        <h2>{translated['8dab2f66']}</h2>
+        <h2>{translated.c9e6df48}</h2>
         <Demo8 />
-        <h2 style={{ marginBottom: '100px' }}>{translated.cfbdc781}</h2>
+        <h2 style={{ marginBottom: 100 }}>{translated.cfbdc781}</h2>
         <Demo9 />
       </div>
     </>

src/packages/tabbar/demos/h5/demo1.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import { Tabbar } from '@nutui/nutui-react'
-import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
+import { Cart, Hi, Home, User, Heart, HeartFill } from '@nutui/icons-react'
 
-const Demo1 = () => (
-  <Tabbar defaultValue={0}>
-    <Tabbar.Item title="首页" icon={<Home />} value={9} />
-    <Tabbar.Item title="分类" icon={<Category />} dot />
+const Demo = () => (
+  <Tabbar>
+    <Tabbar.Item title="首页" icon={<Home />} />
     <Tabbar.Item title="逛" icon={<Hi />} />
+    <Tabbar.Item
+      title="收藏"
+      icon={(active: boolean) => (active ? <HeartFill /> : <Heart />)}
+    />
     <Tabbar.Item title="购物车" icon={<Cart />} />
     <Tabbar.Item title="我的" icon={<User />} />
   </Tabbar>
 )
 
-export default Demo1
+export default Demo

src/packages/tabbar/demos/h5/demo2.tsx

@@ -1,25 +1,15 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Tabbar } from '@nutui/nutui-react'
-import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
+import { Cart, Message, Hi, Home, User } from '@nutui/icons-react'
 
-const Demo2 = () => {
-  const [activeIndex, setActiveIndex] = useState(2)
+const Demo = () => (
+  <Tabbar>
+    <Tabbar.Item title="首页" icon={<Home />} dot />
+    <Tabbar.Item title="逛" icon={<Hi />} value="内容" />
+    <Tabbar.Item title="消息" icon={<Message />} value={100} />
+    <Tabbar.Item title="购物车" icon={<Cart />} value={80} />
+    <Tabbar.Item title="我的" icon={<User />} value={8} />
+  </Tabbar>
+)
 
-  return (
-    <Tabbar
-      defaultValue={0}
-      value={activeIndex}
-      onSwitch={(value) => {
-        setActiveIndex(value)
-      }}
-    >
-      <Tabbar.Item title="首页" icon={<Home />} />
-      <Tabbar.Item title="分类" icon={<Category />} />
-      <Tabbar.Item title="逛" icon={<Hi />} />
-      <Tabbar.Item title="购物车" icon={<Cart />} />
-      <Tabbar.Item title="我的" icon={<User />} />
-    </Tabbar>
-  )
-}
-
-export default Demo2
+export default Demo

src/packages/tabbar/demos/h5/demo3.tsx

@@ -1,18 +1,14 @@
 import React from 'react'
 import { Tabbar } from '@nutui/nutui-react'
-import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
+import { Cart, Message, Hi, Home, User } from '@nutui/icons-react'
 
-const Demo3 = () => (
-  <Tabbar
-    onSwitch={(value) => {
-      console.log(value)
-    }}
-  >
+const Demo = () => (
+  <Tabbar>
     <Tabbar.Item icon={<Home width={24} height={24} />} />
-    <Tabbar.Item icon={<Category width={24} height={24} />} />
     <Tabbar.Item icon={<Hi width={24} height={24} />} />
+    <Tabbar.Item icon={<Message width={24} height={24} />} />
     <Tabbar.Item icon={<Cart width={24} height={24} />} />
     <Tabbar.Item icon={<User width={24} height={24} />} />
   </Tabbar>
 )
-export default Demo3
+export default Demo

src/packages/tabbar/demos/h5/demo4.tsx

@@ -1,17 +1,13 @@
 import React from 'react'
 import { Tabbar } from '@nutui/nutui-react'
 
-const Demo4 = () => (
-  <Tabbar
-    onSwitch={(value) => {
-      console.log(value)
-    }}
-  >
+const Demo = () => (
+  <Tabbar>
     <Tabbar.Item title="首页" value={9} />
-    <Tabbar.Item title="分类" />
     <Tabbar.Item title="逛" />
+    <Tabbar.Item title="消息" />
     <Tabbar.Item title="购物车" />
     <Tabbar.Item title="我的" />
   </Tabbar>
 )
-export default Demo4
+export default Demo

src/packages/tabbar/demos/h5/demo5.tsx

@@ -1,15 +1,37 @@
 import React from 'react'
-import { Tabbar } from '@nutui/nutui-react'
-import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
+import { Tabbar, Image } from '@nutui/nutui-react'
+import { Cart, Hi, Home, User, Message } from '@nutui/icons-react'
 
-const Demo5 = () => (
-  <Tabbar>
-    <Tabbar.Item title="首页" icon={<Home />} value={11} />
-    <Tabbar.Item title="分类" icon={<Category />} />
-    <Tabbar.Item title="逛" icon={<Hi />} />
-    <Tabbar.Item title="购物车" icon={<Cart />} value={110} />
-    <Tabbar.Item title="我的" icon={<User />} />
-  </Tabbar>
-)
+const Demo = () => {
+  return (
+    <Tabbar>
+      <Tabbar.Item
+        title={(active: boolean) => (active ? '' : '首页')}
+        icon={(active: boolean) =>
+          active ? (
+            <Image src="https://storage.360buyimg.com/imgtools/ba40719add-025fcd20-0618-11f0-8bdb-aba55e067ea2.png" />
+          ) : (
+            <Home />
+          )
+        }
+      />
 
-export default Demo5
+      <Tabbar.Item
+        icon={(active: boolean) =>
+          active ? (
+            <Hi />
+          ) : (
+            <Image src="https://storage.360buyimg.com/imgtools/00e365dee3-8fe58f80-0952-11f0-8d73-ab964e6901f9.png" />
+          )
+        }
+        title={(active: boolean) => (active ? '逛' : '')}
+        value="AI"
+      />
+      <Tabbar.Item title="消息" icon={<Message />} value={100} />
+      <Tabbar.Item title="购物车" icon={<Cart />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar>
+  )
+}
+
+export default Demo

src/packages/tabbar/demos/h5/demo6.tsx

@@ -1,15 +1,29 @@
 import React from 'react'
-import { Tabbar } from '@nutui/nutui-react'
-import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
-
-const Demo6 = () => (
-  <Tabbar>
-    <Tabbar.Item title="首页" icon={<Home />} dot />
-    <Tabbar.Item title="分类" icon={<Category />} />
-    <Tabbar.Item title="逛" icon={<Hi />} />
-    <Tabbar.Item title="购物车" icon={<Cart />} dot />
-    <Tabbar.Item title="我的" icon={<User />} />
-  </Tabbar>
+import { Tabbar, Space } from '@nutui/nutui-react'
+import { Cart, Home, User } from '@nutui/icons-react'
+
+const Demo = () => (
+  <Space direction="vertical">
+    <Tabbar inactiveColor="#7d7e80" activeColor="#0073ff">
+      <Tabbar.Item title="首页" icon={<Home />} />
+      <Tabbar.Item title="购物车" icon={<Cart />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar>
+
+    <Tabbar inactiveColor="#7d7e80" activeColor="#0073ff">
+      <Tabbar.Item title="首页" icon={<Home />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar>
+
+    <Tabbar
+      inactiveColor="#7d7e80"
+      activeColor="#0073ff"
+      direction="horizontal"
+    >
+      <Tabbar.Item title="我的优惠券" icon={<Home />} dot />
+      <Tabbar.Item title="领券中心" icon={<User />} value={22} />
+    </Tabbar>
+  </Space>
 )
 
-export default Demo6
+export default Demo