Skip to content

feat: tabbar v15 适配 #2903

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
Miles-hxy merged 1 commit into from
Dec 30, 2024
Merged

feat: tabbar v15 适配 #2903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 5px;">11</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">分类</div><div class="nut-badge-content" style="top: 0px; right: 5px;"></div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">逛</div><div class="nut-badge-content" style="top: 0px; right: 5px;"></div></div></div></div></div>"`;
exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 0px;">11</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">分类</div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">逛</div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div></div></div></div>"`;

exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 5px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 5px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;
exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;
14 changes: 5 additions & 9 deletions src/packages/tabbar/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'

const Demo1 = () => (
<Tabbar defaultValue={0}>
<Tabbar.Item
title="首页"
icon={<Home width={18} height={18} />}
value={9}
/>
<Tabbar.Item title="分类" icon={<Category width={18} height={18} />} dot />
<Tabbar.Item title="逛" icon={<Hi width={18} height={18} />} />
<Tabbar.Item title="购物车" icon={<Cart width={18} height={18} />} />
<Tabbar.Item title="我的" icon={<User width={18} height={18} />} />
<Tabbar.Item title="首页" icon={<Home />} value={9} />
<Tabbar.Item title="分类" icon={<Category />} dot />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ const Demo2 = () => {
setActiveIndex(value)
}}
>
<Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
<Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
<Tabbar.Item title="逛" icon={<Hi width={20} height={20} />} />
<Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} />
<Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabbar/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Demo4 = () => (
}}
>
<Tabbar.Item title="首页" value={9} />
<Tabbar.Item title="分类" dot />
<Tabbar.Item title="分类" />
<Tabbar.Item title="逛" />
<Tabbar.Item title="购物车" />
<Tabbar.Item title="我的" />
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabbar/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Demo5 = () => (
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} value={110} />
<Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'

const Demo6 = () => (
<Tabbar>
<Tabbar.Item title="首页" icon={<Home width={20} height={20} />} dot />
<Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
<Tabbar.Item title="逛" icon={<Hi width={20} height={20} />} />
<Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} dot />
<Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
<Tabbar.Item title="首页" icon={<Home />} dot />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} dot />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'

const Demo7 = () => (
<Tabbar inactiveColor="#7d7e80" activeColor="#0073ff">
<Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
<Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
<Tabbar.Item title="逛" icon={<Hi width={20} height={20} />} />
<Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} />
<Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
6 changes: 3 additions & 3 deletions src/packages/tabbar/demos/h5/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { Category, Hi, Home } from '@nutui/icons-react'

const Demo8 = () => (
<Tabbar inactiveColor="#7d7e80" activeColor="#0073ff">
<Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
<Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
<Tabbar.Item title="逛" icon={<Hi width={20} height={20} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/h5/demo9.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react'

const Demo9 = () => (
<Tabbar fixed>
<Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
<Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
<Tabbar.Item title="逛" icon={<Hi width={20} height={20} />} />
<Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} />
<Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ const Demo1 = () => (
console.log(value)
}}
>
<Tabbar.Item title="首页" icon={<Home size={18} />} value={9} />
<Tabbar.Item title="分类" icon={<Category size={18} />} />
<Tabbar.Item title="逛" icon={<Hi size={18} />} />
<Tabbar.Item title="购物车" icon={<Cart size={18} />} />
<Tabbar.Item title="我的" icon={<User size={18} />} />
<Tabbar.Item title="首页" icon={<Home />} value={9} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro'

const Demo2 = () => (
<Tabbar defaultValue={2}>
<Tabbar.Item title="首页" icon={<Home size={18} />} />
<Tabbar.Item title="分类" icon={<Category size={18} />} />
<Tabbar.Item title="逛" icon={<Hi size={18} />} />
<Tabbar.Item title="购物车" icon={<Cart size={18} />} />
<Tabbar.Item title="我的" icon={<User size={18} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabbar/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Demo4 = () => (
}}
>
<Tabbar.Item title="首页" value={9} />
<Tabbar.Item title="分类" dot />
<Tabbar.Item title="分类" />
<Tabbar.Item title="逛" />
<Tabbar.Item title="购物车" />
<Tabbar.Item title="我的" />
Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro'

const Demo6 = () => (
<Tabbar>
<Tabbar.Item title="首页" icon={<Home size={18} />} dot />
<Tabbar.Item title="分类" icon={<Category size={18} />} />
<Tabbar.Item title="逛" icon={<Hi size={18} />} />
<Tabbar.Item title="购物车" icon={<Cart size={18} />} dot />
<Tabbar.Item title="我的" icon={<User size={18} />} />
<Tabbar.Item title="首页" icon={<Home />} dot />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} dot />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/taro/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro'

const Demo7 = () => (
<Tabbar inactiveColor="#7d7e80" activeColor="#0073ff">
<Tabbar.Item title="首页" icon={<Home size={18} />} />
<Tabbar.Item title="分类" icon={<Category size={18} />} />
<Tabbar.Item title="逛" icon={<Hi size={18} />} />
<Tabbar.Item title="购物车" icon={<Cart size={18} />} />
<Tabbar.Item title="我的" icon={<User size={18} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabbar/demos/taro/demo9.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro'

const Demo9 = () => (
<Tabbar fixed>
<Tabbar.Item title="首页" icon={<Home size={18} />} />
<Tabbar.Item title="分类" icon={<Category size={18} />} />
<Tabbar.Item title="逛" icon={<Hi size={18} />} />
<Tabbar.Item title="购物车" icon={<Cart size={18} />} />
<Tabbar.Item title="我的" icon={<User size={18} />} />
<Tabbar.Item title="首页" icon={<Home />} />
<Tabbar.Item title="分类" icon={<Category />} />
<Tabbar.Item title="逛" icon={<Hi />} />
<Tabbar.Item title="购物车" icon={<Cart />} />
<Tabbar.Item title="我的" icon={<User />} />
</Tabbar>
)

Expand Down
8 changes: 5 additions & 3 deletions src/packages/tabbaritem/tabbaritem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,16 @@
position: relative;

.nut-icon {
width: 24px;
height: 24px;
font-size: 24px;
width: 22px;
height: 22px;
font-size: 22px;
}

&-nav {
display: block;
color: $color-text;
font-size: $tabbar-text-font-size;
line-height: $tabbar-text-font-size;
margin-top: $tabbar-text-margin-top;
}

Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabbaritem/tabbaritem.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const defaultProps = {
dot: false,
max: 99,
top: '0',
right: '5',
right: '0',
} as TabbarItemProps

export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabbaritem/tabbaritem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const defaultProps = {
dot: false,
max: 99,
top: '0',
right: '5',
right: '0',
} as TabbarItemProps

export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
Expand Down