add noPadded prop to Tabs.Item, see #33

- also, remove Tabs Nav bottom margin
robyth · May 10, 2016 · 80316ff · 80316ff
1 parent f4f9a29
commit 80316ff
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/docs/tabs/api.md b/docs/tabs/api.md
@@ -49,6 +49,12 @@
 
 是否禁用该选项卡。
 
+##### `noPadded`
+
+> PropType: `bool`
+
+是否移除选项卡面板的内边距（`padding`）。
+
 ##### `navStyle`
 
 > PropType: `string`

diff --git a/src/js/Tabs.js b/src/js/Tabs.js
@@ -118,7 +118,8 @@ const Tabs = React.createClass({
     let panels = React.Children.map(this.props.children, (child, index) => {
       let {
         eventKey,
-        children
+        children,
+        ...props
       } = child.props;
 
       if (eventKey === undefined) {
@@ -130,6 +131,7 @@ const Tabs = React.createClass({
           active={eventKey === activeKey}
           enventKey={eventKey}
           key={'tabPanel' + index}
+          {...props}
         >
           {children}
         </Tabs.Item>
@@ -173,6 +175,7 @@ Tabs.Item = React.createClass({
     eventKey: React.PropTypes.any,
     disabled: React.PropTypes.bool,
     active: React.PropTypes.bool,
+    noPadded: React.PropTypes.bool,
     navSize: React.PropTypes.string,
     navStyle: React.PropTypes.string,
   },
@@ -188,10 +191,13 @@ Tabs.Item = React.createClass({
     let {
       className,
       children,
+      noPadded,
       ...props
     } = this.props;
+    const elementName = 'panel';
 
-    classSet[this.prefixClass('panel')] = true;
+    classSet[this.prefixClass(elementName)] = true;
+    classSet[this.prefixClass(`${elementName}-no-padded`)] = noPadded;
 
     return (
       <div
@@ -205,3 +211,5 @@ Tabs.Item = React.createClass({
 });
 
 export default Tabs;
+
+// TODO: Nav 的可定制性，如允许传入 Router 的 Link 组件
diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss
@@ -10,6 +10,8 @@
 }
 
 .#{$tabs-prefix}-nav {
+  margin-bottom: 0;
+
   .#{$button-prefix} {
     @extend %text-truncate;
   }
@@ -28,7 +30,7 @@
   top: 0;
   z-index: 99;
   width: 100%;
-  padding: rem-calc(10) $global-spacing;
+  padding: $global-spacing;
   visibility: hidden;
   transition: transform 0.3s;
   transform: translateX(-100%);
@@ -43,6 +45,11 @@
       transform: translateX(100%);
     }
   }
+
+  // panel without padding
+  &#{$panel}-no-padded {
+    padding: 0;
+  }
 }
 
 // Mofidier: inset