feat(Tab): adding more configuration of wrapped tab

alibaba-fusion · Apr 10, 2019 · e72129e · e72129e
1 parent 525965f
commit e72129e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/docs/tab/theme/index.jsx b/docs/tab/theme/index.jsx
@@ -192,16 +192,16 @@ function renderWrappedTab(title, locale, props, demoFunction, onFunctionChange)
     return (<Demo title={title} block demoFunction={demoFunction} onFunctionChange={onFunctionChange}>
         <DemoHead cols={['M', 'S']} />
         <DemoGroup label={locale.normal}>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="medium">{children4}</Tab>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="small">{children4}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null} tabPosition={tabPosition} size="medium">{children4}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null}  tabPosition={tabPosition} size="small">{children4}</Tab>
         </DemoGroup>
         <DemoGroup label={locale.slideExcess}>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="medium">{children12}</Tab>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="small">{children12}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null}  tabPosition={tabPosition} size="medium">{children12}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null}  tabPosition={tabPosition} size="small">{children12}</Tab>
         </DemoGroup>
         <DemoGroup label={locale.dropdownExcess}>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="medium" excessMode="dropdown">{children12}</Tab>
-            <Tab shape="wrapped" tabPosition={tabPosition} size="small" excessMode="dropdown">{children12}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null}  tabPosition={tabPosition} size="medium" excessMode="dropdown">{children12}</Tab>
+            <Tab shape="wrapped" contentStyle={tabPosition === 'left' || tabPosition === 'right' ? { "minHeight": 150 } : null}  tabPosition={tabPosition} size="small" excessMode="dropdown">{children12}</Tab>
         </DemoGroup>
     </Demo>);
 }

diff --git a/src/tab/main.scss b/src/tab/main.scss
@@ -267,6 +267,10 @@
                 $tab-wrapped-tab-corner-radius,
                 'top'
             );
+            border-width: $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-line-width $tab-wrapped-border-side-width;
+            &.active {
+                border-width: $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width;
+            }
         }
     }
 
@@ -305,6 +309,10 @@
             margin-bottom: $tab-wrapped-tab-margin-bottom;
             @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-left-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-border-line-color, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color);
             @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, -$tab-wrapped-border-line-width, $tab-wrapped-tab-corner-radius, 'left');
+            border-width: $tab-wrapped-border-side-width $tab-wrapped-border-line-width $tab-wrapped-border-side-width $tab-wrapped-border-side-width;
+            &.active {
+                border-width: $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width;
+            }
         }
     }
 
@@ -321,6 +329,10 @@
             margin-bottom: $tab-wrapped-tab-margin-bottom;
             @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-right-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-bg-color-selected);
             @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, -$tab-wrapped-border-line-width, $tab-wrapped-tab-corner-radius, 'right');
+            border-width: $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-line-width;
+            &.active {
+                border-width: $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width;
+            }
         }
     }
 

diff --git a/src/tab/scss/variable.scss b/src/tab/scss/variable.scss
@@ -183,10 +183,18 @@ $tab-pure-divider-line: $tab-pure-divider-border-style $tab-pure-divider-line-wi
 /// @namespace size/tab
 $tab-wrapped-border-line-style: $line-solid !default;
 
-/// broder width
+/// active broder width
 /// @namespace size/tab
 $tab-wrapped-border-line-width: $line-1 !default;
 
+/// non-active border width
+/// @namespace size/tab
+$tab-wrapped-border-side-width: $line-1 !default;
+
+/// broder active side
+/// @namespace size/tab
+$tab-wrapped-border-active-side-width: $line-1 !default;
+
 /// corner
 /// @namespace size/tab
 $tab-wrapped-tab-corner-radius: $corner-1 !default;