feat: add tabBarPosition on TabBar

Add new props tabBarPosition: 'top' | 'bottom'
ant-design · Jun 7, 2018 · e8179f4 · e8179f4
1 parent aac50c7
commit e8179f4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git a/components/tab-bar/PropsType.tsx b/components/tab-bar/PropsType.tsx
@@ -4,6 +4,7 @@ export interface TabBarProps {
   barTintColor?: string;
   tintColor?: string;
   unselectedTintColor?: string;
+  tabBarPosition?: 'top' | 'bottom';
 
   /** default: false */
   animated?: boolean;
@@ -20,10 +21,7 @@ export interface TabBarItemProps {
   icon?: TabIcon;
   selectedIcon?: TabIcon;
   title: string;
-  /*web only*/
   dot?: boolean;
-  /*web only*/
   prefixCls?: string;
-  /*web only*/
   style?: React.CSSProperties;
 }
diff --git a/components/tab-bar/demo/listview-tabbar.md b/components/tab-bar/demo/listview-tabbar.md
@@ -197,6 +197,7 @@ class TabBarExample extends React.Component {
           unselectedTintColor="#949494"
           tintColor="#33A3F4"
           barTintColor="white"
+          tabBarPosition="bottom"
           hidden={this.state.hidden}
           prerenderingSiblingsNumber={0}
         >
@@ -318,4 +319,4 @@ ReactDOM.render(<TabBarExample />, mountNode);
 #tab-bar .demo-preview-item .am-tab-bar {
   background-color: white;
 }
-````
+````
diff --git a/components/tab-bar/index.en-US.md b/components/tab-bar/index.en-US.md
@@ -24,6 +24,7 @@ Properties | Descrition | Type | Default
 | prefixCls| prefix className  | String   | 'am-tab-bar'      |
 | noRenderContent| can't render content  | Boolean   |   false   |
 | prerenderingSiblingsNumber| pre-render nearby sibling, Infinity: render all the siblings, 0: render current page  | number |   1   |
+| tabBarPosition | tabbar position | 'top'\|'bottom' | 'bottom' |
 
 ### TabBar.Item
 

diff --git a/components/tab-bar/index.tsx b/components/tab-bar/index.tsx
@@ -21,7 +21,6 @@ export class Item extends React.Component<TabBarItemProps, any> {
   }
 }
 export interface AntTabbarProps extends TabBarProps {
-  /*web only*/
   prefixCls?: string;
   className?: string;
   hidden?: boolean;
@@ -40,6 +39,7 @@ class AntTabBar extends React.Component<AntTabbarProps, any> {
     animated: false,
     swipeable: false,
     prerenderingSiblingsNumber: 1,
+    tabBarPosition: 'bottom',
   };
 
   public static Item = Item;
@@ -59,6 +59,7 @@ class AntTabBar extends React.Component<AntTabbarProps, any> {
       tintColor,
       unselectedTintColor,
       hidden,
+      tabBarPosition,
     } = this.props;
     const tabsData = this.getTabs();
 
@@ -82,7 +83,7 @@ class AntTabBar extends React.Component<AntTabbarProps, any> {
     });
     let cls = `${prefixCls}-bar`;
     if (hidden) {
-      cls += ` ${prefixCls}-bar-hidden`;
+      cls += ` ${prefixCls}-bar-hidden-${tabBarPosition}`;
     }
 
     return (
@@ -100,6 +101,7 @@ class AntTabBar extends React.Component<AntTabbarProps, any> {
       swipeable,
       noRenderContent,
       prerenderingSiblingsNumber,
+      tabBarPosition,
     } = this.props;
     const tabs = this.getTabs();
     let activeIndex = 0;
@@ -114,7 +116,7 @@ class AntTabBar extends React.Component<AntTabbarProps, any> {
         <Tabs
           tabs={tabs}
           renderTabBar={this.renderTabBar}
-          tabBarPosition="bottom"
+          tabBarPosition={tabBarPosition}
           page={activeIndex < 0 ? undefined : activeIndex}
           animated={animated}
           swipeable={swipeable}

diff --git a/components/tab-bar/index.zh-CN.md b/components/tab-bar/index.zh-CN.md
@@ -25,6 +25,7 @@ subtitle: 标签栏
 | prefixCls| 样式前缀  | String   | 'am-tab-bar'      |
 | noRenderContent| 不渲染内容部分  | Boolean   |   false   |
 | prerenderingSiblingsNumber| 预加载相邻的tab内容, Infinity: 加载所有的tab内容, 0: 仅加载当前tab内容, 当页面较复杂时，建议设为0，提升页面加载性能  | number |   1   |
+| tabBarPosition | tabbar 位置 | 'top'\|'bottom' | 'bottom' |
 
 ### TabBar.Item
 

diff --git a/components/tab-bar/style/index.less b/components/tab-bar/style/index.less
@@ -16,14 +16,21 @@
     .hairline('top');
     width: 100%;
     display: flex;
-    transition: bottom .2s;
+    transition-duration: .2s;
+    transition-property: height bottom;
     z-index: 100;
     justify-content: space-around;
     align-items: center;
     bottom: 0;
 
-    &-hidden {
+    &-hidden-top {
+      bottom: @tab-bar-height;
+      height: 0;
+    }
+
+    &-hidden-bottom {
       bottom: -@tab-bar-height;
+      height: 0;
     }
 
     .@{tabbar-prefix-cls}-tab {