Skip to content
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

fix: tabs 代码简化,调整部分样式 #2949

Merged
merged 4 commits into from
Jan 24, 2025
Merged

fix: tabs 代码简化,调整部分样式 #2949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b76ec0
fix: tabs 代码简化,调整部分样式
xiaoyatong Jan 16, 2025
a941b58
Merge branch 'next' into refactor-tabss
xiaoyatong Jan 22, 2025
d740518
Merge branch 'next' into refactor-tabss
xiaoyatong Jan 24, 2025
08eabb6
test: tabs address and cascader
xiaoyatong Jan 24, 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
2 changes: 1 addition & 1 deletion src/packages/address/__test__/__snapshots__/address.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

exports[`Address: exist defaultIcon & selectIcon 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">请选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item active"><div class="select">456</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;

exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><span class="nut-tabs-titles-item-text">请选择</span><span class="nut-tabs-titles-item-line"></span></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;
exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><span class="nut-tabs-titles-item-text">请选择</span><span class="nut-tabs-titles-item-line"></span></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;

exports[`Address: show exist 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item active"><svg class="nut-icon nut-icon-Check " xmlns="http://www.w3.org/2000/svg" color="var(--nutui-color-primary)" viewBox="0 0 1024 1024" aria-labelledby="Check" role="presentation"><path d="M998.4 245.03c-219.43 153.6-398.63 332.8-552.23 552.23-40.23 58.51-128 54.86-164.57-3.66-69.49-106.06-149.94-186.51-256-256-51.2-32.91-18.29-113.37 40.23-98.74 117.03 21.94 208.46 69.49 292.57 146.28 157.26-190.17 358.4-340.11 588.8-435.2 62.17-25.6 106.06 58.51 51.2 95.09" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M682.67 470.04c0 94.4-76.42 170.94-170.67 170.94s-170.67-76.54-170.67-170.94S417.75 299.12 512 299.11s170.67 76.52 170.67 170.93m-85.34 0A85.4 85.4 0 0 0 512 384.58c-47.15 0-85.33 38.27-85.33 85.46A85.4 85.4 0 0 0 512 555.5c47.15 0 85.33-38.25 85.33-85.46" fill="currentColor" fill-opacity="0.9"></path>,<path d="M981.33 470.04c0 277.76-312.75 465.73-464.15 552.53a10.22 10.22 0 0 1-10.36 0C355.42 935.79 42.67 747.82 42.67 470.06 42.67 210.45 252.8 0 512 0s469.33 210.45 469.33 470.04m-85.33 0c0-212.39-171.93-384.58-384-384.58S128 257.64 128 470.04c0 106.24 60.52 202.73 151.85 288.85 74.6 70.4 161.98 126.46 232.15 167.89 70.19-41.43 157.55-97.49 232.15-167.89C835.46 672.77 896 576.28 896 470.04" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M682.67 470.04c0 94.4-76.42 170.94-170.67 170.94s-170.67-76.54-170.67-170.94S417.75 299.12 512 299.11s170.67 76.52 170.67 170.93m-85.34 0A85.4 85.4 0 0 0 512 384.58c-47.15 0-85.33 38.27-85.33 85.46A85.4 85.4 0 0 0 512 555.5c47.15 0 85.33-38.25 85.33-85.46" fill="currentColor" fill-opacity="0.9"></path>,<path d="M981.33 470.04c0 277.76-312.75 465.73-464.15 552.53a10.22 10.22 0 0 1-10.36 0C355.42 935.79 42.67 747.82 42.67 470.06 42.67 210.45 252.8 0 512 0s469.33 210.45 469.33 470.04m-85.33 0c0-212.39-171.93-384.58-384-384.58S128 257.64 128 470.04c0 106.24 60.52 202.73 151.85 288.85 74.6 70.4 161.98 126.46 232.15 167.89 70.19-41.43 157.55-97.49 232.15-167.89C835.46 672.77 896 576.28 896 470.04" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
2 changes: 1 addition & 1 deletion src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`Cascader > visible true 1`] = `
class="nut-tabs nut-tabs-horizontal"
>
<div
class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"
class="nut-tabs-titles nut-tabs-titles-line"
>
<div
class="nut-tabs-titles-item "
Expand Down
5 changes: 2 additions & 3 deletions src/packages/tabpane/tabpane.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
import { View } from '@tarojs/components'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议统一组件引入方式并优化渲染逻辑

  1. 建议将组件引入语句与其他引入保持一致的顺序
  2. 渲染逻辑存在与 React 版本相同的问题
- import { View } from '@tarojs/components'
+ import type { View } from '@tarojs/components'
+ import { View } from '@tarojs/components'

  // ... 其他代码 ...

- return children && <View className={classes}>{!disabled && children}</View>
+ if (!children) return null
+ return (
+   <View className={classes}>
+     {disabled ? (
+       <View className={`${classPrefix}__disabled`}>
+         {children}
+       </View>
+     ) : children}
+   </View>
+ )

Also applies to: 41-41


interface TabPanelInnerProps {
autoHeightClassName: string
Expand Down Expand Up @@ -37,7 +38,5 @@ export const TabPane: FunctionComponent<
className
)

return children ? (
<div className={classes}>{!disabled && children}</div>
) : null
return children && <View className={classes}>{!disabled && children}</View>
}
4 changes: 1 addition & 3 deletions src/packages/tabpane/tabpane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,5 @@ export const TabPane: FunctionComponent<
className
)

return children ? (
<div className={classes}>{!disabled && children}</div>
) : null
return children && <div className={classes}>{!disabled && children}</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议优化条件渲染逻辑

当前实现存在以下问题：

  1. 条件渲染逻辑可能不够直观
  2. disabled 状态的处理方式可能导致不一致的渲染结果

建议重构为更清晰的实现：

- return children && <div className={classes}>{!disabled && children}</div>
+ if (!children) return null
+ return (
+   <div className={classes}>
+     {disabled ? (
+       <div className={`${classPrefix}__disabled`}>
+         {children}
+       </div>
+     ) : children}
+   </div>
+ )

Committable suggestion skipped: line range outside the PR's diff.

}
35 changes: 17 additions & 18 deletions src/packages/tabs/__test__/tabs.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { TabPane } from '../../tabpane/tabpane'
test('base Tabs', () => {
const { getByTestId } = render(
<Tabs data-testid="tabs1">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab longitem"> Tab longitem </TabPane>
</Tabs>
)
expect(getByTestId('tabs1')).toHaveClass('nut-tabs')
Expand All @@ -16,8 +16,8 @@ test('base Tabs', () => {
test('base tabs props', () => {
const { container } = render(
<Tabs value="0" direction="horizontal" activeType="smile">
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
</Tabs>
)
Expand All @@ -26,14 +26,13 @@ test('base tabs props', () => {

expect(el2.length > 0).toBe(true)
expect(el3).toHaveClass('nut-tabs-titles-smile')
expect(el3).toHaveClass('nut-tabs-titles-scrollable')
})

test('base tabs props', () => {
const { container } = render(
<Tabs value="0" direction="horizontal" activeType="card">
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
</Tabs>
)
Expand All @@ -44,7 +43,7 @@ test('base tabs props', () => {
test('base other props', async () => {
const { container } = render(
<Tabs duration={500}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab longitem"> Tab longitem </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
</Tabs>
)
Expand All @@ -71,8 +70,8 @@ test('base other props', async () => {
test('base Tabpane Props', () => {
const { container } = render(
<Tabs value="0">
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
<TabPane title="Tab 2" value="1" disabled>
Tab 2
Expand All @@ -87,14 +86,14 @@ test('base Tabpane Props', () => {
expect(el.length === 3).toBe(true)
expect(el[0]).toHaveClass('nut-tabs-titles-item-active')
expect(el[1]).toHaveClass('nut-tabs-titles-item-disabled')
expect(el2[0]).toHaveTextContent('Tab 1')
expect(el2[0]).toHaveTextContent('Tab longitem')
})

test('base Tabpane autoHeight Props', () => {
const { container } = render(
<Tabs value="0" autoHeight>
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
<TabPane title="Tab 2" value="1">
Tab 2
Expand All @@ -120,8 +119,8 @@ test('base click', () => {
const handleClick = vi.fn(() => {})
const { container } = render(
<Tabs value="0" onClick={handleClick}>
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
<TabPane title="Tab 2" value="1" disabled>
Tab 2
Expand All @@ -145,17 +144,17 @@ test('click tab when have many tabs', async () => {
const handleClick = vi.fn(() => {})
const { container } = render(
<Tabs value="0" onClick={handleClick} direction="vertical">
<TabPane title="Tab 1" value="0">
Tab 1
<TabPane title="Tab longitem" value="0">
Tab longitem
</TabPane>
<TabPane title="Tab 2" value="1">
Tab 2
</TabPane>
<TabPane title="Tab 3" value="2">
Tab 3
</TabPane>
<TabPane title="Tab 11" value="01">
Tab 11
<TabPane title="Tab longitem1" value="01">
Tab longitem1
</TabPane>
<TabPane title="Tab 22" value="12">
Tab 22
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Demo1 = () => {
setTab1value(value)
}}
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Demo10 = () => {
setTab1value(value)
}}
>
<Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const Demo11 = () => {
setTab2value(value)
}}
>
<Tabs.TabPane title="Tab 1" value="0">
Tab 1
<Tabs.TabPane title="Tab longitem" value="0">
Tab longitem
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" value="1" disabled>
Tab 2
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo12.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Demo12 = () => {
setTabIndex(page)
}}
>
<Tabs.TabPane title="Tab 1" />
<Tabs.TabPane title="Tab longitem" />
<Tabs.TabPane title="Tab 2" />
<Tabs.TabPane title="Tab 3" />
</Tabs>
Expand All @@ -28,7 +28,7 @@ const Demo12 = () => {
}}
>
<Swiper.Item>
<div style={style}>Tab 1</div>
<div style={style}>Tab longitem</div>
</Swiper.Item>
<Swiper.Item>
<div style={style}>Tab 2</div>
Expand Down
20 changes: 10 additions & 10 deletions src/packages/tabs/demos/h5/demo13.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ const Demo13 = () => {
setTab2value(value)
}}
>
<Tabs.TabPane title="Tab 1" value="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<Tabs.TabPane title="Tab longitem" value="0">
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" value="1">
<p>Tab 2</p>
Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabs/demos/h5/demo14.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ const Demo14 = () => {
setTab2value(value)
}}
>
<Tabs.TabPane title="Tab 1">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<Tabs.TabPane title="Tab longitem">
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
<p>Tab longitem</p>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
Expand Down
1 change: 1 addition & 0 deletions src/packages/tabs/demos/h5/demo16.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const Demo16 = () => {
setTab4value(value)
}}
>
<Tabs.TabPane title="第一名top1">第一名top1</Tabs.TabPane>
<Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>
<Tabs.TabPane title="上新日">上新日</Tabs.TabPane>
<Tabs.TabPane title="百亿补贴">百亿补贴</Tabs.TabPane>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Demo2 = () => {
}}
activeType="smile"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo20.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const Demo20 = () => {
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs.TabPane title="Tab longitem">
<Tabs
value={tab9value}
onChange={(value) => {
setTab9value(value)
}}
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo21.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const Demo21 = () => {
}}
autoHeight
>
<Tabs.TabPane title="Tab 1">
<Tabs.TabPane title="Tab longitem">
<Tabs
value={tab9value}
onChange={(value) => {
setTab9value(value)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo22.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Demo22 = () => {
}}
style={{ '--nutui-tabs-titles-font-size': '20px' }}
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand All @@ -24,7 +24,7 @@ const Demo22 = () => {
}}
style={{ '--nutui-tabs-titles-font-size': '12px' }}
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Demo3 = () => {
}}
activeType="simple"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Demo4 = () => {
}}
activeType="card"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Demo5 = () => {
}}
activeType="button"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Demo6 = () => {
}}
activeType="divider"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
Expand Down
Loading
Loading