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/demos/h5/demo1.tsx

@@ -1,15 +1,45 @@
 import React from 'react'
-import { Tabbar } from '@nutui/nutui-react'
+import { Tabbar, Image, Space } from '@nutui/nutui-react'
 import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'
 
 const Demo1 = () => (
-  <Tabbar defaultValue={0}>
-    <Tabbar.Item title="首页" icon={<Home />} value={9} />
-    <Tabbar.Item title="分类" icon={<Category />} dot />
-    <Tabbar.Item title="逛" icon={<Hi />} />
-    <Tabbar.Item title="购物车" icon={<Cart />} />
-    <Tabbar.Item title="我的" icon={<User />} />
-  </Tabbar>
+  <Space direction="vertical">
+    <Tabbar defaultValue={0}>
+      <Tabbar.Item title="首页" icon={<Home />} value={9} />
+      <Tabbar.Item title="分类" icon={<Category />} dot />
+      <Tabbar.Item title="逛" icon={<Hi />} />
+      <Tabbar.Item title="购物车" icon={<Cart />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar>
+
+    <Tabbar defaultValue={0}>
+      <Tabbar.Item title="首页" icon={<Home />} value={9} />
+      <Tabbar.Item title="分类" icon={<Category />} dot />
+      <Tabbar.Item
+        icon={
+          <Image src="https://m.360buyimg.com/babel/jfs/t1/191442/19/49010/10556/67111e93F323e2874/0aed1c833b4f56f9.png" />
+        }
+        activeIcon={<Hi />}
+        title="逛"
+      />
+      <Tabbar.Item title="购物车" icon={<Cart />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar>
+
+    {/* <Tabbar defaultValue={0}>
+      <Tabbar.Item
+        title="首页"
+        icon={<Home />}
+        activeIcon={
+          <Image src="https://storage.360buyimg.com/imgtools/ba40719add-025fcd20-0618-11f0-8bdb-aba55e067ea2.png" />
+        }
+      />
+      <Tabbar.Item title="分类" icon={<Category />} dot />
+      <Tabbar.Item icon={<Hi />} title="逛" />
+      <Tabbar.Item title="购物车" icon={<Cart />} />
+      <Tabbar.Item title="我的" icon={<User />} />
+    </Tabbar> */}
+  </Space>
 )
 
 export default Demo1

src/packages/tabbar/doc.en-US.md

@@ -118,16 +118,16 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-tabbar-height | tabbar height | `50px` |
+| \--nutui-tabbar-height | tabbar height | `46px` |
 | \--nutui-tabbar-active-color | active color | `$color-primary` |
 | \--nutui-tabbar-inactive-color | default color | `$color-title` |
 | \--nutui-tabbar-border-top | borderTop | `1px solid #eee` |
 | \--nutui-tabbar-border-bottom | borderBottom | `1px solid #eee` |
 | \--nutui-tabbar-box-shadow | boxShadow | `none` |
-| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-xs` |
+| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-xxs` |
 | \--nutui-tabbar-text-large-font-size | title fontSize when icon is null | `$font-size-l` |
 | \--nutui-tabbar-text-large-font-weight | title fontWeight when icon is null | `$font-weight` |
 | \--nutui-tabbar-text-line-height | title lineHeight | `initial` |
-| \--nutui-tabbar-text-margin-top | title marginTop | `3px` |
+| \--nutui-tabbar-text-margin-top | title marginTop | `4px` |
 
 <Contribution name="Tabbar" />

src/packages/tabbar/doc.md

@@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-tabbar-height | 高度 | `50px` |
+| \--nutui-tabbar-height | 高度 | `46px` |
 | \--nutui-tabbar-active-color | 选中颜色 | `$color-primary` |
 | \--nutui-tabbar-inactive-color | 未选中颜色 | `$color-title` |
 | \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` |
 | \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` |
 | \--nutui-tabbar-box-shadow | 阴影 | `none` |
-| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` |
+| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xxs` |
 | \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-l` |
 | \--nutui-tabbar-text-large-font-weight | 无图标时标题字体粗细 | `$font-weight` |
 | \--nutui-tabbar-text-line-height | 字体行高 | `initial` |
-| \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` |
+| \--nutui-tabbar-text-margin-top | 标题上外边距 | `4px` |
 
 <Contribution name="Tabbar" />

src/packages/tabbar/doc.taro.md

@@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-tabbar-height | 高度 | `50px` |
+| \--nutui-tabbar-height | 高度 | `46px` |
 | \--nutui-tabbar-active-color | 选中颜色 | `$color-primary` |
 | \--nutui-tabbar-inactive-color | 未选中颜色 | `$color-title` |
 | \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` |
 | \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` |
 | \--nutui-tabbar-box-shadow | 阴影 | `none` |
-| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` |
+| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xxs` |
 | \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-l` |
 | \--nutui-tabbar-text-large-font-weight | 无图标时标题字体粗细 | `$font-weight` |
 | \--nutui-tabbar-text-line-height | 字体行高 | `initial` |
-| \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` |
+| \--nutui-tabbar-text-margin-top | 标题上外边距 | `4px` |
 
 <Contribution name="Tabbar" />

src/packages/tabbar/doc.zh-TW.md

@@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-tabbar-height | 高度 | `50px` |
+| \--nutui-tabbar-height | 高度 | `46px` |
 | \--nutui-tabbar-active-color | 選中顏色 | `$color-primary` |
 | \--nutui-tabbar-inactive-color | 未選中顏色 | `$color-title` |
 | \--nutui-tabbar-border-top | 上邊框 | `1px solid #eee` |
 | \--nutui-tabbar-border-bottom | 下邊框 | `1px solid #eee` |
 | \--nutui-tabbar-box-shadow | 陰影 | `none` |
-| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-xs` |
+| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-xxs` |
 | \--nutui-tabbar-text-large-font-size | 無圖標時標題字體大小 | `$font-size-l` |
 | \--nutui-tabbar-text-large-font-weight | 無圖標時標題字體粗細 | `$font-weight` |
 | \--nutui-tabbar-text-line-height | 字體行高 | `initial` |
-| \--nutui-tabbar-text-margin-top | 標題上外邊距 | `3px` |
+| \--nutui-tabbar-text-margin-top | 標題上外邊距 | `4px` |
 
 <Contribution name="Tabbar" />

src/packages/tabbaritem/tabbaritem.scss

@@ -3,53 +3,63 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
+  padding: 6px 0 2px;
   text-align: center;
   text-decoration: none;
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-icon-box {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+  .nut-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    /* #ifdef harmony*/
+    color: $tabbar-inactive-color;
+    /* #endif*/
+    /* #ifndef harmony*/
+    color: inherit;
+    /* #endif*/
+  }
 
-    .nut-icon {
-      width: 22px;
-      height: 22px;
-      font-size: 22px;
-      /* #ifdef harmony*/
-      color: $tabbar-inactive-color;
-      /* #endif*/
-      /* #ifndef harmony*/
-      color: inherit;
-      /* #endif*/
+  &-text {
+    display: block;
+    color: $color-text;
+    font-size: $tabbar-text-font-size;
+    line-height: $tabbar-text-font-size;
+    margin-top: $tabbar-text-margin-top;
+  }
+
+  .nut-image {
+    &-default {
+      width: 38px;
+      height: 38px;
+      border-radius: 38px;
     }
+  }
 
-    &-nav {
-      display: block;
-      color: $color-text;
-      font-size: $tabbar-text-font-size;
-      line-height: $tabbar-text-font-size;
-      margin-top: $tabbar-text-margin-top;
+  &-large {
+    justify-content: center;
+    padding: 0;
+    .nut-icon {
+      width: 38px;
+      height: 38px;
+      font-size: 38px;
     }
 
-    &-large {
+    .nut-tabbar-item-text {
       font-size: $tabbar-text-large-font-size;
       margin-top: 0;
-      line-height: $tabbar-text-line-height;
+      line-height: $tabbar-text-large-font-size;
       font-weight: $tabbar-text-large-font-weight;
     }
   }
 
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box,
+    .nut-tabbar-item-text,
     .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;

src/packages/tabbaritem/tabbaritem.tsx

@@ -5,10 +5,12 @@
 import TabbarContext from '@/packages/tabbar/context'
 import { WebTabbarItemProps } from '@/types'
 
+// 是否支持双击事件？
 const defaultProps = {
   ...ComponentDefaults,
   title: '',
   icon: null,
+  activeIcon: null,
   value: '',
   dot: false,
   max: 99,
@@ -25,6 +27,7 @@
     style,
     title,
     icon,
+    activeIcon,
     value,
     dot,
     max,
@@ -39,17 +42,22 @@
   }
   const active = index === ctx?.selectIndex
   const classPrefix = 'nut-tabbar-item'
+
+  // 默认有 icon 和 text，icon+badge
+  // 考虑 只有icon时，icon large，icon+badge
+  // 考虑 只有text时，text large，text+badge
+
+  // 如果有 activeIcon，则icon为默认态，activeIcon为选中态；
+  // 如果有 activeIcon，但没有 icon，则异常
+  // 如果没有 activeIcon，则icon为默认态，同时也为选中态，遵循默认选中规则
   const tabbarItemClass = classNames(
     classPrefix,
     {
       [`${classPrefix}-active`]: active,
+      [`${classPrefix}-large`]: !icon || !title,
     },
     className
   )
-  const boxPrefix = `${classPrefix}-icon-box`
-  const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
-    [`${boxPrefix}-large`]: !icon,
-  })
 
   const badgeProps = {
     value,
@@ -61,7 +69,29 @@
   }
 
   const renderTitleText = () => {
-    return title && <div className={titleClass}>{title}</div>
+    return title && <div className={`${classPrefix}-text`}>{title}</div>
+  }
+
+  const renderTitle = () => {
+    return <Badge {...badgeProps}>{renderTitleText()}</Badge>
+  }
+
+  const renderIconAndTitle = () => {
+    return (
+      <>
+        <Badge {...badgeProps}>{icon}</Badge>
+        {renderTitleText()}
+      </>
+    )
+  }
+
+  const renderIconAndActiveIcon = () => {
+    return (
+      <>
+        <Badge {...badgeProps}>{active ? activeIcon : icon}</Badge>
+        {active && renderTitleText()}
+      </>
+    )
   }
 
   return (
@@ -74,16 +104,9 @@
       onClick={() => ctx?.handleClick(index)}
       {...rest}
     >
-      {icon ? (
-        <>
-          <Badge {...badgeProps}>
-            <div className={boxPrefix}>{icon}</div>
-          </Badge>
-          {renderTitleText()}
-        </>
-      ) : (
-        <Badge {...badgeProps}>{renderTitleText()}</Badge>
-      )}
+      {icon && !activeIcon && renderIconAndTitle()}
+      {!icon && renderTitle()}
+      {icon && activeIcon && renderIconAndActiveIcon()}
     </div>
   )
 }

src/styles/variables.scss

@@ -1135,7 +1135,7 @@ $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
 $rate-font-size: var(--nutui-rate-font-size, 12px) !default;
 
 // tabbar（✅）
-$tabbar-height: var(--nutui-tabbar-height, 50px) !default;
+$tabbar-height: var(--nutui-tabbar-height, 46px) !default;
 $tabbar-active-color: var(--nutui-tabbar-active-color, $color-primary) !default;
 $tabbar-inactive-color: var(
   --nutui-tabbar-inactive-color,
@@ -1149,7 +1149,7 @@ $tabbar-border-bottom: var(
 $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default;
 $tabbar-text-font-size: var(
   --nutui-tabbar-text-font-size,
-  $font-size-xs
+  $font-size-xxs
 ) !default;
 $tabbar-text-large-font-size: var(
   --nutui-tabbar-text-large-font-size,
@@ -1160,8 +1160,7 @@ $tabbar-text-large-font-weight: var(
   $font-weight
 ) !default;
 $tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
-$tabbar-height: var(--nutui-tabbar-height, 50px) !default;
-$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default;
+$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 4px) !default;
 
 //pulltorefresh
 $pulltorefresh-icon-width: var(--nutui-pulltorefresh-icon-width, 36px) !default;

src/types/spec/tabbar/base.ts

@@ -14,6 +14,7 @@ export interface BaseTabbar extends BaseProps {
 export interface BaseTabbarItem extends BaseProps {
   title: ReactNode
   icon: ReactNode
+  activeIcon: ReactNode
   value: ReactNode
   dot: boolean
   max: number