Skip to content

Commit 4c7366b

Browse files
xiaoyatongxiaoyatong
authored
fix: tabs 代码简化,调整部分样式 (#2949)
* fix: tabs 代码简化,调整部分样式 * test: tabs address and cascader
1 parent 3300424 commit 4c7366b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+243
-349
lines changed

‎src/packages/address/__test__/__snapshots__/address.spec.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22

33
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>"`;
44

5-
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>"`;
5+
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>"`;
66

77
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>"`;

‎src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ exports[`Cascader > visible true 1`] = `
2525
class="nut-tabs nut-tabs-horizontal"
2626
>
2727
<div
28-
class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"
28+
class="nut-tabs-titles nut-tabs-titles-line"
2929
>
3030
<div
3131
class="nut-tabs-titles-item "

‎src/packages/tabpane/tabpane.taro.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { FunctionComponent } from 'react'
22
import classNames from 'classnames'
3+
import { View } from '@tarojs/components'
34

45
interface TabPanelInnerProps {
56
autoHeightClassName: string
@@ -37,7 +38,5 @@ export const TabPane: FunctionComponent<
3738
className
3839
)
3940

40-
return children ? (
41-
<div className={classes}>{!disabled && children}</div>
42-
) : null
41+
return children && <View className={classes}>{!disabled && children}</View>
4342
}

‎src/packages/tabpane/tabpane.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,5 @@ export const TabPane: FunctionComponent<
3737
className
3838
)
3939

40-
return children ? (
41-
<div className={classes}>{!disabled && children}</div>
42-
) : null
40+
return children && <div className={classes}>{!disabled && children}</div>
4341
}

‎src/packages/tabs/__test__/tabs.spec.tsx

+17-18
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { TabPane } from '../../tabpane/tabpane'
77
test('base Tabs', () => {
88
const { getByTestId } = render(
99
<Tabs data-testid="tabs1">
10-
<TabPane title="Tab 1"> Tab 1 </TabPane>
10+
<TabPane title="Tab longitem"> Tab longitem </TabPane>
1111
</Tabs>
1212
)
1313
expect(getByTestId('tabs1')).toHaveClass('nut-tabs')
@@ -16,8 +16,8 @@ test('base Tabs', () => {
1616
test('base tabs props', () => {
1717
const { container } = render(
1818
<Tabs value="0" direction="horizontal" activeType="smile">
19-
<TabPane title="Tab 1" value="0">
20-
Tab 1
19+
<TabPane title="Tab longitem" value="0">
20+
Tab longitem
2121
</TabPane>
2222
</Tabs>
2323
)
@@ -26,14 +26,13 @@ test('base tabs props', () => {
2626

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

3231
test('base tabs props', () => {
3332
const { container } = render(
3433
<Tabs value="0" direction="horizontal" activeType="card">
35-
<TabPane title="Tab 1" value="0">
36-
Tab 1
34+
<TabPane title="Tab longitem" value="0">
35+
Tab longitem
3736
</TabPane>
3837
</Tabs>
3938
)
@@ -44,7 +43,7 @@ test('base tabs props', () => {
4443
test('base other props', async () => {
4544
const { container } = render(
4645
<Tabs duration={500}>
47-
<TabPane title="Tab 1"> Tab 1 </TabPane>
46+
<TabPane title="Tab longitem"> Tab longitem </TabPane>
4847
<TabPane title="Tab 2"> Tab 2 </TabPane>
4948
</Tabs>
5049
)
@@ -71,8 +70,8 @@ test('base other props', async () => {
7170
test('base Tabpane Props', () => {
7271
const { container } = render(
7372
<Tabs value="0">
74-
<TabPane title="Tab 1" value="0">
75-
Tab 1
73+
<TabPane title="Tab longitem" value="0">
74+
Tab longitem
7675
</TabPane>
7776
<TabPane title="Tab 2" value="1" disabled>
7877
Tab 2
@@ -87,14 +86,14 @@ test('base Tabpane Props', () => {
8786
expect(el.length === 3).toBe(true)
8887
expect(el[0]).toHaveClass('nut-tabs-titles-item-active')
8988
expect(el[1]).toHaveClass('nut-tabs-titles-item-disabled')
90-
expect(el2[0]).toHaveTextContent('Tab 1')
89+
expect(el2[0]).toHaveTextContent('Tab longitem')
9190
})
9291

9392
test('base Tabpane autoHeight Props', () => {
9493
const { container } = render(
9594
<Tabs value="0" autoHeight>
96-
<TabPane title="Tab 1" value="0">
97-
Tab 1
95+
<TabPane title="Tab longitem" value="0">
96+
Tab longitem
9897
</TabPane>
9998
<TabPane title="Tab 2" value="1">
10099
Tab 2
@@ -120,8 +119,8 @@ test('base click', () => {
120119
const handleClick = vi.fn(() => {})
121120
const { container } = render(
122121
<Tabs value="0" onClick={handleClick}>
123-
<TabPane title="Tab 1" value="0">
124-
Tab 1
122+
<TabPane title="Tab longitem" value="0">
123+
Tab longitem
125124
</TabPane>
126125
<TabPane title="Tab 2" value="1" disabled>
127126
Tab 2
@@ -145,17 +144,17 @@ test('click tab when have many tabs', async () => {
145144
const handleClick = vi.fn(() => {})
146145
const { container } = render(
147146
<Tabs value="0" onClick={handleClick} direction="vertical">
148-
<TabPane title="Tab 1" value="0">
149-
Tab 1
147+
<TabPane title="Tab longitem" value="0">
148+
Tab longitem
150149
</TabPane>
151150
<TabPane title="Tab 2" value="1">
152151
Tab 2
153152
</TabPane>
154153
<TabPane title="Tab 3" value="2">
155154
Tab 3
156155
</TabPane>
157-
<TabPane title="Tab 11" value="01">
158-
Tab 11
156+
<TabPane title="Tab longitem1" value="01">
157+
Tab longitem1
159158
</TabPane>
160159
<TabPane title="Tab 22" value="12">
161160
Tab 22

‎src/packages/tabs/demos/h5/demo1.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Demo1 = () => {
1111
setTab1value(value)
1212
}}
1313
>
14-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
14+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1515
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1717
</Tabs>

‎src/packages/tabs/demos/h5/demo10.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Demo10 = () => {
1313
setTab1value(value)
1414
}}
1515
>
16-
<Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
16+
<Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1818
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1919
</Tabs>

‎src/packages/tabs/demos/h5/demo11.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const Demo11 = () => {
1111
setTab2value(value)
1212
}}
1313
>
14-
<Tabs.TabPane title="Tab 1" value="0">
15-
Tab 1
14+
<Tabs.TabPane title="Tab longitem" value="0">
15+
Tab longitem
1616
</Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 2" value="1" disabled>
1818
Tab 2

‎src/packages/tabs/demos/h5/demo12.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Demo12 = () => {
1414
setTabIndex(page)
1515
}}
1616
>
17-
<Tabs.TabPane title="Tab 1" />
17+
<Tabs.TabPane title="Tab longitem" />
1818
<Tabs.TabPane title="Tab 2" />
1919
<Tabs.TabPane title="Tab 3" />
2020
</Tabs>
@@ -28,7 +28,7 @@ const Demo12 = () => {
2828
}}
2929
>
3030
<Swiper.Item>
31-
<div style={style}>Tab 1</div>
31+
<div style={style}>Tab longitem</div>
3232
</Swiper.Item>
3333
<Swiper.Item>
3434
<div style={style}>Tab 2</div>

‎src/packages/tabs/demos/h5/demo13.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ const Demo13 = () => {
1313
setTab2value(value)
1414
}}
1515
>
16-
<Tabs.TabPane title="Tab 1" value="0">
17-
<p>Tab 1</p>
18-
<p>Tab 1</p>
19-
<p>Tab 1</p>
20-
<p>Tab 1</p>
21-
<p>Tab 1</p>
22-
<p>Tab 1</p>
23-
<p>Tab 1</p>
24-
<p>Tab 1</p>
25-
<p>Tab 1</p>
16+
<Tabs.TabPane title="Tab longitem" value="0">
17+
<p>Tab longitem</p>
18+
<p>Tab longitem</p>
19+
<p>Tab longitem</p>
20+
<p>Tab longitem</p>
21+
<p>Tab longitem</p>
22+
<p>Tab longitem</p>
23+
<p>Tab longitem</p>
24+
<p>Tab longitem</p>
25+
<p>Tab longitem</p>
2626
</Tabs.TabPane>
2727
<Tabs.TabPane title="Tab 2" value="1">
2828
<p>Tab 2</p>

‎src/packages/tabs/demos/h5/demo14.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const Demo14 = () => {
1212
setTab2value(value)
1313
}}
1414
>
15-
<Tabs.TabPane title="Tab 1">
16-
<p>Tab 1</p>
17-
<p>Tab 1</p>
18-
<p>Tab 1</p>
19-
<p>Tab 1</p>
15+
<Tabs.TabPane title="Tab longitem">
16+
<p>Tab longitem</p>
17+
<p>Tab longitem</p>
18+
<p>Tab longitem</p>
19+
<p>Tab longitem</p>
2020
</Tabs.TabPane>
2121
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
2222
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>

‎src/packages/tabs/demos/h5/demo16.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Demo16 = () => {
1111
setTab4value(value)
1212
}}
1313
>
14+
<Tabs.TabPane title="第一名top1">第一名top1</Tabs.TabPane>
1415
<Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>
1516
<Tabs.TabPane title="上新日">上新日</Tabs.TabPane>
1617
<Tabs.TabPane title="百亿补贴">百亿补贴</Tabs.TabPane>

‎src/packages/tabs/demos/h5/demo2.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Demo2 = () => {
1212
}}
1313
activeType="smile"
1414
>
15-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
15+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1818
</Tabs>

‎src/packages/tabs/demos/h5/demo20.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ const Demo20 = () => {
1313
}}
1414
direction="vertical"
1515
>
16-
<Tabs.TabPane title="Tab 1">
16+
<Tabs.TabPane title="Tab longitem">
1717
<Tabs
1818
value={tab9value}
1919
onChange={(value) => {
2020
setTab9value(value)
2121
}}
2222
direction="horizontal"
2323
>
24-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
24+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
2525
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
2626
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
2727
</Tabs>

‎src/packages/tabs/demos/h5/demo21.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ const Demo21 = () => {
1313
}}
1414
autoHeight
1515
>
16-
<Tabs.TabPane title="Tab 1">
16+
<Tabs.TabPane title="Tab longitem">
1717
<Tabs
1818
value={tab9value}
1919
onChange={(value) => {
2020
setTab9value(value)
2121
}}
2222
direction="vertical"
2323
>
24-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
24+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
2525
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
2626
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
2727
</Tabs>

‎src/packages/tabs/demos/h5/demo22.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Demo22 = () => {
1313
}}
1414
style={{ '--nutui-tabs-titles-font-size': '20px' }}
1515
>
16-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
16+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1818
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1919
</Tabs>
@@ -24,7 +24,7 @@ const Demo22 = () => {
2424
}}
2525
style={{ '--nutui-tabs-titles-font-size': '12px' }}
2626
>
27-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
27+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
2828
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
2929
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
3030
</Tabs>

‎src/packages/tabs/demos/h5/demo3.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Demo3 = () => {
1212
}}
1313
activeType="simple"
1414
>
15-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
15+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1818
</Tabs>

‎src/packages/tabs/demos/h5/demo4.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Demo4 = () => {
1212
}}
1313
activeType="card"
1414
>
15-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
15+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1818
</Tabs>

‎src/packages/tabs/demos/h5/demo5.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Demo5 = () => {
1212
}}
1313
activeType="button"
1414
>
15-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
15+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1818
</Tabs>

‎src/packages/tabs/demos/h5/demo6.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Demo6 = () => {
1212
}}
1313
activeType="divider"
1414
>
15-
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
15+
<Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
1616
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
1717
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
1818
</Tabs>

0 commit comments

Comments
 (0)