fix: tabs 代码简化\修订纵向样式 (#2948)

* fix: tabs 代码简化\修订纵向样式 * fix: tabs 代码简化\修订纵向样式
jdf2e · Jan 24, 2025 · 59bdd17 · 59bdd17
1 parent 96a4da5
commit 59bdd17
Show file tree

Hide file tree

Showing 39 changed files with 139 additions and 209 deletions.
diff --git a/src/packages/tabpane/tabpane.taro.tsx b/src/packages/tabpane/tabpane.taro.tsx
@@ -38,7 +38,5 @@ export const TabPane: FunctionComponent<
     className
   )
 
-  return children ? (
-    <View className={classes}>{!disabled && children}</View>
-  ) : null
+  return children && <View className={classes}>{!disabled && children}</View>
 }
diff --git a/src/packages/tabpane/tabpane.tsx b/src/packages/tabpane/tabpane.tsx
@@ -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>
 }
diff --git a/src/packages/tabs/demos/h5/demo1.tsx b/src/packages/tabs/demos/h5/demo1.tsx
@@ -11,7 +11,7 @@ const Demo1 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo10.tsx b/src/packages/tabs/demos/h5/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo11.tsx b/src/packages/tabs/demos/h5/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTabvalue(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

diff --git a/src/packages/tabs/demos/h5/demo12.tsx b/src/packages/tabs/demos/h5/demo12.tsx
@@ -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>
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo13.tsx b/src/packages/tabs/demos/h5/demo13.tsx
@@ -13,16 +13,16 @@ const Demo13 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo14.tsx b/src/packages/tabs/demos/h5/demo14.tsx
@@ -12,11 +12,11 @@ const Demo14 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo2.tsx b/src/packages/tabs/demos/h5/demo2.tsx
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo20.tsx b/src/packages/tabs/demos/h5/demo20.tsx
@@ -13,15 +13,15 @@ const Demo20 = () => {
         }}
         direction="vertical"
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
               setTabvalue1(value)
             }}
             direction="horizontal"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab 1 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo21.tsx b/src/packages/tabs/demos/h5/demo21.tsx
@@ -13,15 +13,15 @@ const Demo21 = () => {
         }}
         autoHeight
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
               setTabvalue1(value)
             }}
             direction="vertical"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab 1 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo22.tsx b/src/packages/tabs/demos/h5/demo22.tsx
@@ -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>
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo3.tsx b/src/packages/tabs/demos/h5/demo3.tsx
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo6.tsx b/src/packages/tabs/demos/h5/demo6.tsx
@@ -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>

diff --git a/src/packages/tabs/demos/h5/demo7.tsx b/src/packages/tabs/demos/h5/demo7.tsx
@@ -12,7 +12,7 @@ const Demo7 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx
@@ -13,7 +13,7 @@ const Demo8 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/h5/demo9.tsx b/src/packages/tabs/demos/h5/demo9.tsx
@@ -13,7 +13,7 @@ const Demo9 = () => {
           setTabvalue(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>

diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx
@@ -10,7 +10,7 @@ const Demo1 = () => {
         setTabvalue(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>

diff --git a/src/packages/tabs/demos/taro/demo10.tsx b/src/packages/tabs/demos/taro/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
         }}
         align="left"
       >
-        <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>

diff --git a/src/packages/tabs/demos/taro/demo11.tsx b/src/packages/tabs/demos/taro/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTabvalue(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

diff --git a/src/packages/tabs/demos/taro/demo12.tsx b/src/packages/tabs/demos/taro/demo12.tsx
@@ -16,7 +16,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>
@@ -30,7 +30,7 @@ const Demo12 = () => {
         }}
       >
         <Swiper.Item>
-          <View style={contentStyle}>Tab 1</View>
+          <View style={contentStyle}>Tab longitem</View>
         </Swiper.Item>
         <Swiper.Item>
           <View style={contentStyle}>Tab 2</View>

diff --git a/src/packages/tabs/demos/taro/demo13.tsx b/src/packages/tabs/demos/taro/demo13.tsx
@@ -14,11 +14,11 @@ const Demo13 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           {Array(8)
             .fill(null)
             .map((_, index) => (
-              <View key={index}>Tab 1</View>
+              <View key={index}>Tab longitem</View>
             ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2">

diff --git a/src/packages/tabs/demos/taro/demo14.tsx b/src/packages/tabs/demos/taro/demo14.tsx
@@ -14,11 +14,11 @@ const Demo14 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           {Array(8)
             .fill(null)
             .map((_, index) => (
-              <View key={index}>Tab 1</View>
+              <View key={index}>Tab longitem</View>
             ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>

diff --git a/src/packages/tabs/demos/taro/demo2.tsx b/src/packages/tabs/demos/taro/demo2.tsx
@@ -11,7 +11,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>

diff --git a/src/packages/tabs/demos/taro/demo20.tsx b/src/packages/tabs/demos/taro/demo20.tsx
@@ -14,15 +14,15 @@ const Demo20 = () => {
         }}
         direction="vertical"
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
               setTabvalue1(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>

diff --git a/src/packages/tabs/demos/taro/demo21.tsx b/src/packages/tabs/demos/taro/demo21.tsx
@@ -13,15 +13,15 @@ const Demo21 = () => {
         }}
         autoHeight
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
               setTabvalue1(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>

diff --git a/src/packages/tabs/demos/taro/demo22.tsx b/src/packages/tabs/demos/taro/demo22.tsx
@@ -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>
@@ -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>

diff --git a/src/packages/tabs/demos/taro/demo3.tsx b/src/packages/tabs/demos/taro/demo3.tsx
@@ -11,7 +11,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>

diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx
@@ -11,7 +11,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>

diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx
@@ -11,7 +11,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>