Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Mar 28, 2025
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
42e6f34
feat: v15 样式适配
xiaoyatong Mar 21, 2025
7ccd1bf
docs: update
xiaoyatong Mar 21, 2025
74b4bae
feat: add new feature
xiaoyatong Mar 21, 2025
98addad
test: fixed
xiaoyatong Mar 25, 2025
1ea27bb
feat: 调整icon和title的类型,支持function处理,增加双击事件
xiaoyatong Mar 25, 2025
be79626
docs: 修改doc
xiaoyatong Mar 25, 2025
016df07
feat: 增加3个和2个的情况,及样式处理
xiaoyatong Mar 25, 2025
2f67c0b
fix: 使用 safearea 组件
xiaoyatong Mar 25, 2025
008d41d
perf: 优化渲染代码
xiaoyatong Mar 26, 2025
b1b4b2c
fix: 鸿蒙icon样式无法继承,特作支持
xiaoyatong Mar 26, 2025
b422416
fix: 鸿蒙基本可用
xiaoyatong Mar 26, 2025
19a978f
fix: 删掉无用代码
xiaoyatong Mar 26, 2025
bcdad5b
fix: v15 样式
xiaoyatong Mar 26, 2025
66acc78
test: fixed
xiaoyatong Mar 26, 2025
676f7ba
fix: fix cr
xiaoyatong Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/packages/tabbar/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default |
| --- | --- | --- |
| \--nutui-tabbar-height | tabbar height | `50px` |
| \--nutui-tabbar-height | tabbar height | `46px` |
| \--nutui-tabbar-active-color | active color | `$color-primary` |
| \--nutui-tabbar-inactive-color | default color | `$color-title` |
| \--nutui-tabbar-border-top | borderTop | `1px solid #eee` |
| \--nutui-tabbar-border-bottom | borderBottom | `1px solid #eee` |
| \--nutui-tabbar-box-shadow | boxShadow | `none` |
| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-xs` |
| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-xxs` |
| \--nutui-tabbar-text-large-font-size | title fontSize when icon is null | `$font-size-l` |
| \--nutui-tabbar-text-large-font-weight | title fontWeight when icon is null | `$font-weight` |
| \--nutui-tabbar-text-line-height | title lineHeight | `initial` |
| \--nutui-tabbar-text-margin-top | title marginTop | `3px` |
| \--nutui-tabbar-text-margin-top | title marginTop | `4px` |

<Contribution name="Tabbar" />
6 changes: 3 additions & 3 deletions src/packages/tabbar/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-tabbar-height | 高度 | `50px` |
| \--nutui-tabbar-height | 高度 | `46px` |
| \--nutui-tabbar-active-color | 选中颜色 | `$color-primary` |
| \--nutui-tabbar-inactive-color | 未选中颜色 | `$color-title` |
| \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` |
| \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` |
| \--nutui-tabbar-box-shadow | 阴影 | `none` |
| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` |
| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xxs` |
| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-l` |
| \--nutui-tabbar-text-large-font-weight | 无图标时标题字体粗细 | `$font-weight` |
| \--nutui-tabbar-text-line-height | 字体行高 | `initial` |
| \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` |
| \--nutui-tabbar-text-margin-top | 标题上外边距 | `4px` |

<Contribution name="Tabbar" />
6 changes: 3 additions & 3 deletions src/packages/tabbar/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-tabbar-height | 高度 | `50px` |
| \--nutui-tabbar-height | 高度 | `46px` |
| \--nutui-tabbar-active-color | 选中颜色 | `$color-primary` |
| \--nutui-tabbar-inactive-color | 未选中颜色 | `$color-title` |
| \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` |
| \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` |
| \--nutui-tabbar-box-shadow | 阴影 | `none` |
| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` |
| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xxs` |
| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-l` |
| \--nutui-tabbar-text-large-font-weight | 无图标时标题字体粗细 | `$font-weight` |
| \--nutui-tabbar-text-line-height | 字体行高 | `initial` |
| \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` |
| \--nutui-tabbar-text-margin-top | 标题上外边距 | `4px` |

<Contribution name="Tabbar" />
6 changes: 3 additions & 3 deletions src/packages/tabbar/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@ import { Tabbar } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-tabbar-height | 高度 | `50px` |
| \--nutui-tabbar-height | 高度 | `46px` |
| \--nutui-tabbar-active-color | 選中顏色 | `$color-primary` |
| \--nutui-tabbar-inactive-color | 未選中顏色 | `$color-title` |
| \--nutui-tabbar-border-top | 上邊框 | `1px solid #eee` |
| \--nutui-tabbar-border-bottom | 下邊框 | `1px solid #eee` |
| \--nutui-tabbar-box-shadow | 陰影 | `none` |
| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-xs` |
| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-xxs` |
| \--nutui-tabbar-text-large-font-size | 無圖標時標題字體大小 | `$font-size-l` |
| \--nutui-tabbar-text-large-font-weight | 無圖標時標題字體粗細 | `$font-weight` |
| \--nutui-tabbar-text-line-height | 字體行高 | `initial` |
| \--nutui-tabbar-text-margin-top | 標題上外邊距 | `3px` |
| \--nutui-tabbar-text-margin-top | 標題上外邊距 | `4px` |

<Contribution name="Tabbar" />
56 changes: 29 additions & 27 deletions src/packages/tabbaritem/tabbaritem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,55 @@
.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;
}
}

&-active {
color: $tabbar-active-color;

.nut-tabbar-item-icon-box,
.nut-tabbar-item-text,
.nut-icon {
/* #ifdef harmony*/
color: $tabbar-active-color;
Expand Down
15 changes: 7 additions & 8 deletions src/packages/tabbaritem/tabbaritem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,18 @@ export const TabbarItem: FunctionComponent<Partial<WebTabbarItemProps>> = (
}
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,
Expand All @@ -61,7 +62,7 @@ export const TabbarItem: FunctionComponent<Partial<WebTabbarItemProps>> = (
}

const renderTitleText = () => {
return title && <div className={titleClass}>{title}</div>
return title && <div className={`${classPrefix}-text`}>{title}</div>
}

return (
Expand All @@ -76,9 +77,7 @@ export const TabbarItem: FunctionComponent<Partial<WebTabbarItemProps>> = (
>
{icon ? (
<>
<Badge {...badgeProps}>
<div className={boxPrefix}>{icon}</div>
</Badge>
<Badge {...badgeProps}>{icon}</Badge>
{renderTitleText()}
</>
) : (
Expand Down
7 changes: 3 additions & 4 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -1160,8 +1160,7 @@ $tabbar-text-large-font-weight: var(
$font-weight
) !default;
$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
$tabbar-height: var(--nutui-tabbar-height, 50px) !default;
$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default;
$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 4px) !default;

//pulltorefresh
$pulltorefresh-icon-width: var(--nutui-pulltorefresh-icon-width, 36px) !default;
Expand Down
Loading