From 42e6f3497ad58278a93386f80077557714273d54 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 21 Mar 2025 11:54:47 +0800 Subject: [PATCH 01/15] =?UTF-8?q?feat:=20v15=20=E6=A0=B7=E5=BC=8F=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbaritem/tabbaritem.scss | 56 +++++++++++++------------ src/packages/tabbaritem/tabbaritem.tsx | 15 ++++--- src/styles/variables.scss | 6 +-- 3 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index fcdec7da14..e1854cba52 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -3,45 +3,47 @@ .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; + } - &-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; } } @@ -49,7 +51,7 @@ &-active { color: $tabbar-active-color; - .nut-tabbar-item-icon-box, + .nut-tabbar-item-text, .nut-icon { /* #ifdef harmony*/ color: $tabbar-active-color; diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index bba38b14f7..f16beaee02 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -39,17 +39,18 @@ export const TabbarItem: FunctionComponent> = ( } const active = index === ctx?.selectIndex const classPrefix = 'nut-tabbar-item' + + // 默认有 icon 和 text，icon+badge + // 考虑 只有icon时，icon large，icon+badge + // 考虑 只有text时，text large，text+badge 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 +62,7 @@ export const TabbarItem: FunctionComponent> = ( } const renderTitleText = () => { - return title &&
{title}
+ return title &&
{title}
} return ( @@ -76,9 +77,7 @@ export const TabbarItem: FunctionComponent> = ( > {icon ? ( <> - -
{icon}
- + {icon} {renderTitleText()} ) : ( diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3276b5699d..13bc435489 100644 --- a/src/styles/variables.scss +++ b/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, @@ -1161,7 +1161,7 @@ $tabbar-text-large-font-weight: var( ) !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; From 7ccd1bfb87327d2cb93443167cf93dfc78b5f831 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 21 Mar 2025 12:02:11 +0800 Subject: [PATCH 02/15] docs: update --- src/packages/tabbar/doc.en-US.md | 6 +++--- src/packages/tabbar/doc.md | 6 +++--- src/packages/tabbar/doc.taro.md | 6 +++--- src/packages/tabbar/doc.zh-TW.md | 6 +++--- src/styles/variables.scss | 1 - 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/packages/tabbar/doc.en-US.md b/src/packages/tabbar/doc.en-US.md index 60982b9f24..8f9b1871ac 100644 --- a/src/packages/tabbar/doc.en-US.md +++ b/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` | diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index c703950d6a..f83796e069 100644 --- a/src/packages/tabbar/doc.md +++ b/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` | diff --git a/src/packages/tabbar/doc.taro.md b/src/packages/tabbar/doc.taro.md index da8682648f..f2c8b2b0d1 100644 --- a/src/packages/tabbar/doc.taro.md +++ b/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` | diff --git a/src/packages/tabbar/doc.zh-TW.md b/src/packages/tabbar/doc.zh-TW.md index 6f6ad8b846..fb6e00afa2 100644 --- a/src/packages/tabbar/doc.zh-TW.md +++ b/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` | diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 13bc435489..476fb784ec 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1160,7 +1160,6 @@ $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, 4px) !default; //pulltorefresh From 74b4baebb170587f0844c8bb5b074e1f81cc17de Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 21 Mar 2025 14:42:57 +0800 Subject: [PATCH 03/15] feat: add new feature --- src/packages/tabbar/demos/h5/demo1.tsx | 52 +++++++++++++++++++++---- src/packages/tabbaritem/tabbaritem.scss | 8 ++++ src/packages/tabbaritem/tabbaritem.tsx | 40 +++++++++++++++---- src/types/spec/tabbar/base.ts | 1 + 4 files changed, 85 insertions(+), 16 deletions(-) diff --git a/src/packages/tabbar/demos/h5/demo1.tsx b/src/packages/tabbar/demos/h5/demo1.tsx index c2bcf25557..002501a179 100644 --- a/src/packages/tabbar/demos/h5/demo1.tsx +++ b/src/packages/tabbar/demos/h5/demo1.tsx @@ -1,15 +1,51 @@ 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 = () => ( - - } value={9} /> - } dot /> - } /> - } /> - } /> - + + + } value={9} /> + } dot /> + } /> + } /> + } /> + + + + } value={9} /> + } dot /> + + } + activeIcon={} + title="逛" + // value="内容" + // right="-2" + // top="4" + /> + } /> + } /> + + + + } + activeIcon={ + + } + value={9} + right="-2" + top="4" + /> + } dot /> + } title="逛" /> + } /> + } /> + + ) export default Demo1 diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index e1854cba52..3fa44372f0 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -31,6 +31,14 @@ margin-top: $tabbar-text-margin-top; } + .nut-image { + &-default { + width: 38px; + height: 38px; + border-radius: 38px; + } + } + &-large { justify-content: center; padding: 0; diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index f16beaee02..d86bfa285d 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -5,10 +5,12 @@ import Badge from '@/packages/badge/index' 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 @@ export const TabbarItem: FunctionComponent> = ( style, title, icon, + activeIcon, value, dot, max, @@ -43,6 +46,10 @@ export const TabbarItem: FunctionComponent> = ( // 默认有 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, { @@ -65,6 +72,28 @@ export const TabbarItem: FunctionComponent> = ( return title &&
{title}
} + const renderTitle = () => { + return {renderTitleText()} + } + + const renderIconAndTitle = () => { + return ( + <> + {icon} + {renderTitleText()} + + ) + } + + const renderIconAndActiveIcon = () => { + return ( + <> + {active ? activeIcon : icon} + {active && renderTitleText()} + + ) + } + return (
> = ( onClick={() => ctx?.handleClick(index)} {...rest} > - {icon ? ( - <> - {icon} - {renderTitleText()} - - ) : ( - {renderTitleText()} - )} + {icon && !activeIcon && renderIconAndTitle()} + {!icon && renderTitle()} + {icon && activeIcon && renderIconAndActiveIcon()}
) } diff --git a/src/types/spec/tabbar/base.ts b/src/types/spec/tabbar/base.ts index 8eaca5fbb8..86c1db9c1d 100644 --- a/src/types/spec/tabbar/base.ts +++ b/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 From 98addadfae22433a7f4e5e05750ce281dfb9d408 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 25 Mar 2025 12:44:32 +0800 Subject: [PATCH 04/15] test: fixed --- .../__tests__/__snapshots__/tabbar.spec.tsx.snap | 4 ++-- src/packages/tabbar/__tests__/tabbar.spec.tsx | 4 ++-- src/packages/tabbar/demos/h5/demo1.tsx | 10 ++-------- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 0cac7282f9..65bc55dd03 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/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`] = `"
首页
11
分类
逛
"`; +exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; -exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; +exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; diff --git a/src/packages/tabbar/__tests__/tabbar.spec.tsx b/src/packages/tabbar/__tests__/tabbar.spec.tsx index 7162b6c6df..95518992bd 100644 --- a/src/packages/tabbar/__tests__/tabbar.spec.tsx +++ b/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', () => { diff --git a/src/packages/tabbar/demos/h5/demo1.tsx b/src/packages/tabbar/demos/h5/demo1.tsx index 002501a179..71b99f4693 100644 --- a/src/packages/tabbar/demos/h5/demo1.tsx +++ b/src/packages/tabbar/demos/h5/demo1.tsx @@ -21,30 +21,24 @@ const Demo1 = () => ( } activeIcon={} title="逛" - // value="内容" - // right="-2" - // top="4" /> } /> } /> - + {/* } activeIcon={ } - value={9} - right="-2" - top="4" /> } dot /> } title="逛" /> } /> } /> - + */} ) From 1ea27bb8009e9a614af88da2a9b445d5979efd5a Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 25 Mar 2025 18:12:35 +0800 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4icon=E5=92=8Cti?= =?UTF-8?q?tle=E7=9A=84=E7=B1=BB=E5=9E=8B,=E6=94=AF=E6=8C=81function?= =?UTF-8?q?=E5=A4=84=E7=90=86,=E5=A2=9E=E5=8A=A0=E5=8F=8C=E5=87=BB?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demo.taro.tsx | 40 +++++++------- src/packages/tabbar/demo.tsx | 42 +++++++------- src/packages/tabbar/demos/h5/demo1.tsx | 55 +++++-------------- src/packages/tabbar/demos/h5/demo2.tsx | 34 ++++-------- src/packages/tabbar/demos/h5/demo3.tsx | 14 ++--- src/packages/tabbar/demos/h5/demo4.tsx | 12 ++-- src/packages/tabbar/demos/h5/demo5.tsx | 46 ++++++++++++---- src/packages/tabbar/demos/h5/demo6.tsx | 13 ++--- src/packages/tabbar/demos/h5/demo7.tsx | 29 ++++++---- src/packages/tabbar/demos/h5/demo8.tsx | 19 +++++-- src/packages/tabbar/demos/h5/demo9.tsx | 8 +-- src/packages/tabbar/demos/taro/demo1.tsx | 15 +++-- src/packages/tabbar/demos/taro/demo2.tsx | 18 +++--- src/packages/tabbar/demos/taro/demo3.tsx | 11 +--- src/packages/tabbar/demos/taro/demo4.tsx | 9 +-- src/packages/tabbar/demos/taro/demo5.tsx | 46 ++++++++++++---- src/packages/tabbar/demos/taro/demo6.tsx | 13 ++--- src/packages/tabbar/demos/taro/demo7.tsx | 29 ++++++---- src/packages/tabbar/demos/taro/demo8.tsx | 19 +++++-- src/packages/tabbar/demos/taro/demo9.tsx | 4 +- src/packages/tabbar/doc.en-US.md | 4 +- src/packages/tabbar/doc.md | 4 +- src/packages/tabbar/doc.taro.md | 4 +- src/packages/tabbar/doc.zh-TW.md | 4 +- src/packages/tabbaritem/tabbaritem.scss | 10 ++-- src/packages/tabbaritem/tabbaritem.taro.tsx | 50 +++++++++-------- src/packages/tabbaritem/tabbaritem.tsx | 43 ++++++--------- .../doc/docs/react/migrate-from-v2.md | 7 +++ src/types/spec/tabbar/base.ts | 8 +-- 29 files changed, 312 insertions(+), 298 deletions(-) diff --git a/src/packages/tabbar/demo.taro.tsx b/src/packages/tabbar/demo.taro.tsx index 46b8b05d09..4715debffd 100644 --- a/src/packages/tabbar/demo.taro.tsx +++ b/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: '自定義選中', + c38a08ef: '首坑品牌+营销态', ce5c5448: '只配图标', - ce5c5440: '无图标', + ce5c5440: '只配文字', b840c88f: '徽標提示', - customColor: '自定義顏色', - '8dab2f66': '可自定義icon個數的tabbar', + customColor: '自定義顏色+数量', cfbdc781: '固定底部', - c9e6df49: '紅點', + c9e6df49: '受控', + c9e6df48: '模拟双击支持回调', }, 'en-US': { ce5c5446: 'Basic Usage', - c38a08ef: 'Custom DefaultValue', + c38a08ef: '首坑品牌+营销态', 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 = () => { {translated.ce5c5446} - {translated.c38a08ef} + {translated.b840c88f} {translated.ce5c5448} {translated.ce5c5440} - {translated.b840c88f} + {translated.c38a08ef} - {translated.c9e6df49} - {translated.customColor} + + {translated.c9e6df49} - {translated['8dab2f66']} + {translated.c9e6df48} {translated.cfbdc781} diff --git a/src/packages/tabbar/demo.tsx b/src/packages/tabbar/demo.tsx index ea2325d3f3..a0ff29aa18 100644 --- a/src/packages/tabbar/demo.tsx +++ b/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: '自定義選中', + c38a08ef: '首坑品牌+营销态', ce5c5448: '只配图标', - ce5c5440: '无图标', + ce5c5440: '只配文字', b840c88f: '徽標提示', - customColor: '自定義顏色', - '8dab2f66': '可自定義icon個數的tabbar', + customColor: '自定義顏色+数量', cfbdc781: '固定底部', - c9e6df49: '紅點', + c9e6df49: '受控', + c9e6df48: '模拟双击支持回调', }, 'en-US': { ce5c5446: 'Basic Usage', - c38a08ef: 'Custom DefaultValue', + c38a08ef: '首坑品牌+营销态', 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 = () => {

{translated.ce5c5446}

-

{translated.c38a08ef}

+

{translated.b840c88f}

{translated.ce5c5448}

{translated.ce5c5440}

-

{translated.b840c88f}

+

{translated.c38a08ef}

-

{translated.c9e6df49}

-

{translated.customColor}

+ +

{translated.c9e6df49}

-

{translated['8dab2f66']}

+

{translated.c9e6df48}

-

{translated.cfbdc781}

+

{translated.cfbdc781}

diff --git a/src/packages/tabbar/demos/h5/demo1.tsx b/src/packages/tabbar/demos/h5/demo1.tsx index 71b99f4693..9093fa863b 100644 --- a/src/packages/tabbar/demos/h5/demo1.tsx +++ b/src/packages/tabbar/demos/h5/demo1.tsx @@ -1,45 +1,18 @@ import React from 'react' -import { Tabbar, Image, Space } from '@nutui/nutui-react' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react' +import { Tabbar } from '@nutui/nutui-react' +import { Cart, Hi, Home, User, Heart, HeartFill } from '@nutui/icons-react' -const Demo1 = () => ( - - - } value={9} /> - } dot /> - } /> - } /> - } /> - - - - } value={9} /> - } dot /> - - } - activeIcon={} - title="逛" - /> - } /> - } /> - - - {/* - } - activeIcon={ - - } - /> - } dot /> - } title="逛" /> - } /> - } /> - */} - +const Demo = () => ( + + } /> + } /> + (active ? : )} + /> + } /> + } /> + ) -export default Demo1 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo2.tsx b/src/packages/tabbar/demos/h5/demo2.tsx index 77ab75a6ea..3eaa4b7e8d 100644 --- a/src/packages/tabbar/demos/h5/demo2.tsx +++ b/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 = () => ( + + } dot /> + } value="内容" /> + } value={100} /> + } value={80} /> + } value={8} /> + +) - return ( - { - setActiveIndex(value) - }} - > - } /> - } /> - } /> - } /> - } /> - - ) -} - -export default Demo2 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo3.tsx b/src/packages/tabbar/demos/h5/demo3.tsx index 2d529e7a64..843593385d 100644 --- a/src/packages/tabbar/demos/h5/demo3.tsx +++ b/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 = () => ( - { - console.log(value) - }} - > +const Demo = () => ( + } /> - } /> } /> + } /> } /> } /> ) -export default Demo3 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo4.tsx b/src/packages/tabbar/demos/h5/demo4.tsx index c34d9970cd..c0e1ddaa3a 100644 --- a/src/packages/tabbar/demos/h5/demo4.tsx +++ b/src/packages/tabbar/demos/h5/demo4.tsx @@ -1,17 +1,13 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react' -const Demo4 = () => ( - { - console.log(value) - }} - > +const Demo = () => ( + - + ) -export default Demo4 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo5.tsx b/src/packages/tabbar/demos/h5/demo5.tsx index 49810182b1..41cf9d6208 100644 --- a/src/packages/tabbar/demos/h5/demo5.tsx +++ b/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 = () => ( - - } value={11} /> - } /> - } /> - } value={110} /> - } /> - -) +const Demo = () => { + return ( + + (active ? '' : '首页')} + icon={(active: boolean) => + active ? ( + + ) : ( + + ) + } + /> -export default Demo5 + + active ? ( + + ) : ( + + ) + } + title={(active: boolean) => (active ? '逛' : '')} + value="AI" + /> + } value={100} /> + } /> + } /> + + ) +} + +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo6.tsx b/src/packages/tabbar/demos/h5/demo6.tsx index a520a164f3..e650c04061 100644 --- a/src/packages/tabbar/demos/h5/demo6.tsx +++ b/src/packages/tabbar/demos/h5/demo6.tsx @@ -1,15 +1,14 @@ 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 } from '@nutui/icons-react' -const Demo6 = () => ( - - } dot /> - } /> +const Demo = () => ( + + } /> } /> - } dot /> + } /> } /> ) -export default Demo6 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo7.tsx b/src/packages/tabbar/demos/h5/demo7.tsx index ea95c1c801..0150e34d80 100644 --- a/src/packages/tabbar/demos/h5/demo7.tsx +++ b/src/packages/tabbar/demos/h5/demo7.tsx @@ -1,15 +1,20 @@ -import React from 'react' +import React, { useState } from 'react' import { Tabbar } from '@nutui/nutui-react' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react' +import { Cart, Hi, Home, User } from '@nutui/icons-react' -const Demo7 = () => ( - - } /> - } /> - } /> - } /> - } /> - -) +const Demo = () => { + const [index, setIndex] = useState(3) -export default Demo7 + return ( + <> + setIndex(value)}> + } /> + } /> + } /> + } /> + + + ) +} + +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo8.tsx b/src/packages/tabbar/demos/h5/demo8.tsx index 56676f6451..2daa892906 100644 --- a/src/packages/tabbar/demos/h5/demo8.tsx +++ b/src/packages/tabbar/demos/h5/demo8.tsx @@ -1,13 +1,22 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react' -import { Category, Hi, Home } from '@nutui/icons-react' +import { Cart, Hi, Home, User, Heart, HeartFill } from '@nutui/icons-react' -const Demo8 = () => ( - +const Demo = () => ( + } /> - } /> } /> + (active ? : )} + /> + } + onDoubleClick={() => console.log('可以在这里写想要的事件')} + /> + } /> ) -export default Demo8 +export default Demo diff --git a/src/packages/tabbar/demos/h5/demo9.tsx b/src/packages/tabbar/demos/h5/demo9.tsx index 8a7c7711a6..7f2f530f6c 100644 --- a/src/packages/tabbar/demos/h5/demo9.tsx +++ b/src/packages/tabbar/demos/h5/demo9.tsx @@ -1,15 +1,15 @@ 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 Demo9 = () => ( +const Demo = () => ( } /> - } /> } /> + } /> } /> } /> ) -export default Demo9 +export default Demo diff --git a/src/packages/tabbar/demos/taro/demo1.tsx b/src/packages/tabbar/demos/taro/demo1.tsx index 5dc7d62d3b..aa769e1762 100644 --- a/src/packages/tabbar/demos/taro/demo1.tsx +++ b/src/packages/tabbar/demos/taro/demo1.tsx @@ -1,16 +1,15 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, HeartFill, Heart, Hi, Home, User } from '@nutui/icons-react-taro' const Demo1 = () => ( - { - console.log(value) - }} - > - } value={9} /> - } /> + + } /> } /> + (active ? : )} + /> } /> } /> diff --git a/src/packages/tabbar/demos/taro/demo2.tsx b/src/packages/tabbar/demos/taro/demo2.tsx index 8e6d3675a0..25504aecbd 100644 --- a/src/packages/tabbar/demos/taro/demo2.tsx +++ b/src/packages/tabbar/demos/taro/demo2.tsx @@ -1,15 +1,15 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, Hi, Home, User, Message } from '@nutui/icons-react-taro' -const Demo2 = () => ( - - } /> - } /> - } /> - } /> - } /> +const Demo5 = () => ( + + } title="首页" dot /> + } value="内容" /> + } value={100} /> + } value={80} /> + } value={8} /> ) -export default Demo2 +export default Demo5 diff --git a/src/packages/tabbar/demos/taro/demo3.tsx b/src/packages/tabbar/demos/taro/demo3.tsx index ca83abc8a8..99995e3ff6 100644 --- a/src/packages/tabbar/demos/taro/demo3.tsx +++ b/src/packages/tabbar/demos/taro/demo3.tsx @@ -1,19 +1,14 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, Message, Hi, Home, User } from '@nutui/icons-react-taro' const Demo3 = () => ( - { - console.log(value) - }} - > + } /> - } /> } /> + } /> } /> } /> ) - export default Demo3 diff --git a/src/packages/tabbar/demos/taro/demo4.tsx b/src/packages/tabbar/demos/taro/demo4.tsx index cc27a0f16b..2e06ac000f 100644 --- a/src/packages/tabbar/demos/taro/demo4.tsx +++ b/src/packages/tabbar/demos/taro/demo4.tsx @@ -2,17 +2,12 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' const Demo4 = () => ( - { - console.log(value) - }} - > + - + ) - export default Demo4 diff --git a/src/packages/tabbar/demos/taro/demo5.tsx b/src/packages/tabbar/demos/taro/demo5.tsx index bccb849b86..f688d682ee 100644 --- a/src/packages/tabbar/demos/taro/demo5.tsx +++ b/src/packages/tabbar/demos/taro/demo5.tsx @@ -1,15 +1,37 @@ import React from 'react' -import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Tabbar, Image } from '@nutui/nutui-react-taro' +import { Cart, Hi, Home, User, Message } from '@nutui/icons-react-taro' -const Demo5 = () => ( - - } title="首页" value={11} /> - } /> - } /> - } value={110} /> - } /> - -) +const Demo2 = () => { + return ( + + (active ? '' : '首页')} + icon={(active: boolean) => + active ? ( + + ) : ( + + ) + } + /> -export default Demo5 + + active ? ( + + ) : ( + + ) + } + title={(active: boolean) => (active ? '逛' : '')} + value="AI" + /> + } value={100} /> + } /> + } /> + + ) +} + +export default Demo2 diff --git a/src/packages/tabbar/demos/taro/demo6.tsx b/src/packages/tabbar/demos/taro/demo6.tsx index 75a4064f82..efcc3921d4 100644 --- a/src/packages/tabbar/demos/taro/demo6.tsx +++ b/src/packages/tabbar/demos/taro/demo6.tsx @@ -1,15 +1,14 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, Hi, Home, User } from '@nutui/icons-react-taro' -const Demo6 = () => ( - - } dot /> - } /> +const Demo7 = () => ( + + } /> } /> - } dot /> + } /> } /> ) -export default Demo6 +export default Demo7 diff --git a/src/packages/tabbar/demos/taro/demo7.tsx b/src/packages/tabbar/demos/taro/demo7.tsx index 3e2c8fe155..0eed28496a 100644 --- a/src/packages/tabbar/demos/taro/demo7.tsx +++ b/src/packages/tabbar/demos/taro/demo7.tsx @@ -1,15 +1,20 @@ -import React from 'react' +import React, { useState } from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, Hi, Home, User } from '@nutui/icons-react-taro' -const Demo7 = () => ( - - } /> - } /> - } /> - } /> - } /> - -) +const Demo = () => { + const [index, setIndex] = useState(3) -export default Demo7 + return ( + <> + setIndex(value)}> + } /> + } /> + } /> + } /> + + + ) +} + +export default Demo diff --git a/src/packages/tabbar/demos/taro/demo8.tsx b/src/packages/tabbar/demos/taro/demo8.tsx index 6db0b54620..7130ab1d68 100644 --- a/src/packages/tabbar/demos/taro/demo8.tsx +++ b/src/packages/tabbar/demos/taro/demo8.tsx @@ -1,13 +1,22 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Category, Hi, Home } from '@nutui/icons-react-taro' +import { Cart, Hi, Home, User, Heart, HeartFill } from '@nutui/icons-react-taro' -const Demo8 = () => ( - +const Demo = () => ( + } /> - } /> } /> + (active ? : )} + /> + } + onDoubleClick={() => console.log('可以在这里写想要的事件')} + /> + } /> ) -export default Demo8 +export default Demo diff --git a/src/packages/tabbar/demos/taro/demo9.tsx b/src/packages/tabbar/demos/taro/demo9.tsx index b9e8b3fe7e..ef8b2ece6d 100644 --- a/src/packages/tabbar/demos/taro/demo9.tsx +++ b/src/packages/tabbar/demos/taro/demo9.tsx @@ -1,12 +1,12 @@ import React from 'react' import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro' +import { Cart, Message, Hi, Home, User } from '@nutui/icons-react-taro' const Demo9 = () => ( } /> - } /> } /> + } /> } /> } /> diff --git a/src/packages/tabbar/doc.en-US.md b/src/packages/tabbar/doc.en-US.md index 8f9b1871ac..53446ee9d8 100644 --- a/src/packages/tabbar/doc.en-US.md +++ b/src/packages/tabbar/doc.en-US.md @@ -102,8 +102,8 @@ import { Tabbar } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | -| title | the title of the tab | `ReactNode` | `-` | -| icon | Custom icon | `ReactNode` | `-` | +| title | the title of the tab | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | +| icon | Custom icon | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | value | value to show in Badge, eg number、charctor and custom content | `ReactNode` | `-` | | max | when value is number, it's the max size | `number` | `99` | | dot | Whether Badge is dotted | `boolean` | `false` | diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index f83796e069..2d7f07d83a 100644 --- a/src/packages/tabbar/doc.md +++ b/src/packages/tabbar/doc.md @@ -102,8 +102,8 @@ import { Tabbar } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| title | 标签页的标题 | `ReactNode` | `-` | -| icon | 自定义图标 | `ReactNode` | `-` | +| title | 标签页的标题 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | +| icon | 自定义图标 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 徽标是否为小点 | `boolean` | `false` | diff --git a/src/packages/tabbar/doc.taro.md b/src/packages/tabbar/doc.taro.md index f2c8b2b0d1..880545df63 100644 --- a/src/packages/tabbar/doc.taro.md +++ b/src/packages/tabbar/doc.taro.md @@ -102,8 +102,8 @@ import { Tabbar } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| title | 标签页的标题 | `ReactNode` | `-` | -| icon | 自定义图标 | `ReactNode` | `-` | +| title | 标签页的标题 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | +| icon | 自定义图标 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 徽标是否为小点 | `boolean` | `false` | diff --git a/src/packages/tabbar/doc.zh-TW.md b/src/packages/tabbar/doc.zh-TW.md index fb6e00afa2..36e7f5eda0 100644 --- a/src/packages/tabbar/doc.zh-TW.md +++ b/src/packages/tabbar/doc.zh-TW.md @@ -102,8 +102,8 @@ import { Tabbar } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| title | 標簽頁的標題 | `ReactNode` | `-` | -| icon | 自定義圖標 | `ReactNode` | `-` | +| title | 標簽頁的標題 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | +| icon | 自定義圖標 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | value | 徽標中顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` | | max | value 為數值時，最大值 | `number` | `99` | | dot | 徽標是否為小點 | `boolean` | `false` | diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 3fa44372f0..6faf38120c 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -42,11 +42,11 @@ &-large { justify-content: center; padding: 0; - .nut-icon { - width: 38px; - height: 38px; - font-size: 38px; - } + // .nut-icon { + // // width: 38px; + // // height: 38px; + // // font-size: 38px; + // } .nut-tabbar-item-text { font-size: $tabbar-text-large-font-size; diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 5c66c57d1c..2fb515abc5 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -4,7 +4,6 @@ import { View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' import Badge from '@/packages/badge/index.taro' import TabbarContext from '@/packages/tabbar/context' -import addColorForHarmony from '@/utils/add-color-for-harmony' import { TaroTabbarItemProps } from '@/types' const defaultProps = { @@ -34,6 +33,7 @@ export const TabbarItem: FunctionComponent> = ( right, // @ts-ignore index, + onDoubleClick, ...rest } = { ...defaultProps, @@ -45,16 +45,16 @@ export const TabbarItem: FunctionComponent> = ( classPrefix, { [`${classPrefix}-active`]: active, + [`${classPrefix}-large`]: !icon || !title, }, className ) - const boxPrefix = `${classPrefix}-icon-box` - const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, { - [`${boxPrefix}-large`]: !icon, - }) + + const badgeValue = + value && typeof value === 'function' ? value(active) : value const badgeProps = { - value, + value: badgeValue, dot, max, top, @@ -66,17 +66,32 @@ export const TabbarItem: FunctionComponent> = ( return ( title && ( - {title} + {typeof title === 'function' ? title(active) : title} ) ) } + const renderTitle = () => { + return {renderTitleText()} + } + + const renderIconAndTitle = () => { + return ( + <> + + {icon && typeof icon === 'function' ? icon(active) : icon} + + {renderTitleText()} + + ) + } + return ( > = ( color: active ? ctx?.activeColor : ctx?.inactiveColor, ...style, }} - onClick={() => ctx?.handleClick(index)} + onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} {...rest} > - {icon ? ( - <> - - - {addColorForHarmony( - icon, - active ? ctx?.activeColor : ctx?.inactiveColor - )} - - - {renderTitleText()} - - ) : ( - {renderTitleText()} - )} + {icon && renderIconAndTitle()} + {!icon && renderTitle()} ) } diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index d86bfa285d..65a3d25060 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -5,12 +5,10 @@ import Badge from '@/packages/badge/index' import TabbarContext from '@/packages/tabbar/context' import { WebTabbarItemProps } from '@/types' -// 是否支持双击事件？ const defaultProps = { ...ComponentDefaults, title: '', icon: null, - activeIcon: null, value: '', dot: false, max: 99, @@ -27,7 +25,6 @@ export const TabbarItem: FunctionComponent> = ( style, title, icon, - activeIcon, value, dot, max, @@ -35,6 +32,7 @@ export const TabbarItem: FunctionComponent> = ( right, // @ts-ignore index, + onDoubleClick, ...rest } = { ...defaultProps, @@ -42,14 +40,6 @@ export const TabbarItem: FunctionComponent> = ( } 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, { @@ -59,8 +49,11 @@ export const TabbarItem: FunctionComponent> = ( className ) + const badgeValue = + value && typeof value === 'function' ? value(active) : value + const badgeProps = { - value, + value: badgeValue, dot, max, top, @@ -69,7 +62,13 @@ export const TabbarItem: FunctionComponent> = ( } const renderTitleText = () => { - return title &&
{title}
+ return ( + title && ( +
+ {typeof title === 'function' ? title(active) : title} +
+ ) + ) } const renderTitle = () => { @@ -79,21 +78,14 @@ export const TabbarItem: FunctionComponent> = ( const renderIconAndTitle = () => { return ( <> - {icon} + + {icon && typeof icon === 'function' ? icon(active) : icon} + {renderTitleText()} ) } - const renderIconAndActiveIcon = () => { - return ( - <> - {active ? activeIcon : icon} - {active && renderTitleText()} - - ) - } - return (
> = ( color: active ? ctx?.activeColor : ctx?.inactiveColor, ...style, }} - onClick={() => ctx?.handleClick(index)} + onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} {...rest} > - {icon && !activeIcon && renderIconAndTitle()} + {icon && renderIconAndTitle()} {!icon && renderTitle()} - {icon && activeIcon && renderIconAndActiveIcon()}
) } diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md index a9cdf02f2f..7f194bebc2 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md @@ -138,7 +138,14 @@ plugins: [ - 注意：** 该组件不符合移动端规范，已被废弃。请使用 SideBar ** [//]: # '#### Tabbar' + +- 增加Demo：首坑为 logo 的当前流行处理方式； +- 增加Demo：支持营销态的处理方式； + [//]: # '#### TabbarItem' + +- 为 `icon` 和 `title` 增加新的类型，支持 `function` 根据当前是否 `active` 状态展示不同的 icon；保留原类型，仅切换 `icon` 颜色。 + [//]: # '#### Tabs' [//]: # '#### Tabs.Tabpane' diff --git a/src/types/spec/tabbar/base.ts b/src/types/spec/tabbar/base.ts index 86c1db9c1d..041c84ed37 100644 --- a/src/types/spec/tabbar/base.ts +++ b/src/types/spec/tabbar/base.ts @@ -12,12 +12,12 @@ export interface BaseTabbar extends BaseProps { } export interface BaseTabbarItem extends BaseProps { - title: ReactNode - icon: ReactNode - activeIcon: ReactNode - value: ReactNode + title: ReactNode | ((active: boolean) => ReactNode) + icon: ReactNode | ((active: boolean) => ReactNode) + value: ReactNode | ((active: boolean) => ReactNode) dot: boolean max: number top: string right: string + onDoubleClick: () => void } From be7962639177231a6e3c82bd9e07901cdad30a0e Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 25 Mar 2025 18:30:16 +0800 Subject: [PATCH 06/15] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9doc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demo.taro.tsx | 10 +++++----- src/packages/tabbar/demo.tsx | 10 +++++----- src/packages/tabbar/doc.en-US.md | 15 ++++++++------- src/packages/tabbar/doc.md | 15 ++++++++------- src/packages/tabbar/doc.taro.md | 15 ++++++++------- src/packages/tabbar/doc.zh-TW.md | 17 +++++++++-------- .../doc/docs/react/migrate-from-v2.md | 3 ++- 7 files changed, 45 insertions(+), 40 deletions(-) diff --git a/src/packages/tabbar/demo.taro.tsx b/src/packages/tabbar/demo.taro.tsx index 4715debffd..0a56203f91 100644 --- a/src/packages/tabbar/demo.taro.tsx +++ b/src/packages/tabbar/demo.taro.tsx @@ -28,18 +28,18 @@ const TabbarDemo = () => { }, 'zh-TW': { ce5c5446: '基礎用法', - c38a08ef: '首坑品牌+营销态', - ce5c5448: '只配图标', + c38a08ef: '首坑品牌+營銷態', + ce5c5448: '只配圖標', ce5c5440: '只配文字', b840c88f: '徽標提示', - customColor: '自定義顏色+数量', + customColor: '自定義顏色+數量', cfbdc781: '固定底部', c9e6df49: '受控', - c9e6df48: '模拟双击支持回调', + c9e6df48: '模擬雙擊支持回調', }, 'en-US': { ce5c5446: 'Basic Usage', - c38a08ef: '首坑品牌+营销态', + c38a08ef: 'Custom', ce5c5448: 'Only Icon', ce5c5440: 'Only Text', b840c88f: 'Logo Tips', diff --git a/src/packages/tabbar/demo.tsx b/src/packages/tabbar/demo.tsx index a0ff29aa18..f4d05b5517 100644 --- a/src/packages/tabbar/demo.tsx +++ b/src/packages/tabbar/demo.tsx @@ -25,18 +25,18 @@ const TabbarDemo = () => { }, 'zh-TW': { ce5c5446: '基礎用法', - c38a08ef: '首坑品牌+营销态', - ce5c5448: '只配图标', + c38a08ef: '首坑品牌+營銷態', + ce5c5448: '只配圖標', ce5c5440: '只配文字', b840c88f: '徽標提示', - customColor: '自定義顏色+数量', + customColor: '自定義顏色+數量', cfbdc781: '固定底部', c9e6df49: '受控', - c9e6df48: '模拟双击支持回调', + c9e6df48: '模擬雙擊支持回調', }, 'en-US': { ce5c5446: 'Basic Usage', - c38a08ef: '首坑品牌+营销态', + c38a08ef: 'Custom', ce5c5448: 'Only Icon', ce5c5440: 'Only Text', b840c88f: 'Logo Tips', diff --git a/src/packages/tabbar/doc.en-US.md b/src/packages/tabbar/doc.en-US.md index 53446ee9d8..bda65367fd 100644 --- a/src/packages/tabbar/doc.en-US.md +++ b/src/packages/tabbar/doc.en-US.md @@ -18,7 +18,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### Custom DefaultValue +### Logo Tips :::demo @@ -34,7 +34,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### No Icon +### Only Text :::demo @@ -42,7 +42,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### Logo Tips +### Custom :::demo @@ -50,7 +50,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### Dot +### Custom Color and Size :::demo @@ -58,7 +58,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### Custom Color +### With Controlled :::demo @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### Tabbar With Custom Number Of Icons +### onDoubledClick Event :::demo @@ -104,11 +104,12 @@ import { Tabbar } from '@nutui/nutui-react' | --- | --- | --- | --- | | title | the title of the tab | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | icon | Custom icon | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | -| value | value to show in Badge, eg number、charctor and custom content | `ReactNode` | `-` | +| value | value to show in Badge, eg number、charctor and custom content | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | max | when value is number, it's the max size | `number` | `99` | | dot | Whether Badge is dotted | `boolean` | `false` | | top | Up and down offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | | right | Left and right offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | +| onDoubleClick | When item is focused, you can add your callback when you click it again | `() => void` | `-` | ## Theming diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index 2d7f07d83a..40b1240328 100644 --- a/src/packages/tabbar/doc.md +++ b/src/packages/tabbar/doc.md @@ -18,7 +18,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 自定义选中 +### 徽标提示 :::demo @@ -34,7 +34,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 无图标 +### 只配文字 :::demo @@ -42,7 +42,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 徽标提示 +### 首坑品牌+营销态 :::demo @@ -50,7 +50,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 红点 +### 自定义颜色+数量 :::demo @@ -58,7 +58,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 自定义颜色 +### 受控 :::demo @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 可自定义icon个数的tabbar +### 模拟双击支持回调 :::demo @@ -104,11 +104,12 @@ import { Tabbar } from '@nutui/nutui-react' | --- | --- | --- | --- | | title | 标签页的标题 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | icon | 自定义图标 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | -| value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | +| value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 徽标是否为小点 | `boolean` | `false` | | top | 徽标的上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | | right | 徽标的左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | +| onDoubleClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | ## 主题定制 diff --git a/src/packages/tabbar/doc.taro.md b/src/packages/tabbar/doc.taro.md index 880545df63..114c881dd0 100644 --- a/src/packages/tabbar/doc.taro.md +++ b/src/packages/tabbar/doc.taro.md @@ -18,7 +18,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 自定义选中 +### 徽标提示 :::demo @@ -34,7 +34,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 无图标 +### 只配文字 :::demo @@ -42,7 +42,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 徽标提示 +### 首坑品牌+营销态 :::demo @@ -50,7 +50,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 红点 +### 自定义颜色+数量 :::demo @@ -58,7 +58,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 自定义颜色 +### 受控 :::demo @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 可自定义icon个数的tabbar +### 模拟双击支持回调 :::demo @@ -104,11 +104,12 @@ import { Tabbar } from '@nutui/nutui-react-taro' | --- | --- | --- | --- | | title | 标签页的标题 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | icon | 自定义图标 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | -| value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | +| value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 徽标是否为小点 | `boolean` | `false` | | top | 徽标的上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | | right | 徽标的左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | +| onDoubleClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | ## 主题定制 diff --git a/src/packages/tabbar/doc.zh-TW.md b/src/packages/tabbar/doc.zh-TW.md index 36e7f5eda0..4fa70a8278 100644 --- a/src/packages/tabbar/doc.zh-TW.md +++ b/src/packages/tabbar/doc.zh-TW.md @@ -18,7 +18,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 自定義選中 +### 徽標提示 :::demo @@ -34,7 +34,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 無圖標 +### 只配文字 :::demo @@ -42,7 +42,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 徽標提示 +### 首坑品牌+營銷態 :::demo @@ -50,7 +50,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 紅點 +### 自定義顏色+數量 :::demo @@ -58,7 +58,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 自定義顏色 +### 受控 :::demo @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 可自定義icon個數的tabbar +### 模擬雙擊支持回調 :::demo @@ -104,13 +104,14 @@ import { Tabbar } from '@nutui/nutui-react' | --- | --- | --- | --- | | title | 標簽頁的標題 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | icon | 自定義圖標 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | -| value | 徽標中顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` | +| value | 徽標中顯示的內容，支持數字、字符和自定義內容 | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | | max | value 為數值時，最大值 | `number` | `99` | | dot | 徽標是否為小點 | `boolean` | `false` | | top | 徽標的上下偏移量，支持單位設置，可設置為：5 等 | `number` | `0` | | right | 徽標的左右偏移量，支持單位設置，可設置為：5 等 | `number` | `0` | +| onDoubleClick | 用於處理當元素處於焦點時，再次點擊時可增加自定義事件。 | `() => void` | `-` | -## 主題定制 +## 主題定製 ### 樣式變量 diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md index 7f194bebc2..c7b45083d3 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md @@ -144,7 +144,8 @@ plugins: [ [//]: # '#### TabbarItem' -- 为 `icon` 和 `title` 增加新的类型，支持 `function` 根据当前是否 `active` 状态展示不同的 icon；保留原类型，仅切换 `icon` 颜色。 +- 为 `icon`、`title` 和 `value` 增加新的类型，支持 `function` 根据当前是否 `active` 状态展示不同的 icon/title/value。 +- 增加 `onDoubleClick` 事件，用于处理当元素处于焦点时，再次点击时可增加自定义事件。 [//]: # '#### Tabs' [//]: # '#### Tabs.Tabpane' From 016df072f520698886543141af60f78132ff7db6 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 25 Mar 2025 20:53:32 +0800 Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A03=E4=B8=AA?= =?UTF-8?q?=E5=92=8C2=E4=B8=AA=E7=9A=84=E6=83=85=E5=86=B5,=E5=8F=8A?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demos/h5/demo6.tsx | 31 +++++++++++----- src/packages/tabbar/demos/taro/demo6.tsx | 31 +++++++++++----- src/packages/tabbar/tabbar.scss | 24 +++++++++++++ src/packages/tabbar/tabbar.taro.tsx | 35 ++++++++++++------ src/packages/tabbar/tabbar.tsx | 40 ++++++++++++++------- src/packages/tabbaritem/tabbaritem.scss | 5 --- src/packages/tabbaritem/tabbaritem.taro.tsx | 30 +++++++++++++--- src/packages/tabbaritem/tabbaritem.tsx | 30 +++++++++++++--- src/types/spec/tabbar/base.ts | 4 ++- 9 files changed, 177 insertions(+), 53 deletions(-) diff --git a/src/packages/tabbar/demos/h5/demo6.tsx b/src/packages/tabbar/demos/h5/demo6.tsx index e650c04061..444d743e0b 100644 --- a/src/packages/tabbar/demos/h5/demo6.tsx +++ b/src/packages/tabbar/demos/h5/demo6.tsx @@ -1,14 +1,29 @@ import React from 'react' -import { Tabbar } from '@nutui/nutui-react' -import { Cart, Hi, Home, User } from '@nutui/icons-react' +import { Tabbar, Space } from '@nutui/nutui-react' +import { Cart, Home, User } from '@nutui/icons-react' const Demo = () => ( - - } /> - } /> - } /> - } /> - + + + } /> + } /> + } /> + + + + } /> + } /> + + + + } dot /> + } value={22} /> + + ) export default Demo diff --git a/src/packages/tabbar/demos/taro/demo6.tsx b/src/packages/tabbar/demos/taro/demo6.tsx index efcc3921d4..ecf57d0c8b 100644 --- a/src/packages/tabbar/demos/taro/demo6.tsx +++ b/src/packages/tabbar/demos/taro/demo6.tsx @@ -1,14 +1,29 @@ import React from 'react' -import { Tabbar } from '@nutui/nutui-react-taro' -import { Cart, Hi, Home, User } from '@nutui/icons-react-taro' +import { Tabbar, Space } from '@nutui/nutui-react-taro' +import { Cart, Home, User } from '@nutui/icons-react-taro' const Demo7 = () => ( - - } /> - } /> - } /> - } /> - + + + } /> + } /> + } /> + + + + } /> + } /> + + + + } dot /> + } value={22} /> + + ) export default Demo7 diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index 0f6ccf769b..c43c6d7bf9 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -20,6 +20,30 @@ flex-direction: row; justify-content: center; align-items: center; + + &-3 { + padding: 0 16px; + } + + &-2 { + padding: 0 32px; + } + + &-horizontal { + padding: 12px 0 14px; + .nut-tabbar-item { + flex-direction: row; + justify-content: center; + .nut-icon { + width: 20px; + height: 20px; + } + .nut-tabbar-item-text { + margin: 0 4px 0 6px; + font-size: 14px; + } + } + } } &:last-child { diff --git a/src/packages/tabbar/tabbar.taro.tsx b/src/packages/tabbar/tabbar.taro.tsx index 9bbfb5171f..1e9b4f46c9 100644 --- a/src/packages/tabbar/tabbar.taro.tsx +++ b/src/packages/tabbar/tabbar.taro.tsx @@ -13,8 +13,9 @@ const defaultProps = { fixed: false, inactiveColor: '', activeColor: '', + direction: 'vertical', safeArea: false, - onSwitch: (value) => {}, + onSwitch: () => {}, } as TaroTabbarProps export const Tabbar: FunctionComponent> & { @@ -27,14 +28,12 @@ export const Tabbar: FunctionComponent> & { fixed, activeColor, inactiveColor, + direction, safeArea, className, style, onSwitch, - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } const classPrefix = 'nut-tabbar' const [selectIndex, setSelectIndex] = usePropsValue({ @@ -44,6 +43,17 @@ export const Tabbar: FunctionComponent> & { onChange: onSwitch, }) + const sizeCls = () => { + const size = React.Children.count(children) + return size > 3 + ? '' + : classNames({ + [`${classPrefix}-wrap-3`]: size === 3, + [`${classPrefix}-wrap-2`]: size === 2, + [`${classPrefix}-wrap-${direction}`]: size === 2 && direction, + }) + } + return ( > & { )} style={style} > - + > & { handleClick: setSelectIndex, }} > - {React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) return null - return React.cloneElement(child, { ...child.props, index }) - })} + {React.Children.map(children, (child, index) => + React.isValidElement(child) + ? React.cloneElement(child, { + ...child.props, + index, + direction: React.Children.count(children) === 2 && direction, + }) + : null + )} {(fixed || safeArea) && } diff --git a/src/packages/tabbar/tabbar.tsx b/src/packages/tabbar/tabbar.tsx index 5be1dddebc..ec602aa5da 100644 --- a/src/packages/tabbar/tabbar.tsx +++ b/src/packages/tabbar/tabbar.tsx @@ -12,8 +12,9 @@ const defaultProps = { fixed: false, inactiveColor: '', activeColor: '', + direction: 'vertical', safeArea: false, - onSwitch: (value) => {}, + onSwitch: () => {}, } as WebTabbarProps export const Tabbar: FunctionComponent> & { @@ -26,14 +27,13 @@ export const Tabbar: FunctionComponent> & { fixed, activeColor, inactiveColor, + direction, safeArea, className, style, onSwitch, - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } + const classPrefix = 'nut-tabbar' const [selectIndex, setSelectIndex] = usePropsValue({ @@ -43,18 +43,27 @@ export const Tabbar: FunctionComponent> & { onChange: onSwitch, }) + const sizeCls = () => { + const size = React.Children.count(children) + return size > 3 + ? '' + : classNames({ + [`${classPrefix}-wrap-3`]: size === 3, + [`${classPrefix}-wrap-2`]: size === 2, + [`${classPrefix}-wrap-${direction}`]: size === 2 && direction, + }) + } + return (
-
+
> & { handleClick: setSelectIndex, }} > - {React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) return null - return React.cloneElement(child, { ...child.props, index }) - })} + {React.Children.map(children, (child, index) => + React.isValidElement(child) + ? React.cloneElement(child, { + ...child.props, + index, + direction: React.Children.count(children) === 2 && direction, + }) + : null + )}
{(fixed || safeArea) &&
} diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 6faf38120c..ef973a9f2c 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -42,11 +42,6 @@ &-large { justify-content: center; padding: 0; - // .nut-icon { - // // width: 38px; - // // height: 38px; - // // font-size: 38px; - // } .nut-tabbar-item-text { font-size: $tabbar-text-large-font-size; diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 2fb515abc5..bf0ca22bf3 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -15,6 +15,7 @@ const defaultProps = { max: 99, top: '0', right: '0', + direction: 'vertical', } as TaroTabbarItemProps export const TabbarItem: FunctionComponent> = ( @@ -33,6 +34,7 @@ export const TabbarItem: FunctionComponent> = ( right, // @ts-ignore index, + direction, onDoubleClick, ...rest } = { @@ -78,13 +80,17 @@ export const TabbarItem: FunctionComponent> = ( } const renderTitle = () => { - return {renderTitleText()} + return ( + + {renderTitleText()} + + ) } const renderIconAndTitle = () => { return ( <> - + {icon && typeof icon === 'function' ? icon(active) : icon} {renderTitleText()} @@ -92,6 +98,16 @@ export const TabbarItem: FunctionComponent> = ( ) } + const renderDualItem = () => { + return dot ? null : ( + <> + {icon && typeof icon === 'function' ? icon(active) : icon} + {renderTitleText()} + + + ) + } + return ( > = ( onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} {...rest} > - {icon && renderIconAndTitle()} - {!icon && renderTitle()} + {direction === 'horizontal' && !dot ? ( + renderDualItem() + ) : ( + <> + {icon && renderIconAndTitle()} + {!icon && renderTitle()} + + )} ) } diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 65a3d25060..7defa830d7 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -14,6 +14,7 @@ const defaultProps = { max: 99, top: '0', right: '0', + direction: 'vertical', } as WebTabbarItemProps export const TabbarItem: FunctionComponent> = ( @@ -32,6 +33,7 @@ export const TabbarItem: FunctionComponent> = ( right, // @ts-ignore index, + direction, onDoubleClick, ...rest } = { @@ -72,13 +74,17 @@ export const TabbarItem: FunctionComponent> = ( } const renderTitle = () => { - return {renderTitleText()} + return ( + + {renderTitleText()} + + ) } const renderIconAndTitle = () => { return ( <> - + {icon && typeof icon === 'function' ? icon(active) : icon} {renderTitleText()} @@ -86,6 +92,16 @@ export const TabbarItem: FunctionComponent> = ( ) } + const renderDualItem = () => { + return dot ? null : ( + <> + {icon && typeof icon === 'function' ? icon(active) : icon} + {renderTitleText()} + + + ) + } + return (
> = ( onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} {...rest} > - {icon && renderIconAndTitle()} - {!icon && renderTitle()} + {direction === 'horizontal' && !dot ? ( + renderDualItem() + ) : ( + <> + {icon && renderIconAndTitle()} + {!icon && renderTitle()} + + )}
) } diff --git a/src/types/spec/tabbar/base.ts b/src/types/spec/tabbar/base.ts index 041c84ed37..611166c213 100644 --- a/src/types/spec/tabbar/base.ts +++ b/src/types/spec/tabbar/base.ts @@ -1,5 +1,5 @@ import { ReactNode } from 'react' -import { BaseProps } from '../../base/props' +import { BaseProps, Direction } from '@/types' export interface BaseTabbar extends BaseProps { defaultValue: number @@ -7,6 +7,7 @@ export interface BaseTabbar extends BaseProps { fixed: boolean inactiveColor: string activeColor: string + direction: Direction safeArea: boolean onSwitch: (value: number) => void } @@ -19,5 +20,6 @@ export interface BaseTabbarItem extends BaseProps { max: number top: string right: string + direction: Direction onDoubleClick: () => void } From 2f67c0ba9359a045e3ac3ecd8398857bb1be1743 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 25 Mar 2025 20:57:30 +0800 Subject: [PATCH 08/15] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8=20safearea=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/tabbar.scss | 7 ------- src/packages/tabbar/tabbar.taro.tsx | 3 ++- src/packages/tabbar/tabbar.tsx | 3 ++- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index c43c6d7bf9..3d9e493c33 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -55,13 +55,6 @@ bottom: 0px; left: 0px; } - - &-safe-area { - display: block; - width: 100%; - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); - } } [dir='rtl'] .nut-tabbar, diff --git a/src/packages/tabbar/tabbar.taro.tsx b/src/packages/tabbar/tabbar.taro.tsx index 1e9b4f46c9..07a230639e 100644 --- a/src/packages/tabbar/tabbar.taro.tsx +++ b/src/packages/tabbar/tabbar.taro.tsx @@ -6,6 +6,7 @@ import { usePropsValue } from '@/hooks/use-props-value' import TabbarItem from '../tabbaritem/index.taro' import TabbarContext from './context' import { TaroTabbarProps } from '@/types' +import SafeArea from '@/packages/safearea/index.taro' const defaultProps = { ...ComponentDefaults, @@ -85,7 +86,7 @@ export const Tabbar: FunctionComponent> & { )} - {(fixed || safeArea) && } + {(fixed || safeArea) && } ) } diff --git a/src/packages/tabbar/tabbar.tsx b/src/packages/tabbar/tabbar.tsx index ec602aa5da..47a86d627b 100644 --- a/src/packages/tabbar/tabbar.tsx +++ b/src/packages/tabbar/tabbar.tsx @@ -5,6 +5,7 @@ import { usePropsValue } from '@/hooks/use-props-value' import TabbarItem from '../tabbaritem' import TabbarContext from './context' import { WebTabbarProps } from '@/types' +import SafeArea from '@/packages/safearea/index' const defaultProps = { ...ComponentDefaults, @@ -83,7 +84,7 @@ export const Tabbar: FunctionComponent> & { )}
- {(fixed || safeArea) &&
} + {(fixed || safeArea) && }
) } From 008d41d0ba18c6c85a8f3baa82346442a8b7c669 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 13:59:58 +0800 Subject: [PATCH 09/15] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/tabbar.spec.tsx.snap | 10 +- src/packages/tabbar/__tests__/tabbar.spec.tsx | 116 +++++++++++++----- src/packages/tabbar/tabbar.scss | 1 - src/packages/tabbar/tabbar.taro.tsx | 18 ++- src/packages/tabbar/tabbar.tsx | 18 ++- src/packages/tabbaritem/tabbaritem.taro.tsx | 18 +-- src/packages/tabbaritem/tabbaritem.tsx | 17 +-- 7 files changed, 137 insertions(+), 61 deletions(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 65bc55dd03..8b5b644b36 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,5 +1,11 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; +exports[`render item active 1`] = `"
首页
招手
,
我的
"`; -exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; +exports[`render item size 2 and direction is horizontal 1`] = `"
首页
招手
,
我的
"`; + +exports[`render item size 2 and direction is horizontal 2`] = `"
首页
招手
,
我的
"`; + +exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; + +exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; diff --git a/src/packages/tabbar/__tests__/tabbar.spec.tsx b/src/packages/tabbar/__tests__/tabbar.spec.tsx index 95518992bd..6c941f0893 100644 --- a/src/packages/tabbar/__tests__/tabbar.spec.tsx +++ b/src/packages/tabbar/__tests__/tabbar.spec.tsx @@ -1,19 +1,27 @@ import * as React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' -import { Cart, Category, Hi, Home, User } from '@nutui/icons-react' +import { + Cart, + Category, + Heart, + HeartFill, + Hi, + Home, + User, +} from '@nutui/icons-react' import { Tabbar } from '../tabbar' test('should render tabbar when default', () => { const { container } = render( <> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> ) @@ -29,13 +37,9 @@ test('should render custom color and badge when using prop', () => { const { container } = render( <> - } - value={11} - /> - } /> - } /> + } value={11} /> + } /> + } /> ) @@ -51,8 +55,8 @@ test('should render fixed element when using bottom prop', async () => { const { container } = render( <> - } /> - } /> + } /> + } /> ) @@ -64,23 +68,65 @@ test('should match active tabbar by click', async () => { <> } - value={11} + title={(active) => (active ? '首页' : '首页2')} + icon={(active) => (active ? : )} + value={(active) => (active ? '招手' : '22')} /> - } /> - } /> + } dot /> + } dot /> + } dot /> ) const tabbarItem: NodeListOf = container.querySelectorAll('.nut-tabbar-item') + const tabbarItemText: NodeListOf = container.querySelectorAll( + '.nut-tabbar-item-text' + ) + const tabbarItemBadgeValue: NodeListOf = + container.querySelectorAll('.nut-badge-sup') + const tabbarItemActiveIcon: NodeListOf = + container.querySelectorAll('.nut-icon-HeartFill') + const tabbarItemIcon: NodeListOf = + container.querySelectorAll('.nut-icon-Heart') expect(tabbarItem[0].style.color).toEqual('blue') + expect(tabbarItemText[0].innerText).toEqual('首页') + expect(tabbarItemActiveIcon.length).toEqual(1) + expect(tabbarItemIcon.length).toEqual(0) + expect(tabbarItemBadgeValue[0].innerText).toEqual('招手') + fireEvent.click(tabbarItem[1]) + waitFor(() => { + expect(tabbarItem[0].style.color).toEqual('grey') + expect(tabbarItemText[0].innerText).toEqual('首页2') + expect(tabbarItemActiveIcon.length).toEqual(0) + expect(tabbarItemIcon.length).toEqual(1) + expect(tabbarItemBadgeValue[0].innerText).toEqual('22') + expect(tabbarItem[1].style.color).toEqual('blue') + }) +}) + +test('double click', async () => { + const onDoubleClick = vi.fn() + const { container } = render( + <> + + } value={11} /> + } + onDoubleClick={onDoubleClick} + /> + } /> + + + ) + + const tabbarItem: NodeListOf = + container.querySelectorAll('.nut-tabbar-item') + fireEvent.click(tabbarItem[1]) fireEvent.click(tabbarItem[1]) - expect(tabbarItem[1].style.color).toEqual('blue') - fireEvent.click(tabbarItem[2]) - expect(tabbarItem[2].style.color).toEqual('blue') + expect(onDoubleClick).toBeCalled() }) test('should show sure emitted when click', async () => { @@ -88,13 +134,9 @@ test('should show sure emitted when click', async () => { const { container } = render( <> - } - value={11} - /> - } /> - } /> + } value={11} /> + } /> + } /> ) @@ -118,3 +160,15 @@ test('should only render title', async () => { ) expect(container.innerHTML).toMatchSnapshot() }) + +test('render item size 2 and direction is horizontal', async () => { + const { container } = render( + <> + + } value="招手" /> + } dot /> + + + ) + expect(container.innerHTML).toMatchSnapshot() +}) diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index 3d9e493c33..cf36a62965 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -30,7 +30,6 @@ } &-horizontal { - padding: 12px 0 14px; .nut-tabbar-item { flex-direction: row; justify-content: center; diff --git a/src/packages/tabbar/tabbar.taro.tsx b/src/packages/tabbar/tabbar.taro.tsx index 07a230639e..e310029453 100644 --- a/src/packages/tabbar/tabbar.taro.tsx +++ b/src/packages/tabbar/tabbar.taro.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' @@ -44,16 +44,22 @@ export const Tabbar: FunctionComponent> & { onChange: onSwitch, }) - const sizeCls = () => { + const sizeCls = useMemo(() => { const size = React.Children.count(children) return size > 3 ? '' : classNames({ [`${classPrefix}-wrap-3`]: size === 3, [`${classPrefix}-wrap-2`]: size === 2, - [`${classPrefix}-wrap-${direction}`]: size === 2 && direction, + [`${classPrefix}-wrap-${direction}`]: + size === 2 && direction !== 'vertical', }) - } + }, [children, direction]) + + const itemDirection = useMemo(() => { + const size = React.Children.count(children) + return size === 2 && direction !== 'vertical' && direction + }, [direction, children]) return ( > & { )} style={style} > - + > & { ? React.cloneElement(child, { ...child.props, index, - direction: React.Children.count(children) === 2 && direction, + direction: itemDirection, }) : null )} diff --git a/src/packages/tabbar/tabbar.tsx b/src/packages/tabbar/tabbar.tsx index 47a86d627b..3651b8a017 100644 --- a/src/packages/tabbar/tabbar.tsx +++ b/src/packages/tabbar/tabbar.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/hooks/use-props-value' @@ -44,16 +44,22 @@ export const Tabbar: FunctionComponent> & { onChange: onSwitch, }) - const sizeCls = () => { + const sizeCls = useMemo(() => { const size = React.Children.count(children) return size > 3 ? '' : classNames({ [`${classPrefix}-wrap-3`]: size === 3, [`${classPrefix}-wrap-2`]: size === 2, - [`${classPrefix}-wrap-${direction}`]: size === 2 && direction, + [`${classPrefix}-wrap-${direction}`]: + size === 2 && direction !== 'vertical', }) - } + }, [children, direction]) + + const itemDirection = useMemo(() => { + const size = React.Children.count(children) + return size === 2 && direction !== 'vertical' && direction + }, [direction, children]) return (
> & { )} style={style} > -
+
> & { ? React.cloneElement(child, { ...child.props, index, - direction: React.Children.count(children) === 2 && direction, + direction: itemDirection, }) : null )} diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index bf0ca22bf3..664ddbde4e 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useContext } from 'react' +import React, { FunctionComponent, useContext, ReactNode } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' @@ -52,11 +52,13 @@ export const TabbarItem: FunctionComponent> = ( className ) - const badgeValue = - value && typeof value === 'function' ? value(active) : value - + const renderNodeWithActive = ( + props: ReactNode | ((active: boolean) => ReactNode) + ) => { + return props && typeof props === 'function' ? props(active) : props + } const badgeProps = { - value: badgeValue, + value: renderNodeWithActive(value), dot, max, top, @@ -73,7 +75,7 @@ export const TabbarItem: FunctionComponent> = ( color: active ? ctx?.activeColor : ctx?.inactiveColor, }} > - {typeof title === 'function' ? title(active) : title} + {renderNodeWithActive(title)} ) ) @@ -91,7 +93,7 @@ export const TabbarItem: FunctionComponent> = ( return ( <> - {icon && typeof icon === 'function' ? icon(active) : icon} + {renderNodeWithActive(icon)} {renderTitleText()} @@ -101,7 +103,7 @@ export const TabbarItem: FunctionComponent> = ( const renderDualItem = () => { return dot ? null : ( <> - {icon && typeof icon === 'function' ? icon(active) : icon} + {renderNodeWithActive(icon)} {renderTitleText()} diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 7defa830d7..8076bdace4 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useContext } from 'react' +import React, { FunctionComponent, useContext, ReactNode } from 'react' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import Badge from '@/packages/badge/index' @@ -51,11 +51,14 @@ export const TabbarItem: FunctionComponent> = ( className ) - const badgeValue = - value && typeof value === 'function' ? value(active) : value + const renderNodeWithActive = ( + props: ReactNode | ((active: boolean) => ReactNode) + ) => { + return props && typeof props === 'function' ? props(active) : props + } const badgeProps = { - value: badgeValue, + value: renderNodeWithActive(value), dot, max, top, @@ -67,7 +70,7 @@ export const TabbarItem: FunctionComponent> = ( return ( title && (
- {typeof title === 'function' ? title(active) : title} + {renderNodeWithActive(title)}
) ) @@ -85,7 +88,7 @@ export const TabbarItem: FunctionComponent> = ( return ( <> - {icon && typeof icon === 'function' ? icon(active) : icon} + {renderNodeWithActive(icon)} {renderTitleText()} @@ -95,7 +98,7 @@ export const TabbarItem: FunctionComponent> = ( const renderDualItem = () => { return dot ? null : ( <> - {icon && typeof icon === 'function' ? icon(active) : icon} + {renderNodeWithActive(icon)} {renderTitleText()} From b1b4b2c16f57386a3a40797c4dbdc70fc5dab343 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 14:15:11 +0800 Subject: [PATCH 10/15] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99icon=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=97=A0=E6=B3=95=E7=BB=A7=E6=89=BF,=E7=89=B9?= =?UTF-8?q?=E4=BD=9C=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbaritem/tabbaritem.taro.tsx | 19 +++++++++++++++---- src/packages/tabbaritem/tabbaritem.tsx | 12 ++++++++---- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 664ddbde4e..1cf4405532 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -53,9 +53,9 @@ export const TabbarItem: FunctionComponent> = ( ) const renderNodeWithActive = ( - props: ReactNode | ((active: boolean) => ReactNode) + node: ReactNode | ((active: boolean) => ReactNode) ) => { - return props && typeof props === 'function' ? props(active) : props + return node && typeof node === 'function' ? node(active) : node } const badgeProps = { value: renderNodeWithActive(value), @@ -89,11 +89,22 @@ export const TabbarItem: FunctionComponent> = ( ) } + const renderIcon = () => { + const distIcon = renderNodeWithActive(icon) + // 鸿蒙差异处理，需要手动给icon一个color + return React.isValidElement(distIcon) + ? React.cloneElement(distIcon, { + ...distIcon.props, + color: active ? ctx?.activeColor : ctx?.inactiveColor, + }) + : null + } + const renderIconAndTitle = () => { return ( <> - {renderNodeWithActive(icon)} + {renderIcon()} {renderTitleText()} @@ -103,7 +114,7 @@ export const TabbarItem: FunctionComponent> = ( const renderDualItem = () => { return dot ? null : ( <> - {renderNodeWithActive(icon)} + {renderIcon()} {renderTitleText()} diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 8076bdace4..0d924db487 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -52,9 +52,9 @@ export const TabbarItem: FunctionComponent> = ( ) const renderNodeWithActive = ( - props: ReactNode | ((active: boolean) => ReactNode) + node: ReactNode | ((active: boolean) => ReactNode) ) => { - return props && typeof props === 'function' ? props(active) : props + return node && typeof node === 'function' ? node(active) : node } const badgeProps = { @@ -84,11 +84,15 @@ export const TabbarItem: FunctionComponent> = ( ) } + const renderIcon = () => { + return renderNodeWithActive(icon) + } + const renderIconAndTitle = () => { return ( <> - {renderNodeWithActive(icon)} + {renderIcon()} {renderTitleText()} @@ -98,7 +102,7 @@ export const TabbarItem: FunctionComponent> = ( const renderDualItem = () => { return dot ? null : ( <> - {renderNodeWithActive(icon)} + {renderIcon()} {renderTitleText()} From b422416da16fe032eb3bc924ceed4491efd860c7 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 15:15:16 +0800 Subject: [PATCH 11/15] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E5=8F=AF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demos/taro/demo5.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/packages/tabbar/demos/taro/demo5.tsx b/src/packages/tabbar/demos/taro/demo5.tsx index f688d682ee..e03a0f4383 100644 --- a/src/packages/tabbar/demos/taro/demo5.tsx +++ b/src/packages/tabbar/demos/taro/demo5.tsx @@ -1,6 +1,8 @@ import React from 'react' import { Tabbar, Image } from '@nutui/nutui-react-taro' import { Cart, Hi, Home, User, Message } from '@nutui/icons-react-taro' +import { harmony } from '@/utils/platform-taro' +import pxTransform from '@/utils/px-transform' const Demo2 = () => { return ( @@ -9,7 +11,11 @@ const Demo2 = () => { title={(active: boolean) => (active ? '' : '首页')} icon={(active: boolean) => active ? ( - + ) : ( ) @@ -21,7 +27,11 @@ const Demo2 = () => { active ? ( ) : ( - + ) } title={(active: boolean) => (active ? '逛' : '')} From 19a978f322949a71adb8b92afc0b9a757dd52aa6 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 15:49:13 +0800 Subject: [PATCH 12/15] =?UTF-8?q?fix:=20=E5=88=A0=E6=8E=89=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demo.taro.tsx | 4 +++- src/packages/tabbar/demo.tsx | 2 +- src/packages/tabbar/tabbar.scss | 12 ------------ src/styles/variables.scss | 7 ++----- 4 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/packages/tabbar/demo.taro.tsx b/src/packages/tabbar/demo.taro.tsx index 0a56203f91..2fe2d46d74 100644 --- a/src/packages/tabbar/demo.taro.tsx +++ b/src/packages/tabbar/demo.taro.tsx @@ -52,7 +52,9 @@ const TabbarDemo = () => { return ( <>
- + {translated.ce5c5446} {translated.b840c88f} diff --git a/src/packages/tabbar/demo.tsx b/src/packages/tabbar/demo.tsx index f4d05b5517..71fd798948 100644 --- a/src/packages/tabbar/demo.tsx +++ b/src/packages/tabbar/demo.tsx @@ -49,7 +49,7 @@ const TabbarDemo = () => { return ( <> -
+

{translated.ce5c5446}

{translated.b840c88f}

diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index cf36a62965..8847fa1b9f 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -6,20 +6,12 @@ border-bottom: $tabbar-border-bottom; border-top: $tabbar-border-top; width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-sizing: border-box; background: $color-background-overlay; &-wrap { width: 100%; height: $tabbar-height; display: flex; - flex-direction: row; - justify-content: center; - align-items: center; &-3 { padding: 0 16px; @@ -45,10 +37,6 @@ } } - &:last-child { - border-right: 0; - } - &-fixed { position: fixed; bottom: 0px; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 476fb784ec..79ad6da470 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1141,11 +1141,8 @@ $tabbar-inactive-color: var( --nutui-tabbar-inactive-color, $color-title ) !default; -$tabbar-border-top: var(--nutui-tabbar-border-top, 1px solid #eee) !default; -$tabbar-border-bottom: var( - --nutui-tabbar-border-bottom, - 1px solid #eee -) !default; +$tabbar-border-top: var(--nutui-tabbar-border-top, 0) !default; +$tabbar-border-bottom: var(--nutui-tabbar-border-bottom, 0) !default; $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default; $tabbar-text-font-size: var( --nutui-tabbar-text-font-size, From bcdad5b38cc555d1ab8ff01169f3306275bd3e58 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 20:16:41 +0800 Subject: [PATCH 13/15] =?UTF-8?q?fix:=20v15=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tabbar/demos/h5/demo5.tsx | 2 +- src/packages/tabbar/tabbar.scss | 7 ++++++- src/packages/tabbaritem/tabbaritem.scss | 2 -- src/packages/tabbaritem/tabbaritem.taro.tsx | 2 +- src/packages/tabbaritem/tabbaritem.tsx | 2 +- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/packages/tabbar/demos/h5/demo5.tsx b/src/packages/tabbar/demos/h5/demo5.tsx index 41cf9d6208..310862217b 100644 --- a/src/packages/tabbar/demos/h5/demo5.tsx +++ b/src/packages/tabbar/demos/h5/demo5.tsx @@ -21,7 +21,7 @@ const Demo = () => { active ? ( ) : ( - + ) } title={(active: boolean) => (active ? '逛' : '')} diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index 8847fa1b9f..aed7942448 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -9,7 +9,6 @@ background: $color-background-overlay; &-wrap { - width: 100%; height: $tabbar-height; display: flex; @@ -22,6 +21,7 @@ } &-horizontal { + align-items: center; .nut-tabbar-item { flex-direction: row; justify-content: center; @@ -33,6 +33,11 @@ margin: 0 4px 0 6px; font-size: 14px; } + .nut-badge-sup { + &::after { + border: 0; + } + } } } } diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index ef973a9f2c..ccb308ffa5 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -6,8 +6,6 @@ align-items: center; flex: 1; padding: 6px 0 2px; - text-align: center; - text-decoration: none; color: $tabbar-inactive-color; height: 100%; diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 1cf4405532..7d1f7c760c 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -103,7 +103,7 @@ export const TabbarItem: FunctionComponent> = ( const renderIconAndTitle = () => { return ( <> - + {renderIcon()} {renderTitleText()} diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 0d924db487..85a5c1a5fa 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -91,7 +91,7 @@ export const TabbarItem: FunctionComponent> = ( const renderIconAndTitle = () => { return ( <> - + {renderIcon()} {renderTitleText()} From 66acc7806a3a7408c3e4f16088c6b5826ace4901 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 26 Mar 2025 20:24:48 +0800 Subject: [PATCH 14/15] test: fixed --- .../tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 8b5b644b36..a94bfdb4a4 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,10 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`render item active 1`] = `"
首页
招手
,
我的
"`; - -exports[`render item size 2 and direction is horizontal 1`] = `"
首页
招手
,
我的
"`; - -exports[`render item size 2 and direction is horizontal 2`] = `"
首页
招手
,
我的
"`; +exports[`render item size 2 and direction is horizontal 1`] = `"
首页
招手
,
我的
"`; exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; From 676f7baa622ca335bed39204be18129b175fa2cf Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 28 Mar 2025 12:21:35 +0800 Subject: [PATCH 15/15] fix: fix cr --- src/packages/tabbar/__tests__/tabbar.spec.tsx | 6 +++--- src/packages/tabbar/demos/h5/demo8.tsx | 4 ++-- src/packages/tabbar/demos/taro/demo8.tsx | 4 ++-- src/packages/tabbar/doc.en-US.md | 4 ++-- src/packages/tabbar/doc.md | 4 ++-- src/packages/tabbar/doc.taro.md | 4 ++-- src/packages/tabbar/doc.zh-TW.md | 4 ++-- src/packages/tabbaritem/tabbaritem.taro.tsx | 4 ++-- src/packages/tabbaritem/tabbaritem.tsx | 4 ++-- .../sites-react/doc/docs/react/migrate-from-v2.md | 9 +++------ .../sites-react/doc/docs/taro/migrate-from-v2.md | 15 ++++++++------- src/types/spec/tabbar/base.ts | 2 +- 12 files changed, 31 insertions(+), 33 deletions(-) diff --git a/src/packages/tabbar/__tests__/tabbar.spec.tsx b/src/packages/tabbar/__tests__/tabbar.spec.tsx index 6c941f0893..d7590220b1 100644 --- a/src/packages/tabbar/__tests__/tabbar.spec.tsx +++ b/src/packages/tabbar/__tests__/tabbar.spec.tsx @@ -107,7 +107,7 @@ test('should match active tabbar by click', async () => { }) test('double click', async () => { - const onDoubleClick = vi.fn() + const onActiveClick = vi.fn() const { container } = render( <> @@ -115,7 +115,7 @@ test('double click', async () => { } - onDoubleClick={onDoubleClick} + onActiveClick={onActiveClick} /> } /> @@ -126,7 +126,7 @@ test('double click', async () => { container.querySelectorAll('.nut-tabbar-item') fireEvent.click(tabbarItem[1]) fireEvent.click(tabbarItem[1]) - expect(onDoubleClick).toBeCalled() + expect(onActiveClick).toBeCalled() }) test('should show sure emitted when click', async () => { diff --git a/src/packages/tabbar/demos/h5/demo8.tsx b/src/packages/tabbar/demos/h5/demo8.tsx index 2daa892906..c85b1dbc58 100644 --- a/src/packages/tabbar/demos/h5/demo8.tsx +++ b/src/packages/tabbar/demos/h5/demo8.tsx @@ -11,9 +11,9 @@ const Demo = () => ( icon={(active: boolean) => (active ? : )} /> } - onDoubleClick={() => console.log('可以在这里写想要的事件')} + onActiveClick={() => console.log('可以在这里写想要的事件')} /> } /> diff --git a/src/packages/tabbar/demos/taro/demo8.tsx b/src/packages/tabbar/demos/taro/demo8.tsx index 7130ab1d68..ff2b4b8627 100644 --- a/src/packages/tabbar/demos/taro/demo8.tsx +++ b/src/packages/tabbar/demos/taro/demo8.tsx @@ -11,9 +11,9 @@ const Demo = () => ( icon={(active: boolean) => (active ? : )} /> } - onDoubleClick={() => console.log('可以在这里写想要的事件')} + onActiveClick={() => console.log('可以在这里写想要的事件')} /> } /> diff --git a/src/packages/tabbar/doc.en-US.md b/src/packages/tabbar/doc.en-US.md index bda65367fd..b2647d79c3 100644 --- a/src/packages/tabbar/doc.en-US.md +++ b/src/packages/tabbar/doc.en-US.md @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### onDoubledClick Event +### onActiveClick Event :::demo @@ -109,7 +109,7 @@ import { Tabbar } from '@nutui/nutui-react' | dot | Whether Badge is dotted | `boolean` | `false` | | top | Up and down offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | | right | Left and right offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | -| onDoubleClick | When item is focused, you can add your callback when you click it again | `() => void` | `-` | +| onActiveClick | When item is focused, you can add your callback when you click it again | `() => void` | `-` | ## Theming diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index 40b1240328..f4686b8b63 100644 --- a/src/packages/tabbar/doc.md +++ b/src/packages/tabbar/doc.md @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 模拟双击支持回调 +### 焦点时点击（模拟双击）支持回调 :::demo @@ -109,7 +109,7 @@ import { Tabbar } from '@nutui/nutui-react' | dot | 徽标是否为小点 | `boolean` | `false` | | top | 徽标的上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | | right | 徽标的左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | -| onDoubleClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | +| onActiveClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | ## 主题定制 diff --git a/src/packages/tabbar/doc.taro.md b/src/packages/tabbar/doc.taro.md index 114c881dd0..9ec6ca32da 100644 --- a/src/packages/tabbar/doc.taro.md +++ b/src/packages/tabbar/doc.taro.md @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' ::: -### 模拟双击支持回调 +### 焦点时点击（模拟双击）支持回调 :::demo @@ -109,7 +109,7 @@ import { Tabbar } from '@nutui/nutui-react-taro' | dot | 徽标是否为小点 | `boolean` | `false` | | top | 徽标的上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | | right | 徽标的左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` | -| onDoubleClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | +| onActiveClick | 用于处理当元素处于焦点时，再次点击时可增加自定义事件。 | `() => void` | `-` | ## 主题定制 diff --git a/src/packages/tabbar/doc.zh-TW.md b/src/packages/tabbar/doc.zh-TW.md index 4fa70a8278..e71c880723 100644 --- a/src/packages/tabbar/doc.zh-TW.md +++ b/src/packages/tabbar/doc.zh-TW.md @@ -66,7 +66,7 @@ import { Tabbar } from '@nutui/nutui-react' ::: -### 模擬雙擊支持回調 +### 焦點時點擊（模擬雙擊）支持回調 :::demo @@ -109,7 +109,7 @@ import { Tabbar } from '@nutui/nutui-react' | dot | 徽標是否為小點 | `boolean` | `false` | | top | 徽標的上下偏移量，支持單位設置，可設置為：5 等 | `number` | `0` | | right | 徽標的左右偏移量，支持單位設置，可設置為：5 等 | `number` | `0` | -| onDoubleClick | 用於處理當元素處於焦點時，再次點擊時可增加自定義事件。 | `() => void` | `-` | +| onActiveClick | 用於處理當元素處於焦點時，再次點擊時可增加自定義事件。 | `() => void` | `-` | ## 主題定製 diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 7d1f7c760c..a4ad41806d 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -35,7 +35,7 @@ export const TabbarItem: FunctionComponent> = ( // @ts-ignore index, direction, - onDoubleClick, + onActiveClick, ...rest } = { ...defaultProps, @@ -128,7 +128,7 @@ export const TabbarItem: FunctionComponent> = ( color: active ? ctx?.activeColor : ctx?.inactiveColor, ...style, }} - onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} + onClick={() => (active ? onActiveClick?.() : ctx?.handleClick(index))} {...rest} > {direction === 'horizontal' && !dot ? ( diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 85a5c1a5fa..c68bffce85 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -34,7 +34,7 @@ export const TabbarItem: FunctionComponent> = ( // @ts-ignore index, direction, - onDoubleClick, + onActiveClick, ...rest } = { ...defaultProps, @@ -116,7 +116,7 @@ export const TabbarItem: FunctionComponent> = ( color: active ? ctx?.activeColor : ctx?.inactiveColor, ...style, }} - onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} + onClick={() => (active ? onActiveClick?.() : ctx?.handleClick(index))} {...rest} > {direction === 'horizontal' && !dot ? ( diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md index c7b45083d3..6ce2eca91c 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md @@ -137,15 +137,12 @@ plugins: [ - 注意：** 该组件不符合移动端规范，已被废弃。请使用 SideBar ** -[//]: # '#### Tabbar' +#### Tabbar -- 增加Demo：首坑为 logo 的当前流行处理方式； -- 增加Demo：支持营销态的处理方式； - -[//]: # '#### TabbarItem' +#### TabbarItem - 为 `icon`、`title` 和 `value` 增加新的类型，支持 `function` 根据当前是否 `active` 状态展示不同的 icon/title/value。 -- 增加 `onDoubleClick` 事件，用于处理当元素处于焦点时，再次点击时可增加自定义事件。 +- 增加 `onActiveClick` 事件，用于处理当元素处于焦点时，再次点击时可增加自定义事件。 [//]: # '#### Tabs' [//]: # '#### Tabs.Tabpane' diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md index 4d673d5814..7be61352ac 100644 --- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md @@ -137,8 +137,13 @@ plugins: [ - 注意：** 该组件不符合移动端规范，已被废弃。请使用 SideBar ** -[//]: # '#### Tabbar' -[//]: # '#### TabbarItem' +#### Tabbar + +#### TabbarItem + +- 为 `icon`、`title` 和 `value` 增加新的类型，支持 `function` 根据当前是否 `active` 状态展示不同的 icon/title/value。 +- 增加 `onActiveClick` 事件，用于处理当元素处于焦点时，再次点击时可增加自定义事件。 + [//]: # '#### Tabs' [//]: # '#### Tabs.Tabpane' @@ -162,11 +167,7 @@ plugins: [ - 移除 `async`, 可通过 `beforeChange` 替代 - 增加 `beforeChange`, 处理异步调用 - [//]: # '#### NumberKeyboard' - [//]: # '#### Picker' - [//]: # '#### Radio' - [//]: # '### Radio.Group' - [//]: # '#### Range' + [//]: # '#### NumberKeyboard' [//]: # '#### Picker' [//]: # '#### Radio' diff --git a/src/types/spec/tabbar/base.ts b/src/types/spec/tabbar/base.ts index 611166c213..7f26ab20e2 100644 --- a/src/types/spec/tabbar/base.ts +++ b/src/types/spec/tabbar/base.ts @@ -21,5 +21,5 @@ export interface BaseTabbarItem extends BaseProps { top: string right: string direction: Direction - onDoubleClick: () => void + onActiveClick: () => void }