Tabs 标签页

用于让用户在不同的视图中进行切换。

规则

标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

代码演示

Basic Usage.

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
const tabs = [
  { title: <Badge text={'3'}>First Tab</Badge> },
  { title: <Badge text={'今日(20)'}>Second Tab</Badge> },
  { title: <Badge dot>Third Tab</Badge> },
];
const tabs2 = [
  { title: 'First Tab', sub: '1' },
  { title: 'Second Tab', sub: '2' },
  { title: 'Third Tab', sub: '3' },
];
const TabExample = () => (
  <div>
    <Tabs tabs={tabs}
      initialPage={1}
      onChange={(tab, index) => { console.log('onChange', index, tab); }}
      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of first tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of second tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of third tab
      </div>
    </Tabs>
    <WhiteSpace />
    <Tabs tabs={tabs2}
      initialPage={1}
      tabBarPosition="bottom"
      renderTab={tab => <span>{tab.title}</span>}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of first tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of second tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        Content of third tab
      </div>
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

TabBar sticky

use react-sticky

import { Tabs, WhiteSpace } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
const tabs = [
  { title: 'First Tab', key: 't1' },
  { title: 'Second Tab', key: 't2' },
  { title: 'Third Tab', key: 't3' },
];
const TabExample = () => (
  <div>
    <WhiteSpace />
    <StickyContainer>
      <Tabs tabs={tabs}
        initialPage={'t2'}
        renderTabBar={renderTabBar}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of first tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of second tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
      </Tabs>
    </StickyContainer>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

无动画

Switch tabs without animation

import { Tabs, WhiteSpace } from 'antd-mobile';
const tabs = [
  { title: 'First Tab' },
  { title: 'Second Tab' },
  { title: 'Third Tab' },
];
const TabExample = () => (
  <div>
    <WhiteSpace />
    <Tabs tabs={tabs} initialPage={2} animated={false} useOnPan={false}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of first tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of second tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of third tab
      </div>
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

固定高度

固定外部容器高度

import { Tabs, WhiteSpace } from 'antd-mobile';
const tabs = [
  { title: 'First Tab', key: 't1' },
  { title: 'Second Tab', key: 't2' },
  { title: 'Third Tab', key: 't3' },
];
const TabExample = () => (
  <div>
    <WhiteSpace />
    <div style={{ height: 200 }}>
      <Tabs tabs={tabs}
        initialPage={'t2'}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of first tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of second tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
      </Tabs>
    </div>
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

垂直样式

use react-sticky

import { Tabs, WhiteSpace } from 'antd-mobile';
const tabs = [
  { title: '1 Tab', key: 't1' },
  { title: '2 Tab', key: 't2' },
  { title: '3 Tab', key: 't3' },
];
const TabExample = () => (
  <div style={{ height: 200 }}>
    <WhiteSpace />
    <Tabs tabs={tabs}
      initialPage={'t2'}
      tabBarPosition="left"
      tabDirection="vertical"
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of first tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of second tab
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        Content of third tab
      </div>
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

自定义个数，超出界面宽度，多于5个标签

There are at most 5 tab panes in the visible area, click on the both sides of Tabs to scroll.

import { Tabs, WhiteSpace } from 'antd-mobile';
class Demo extends React.Component {
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);
  render() {
    const tabs = [
      { title: '1st Tab' },
      { title: '2nd Tab' },
      { title: '3rd Tab' },
      { title: '4th Tab' },
      { title: '5th Tab' },
      { title: '6th Tab' },
      { title: '7th Tab' },
      { title: '8th Tab' },
      { title: '9th Tab' },
    ];
    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
          {this.renderContent}
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API

Tabs

属性	说明	类型	默认值	必选
prefixCls	样式前缀	string	rmc-tabs	false
tabs	tab数据	Models.TabData[]		true
tabBarPosition	TabBar位置	'top' \| 'bottom' \| 'left' \| 'right'	top	false
renderTabBar	替换TabBar	((props: TabBarPropsType) => React.ReactNode) \| false		false
initialPage	初始化Tab, index or key	number \| string		false
page	当前Tab, index or key	number \| string		false
swipeable	是否可以滑动内容切换	boolean	true	false
useOnPan	使用跟手滚动	boolean	true	false
prerenderingSiblingsNumber	预加载两侧Tab数量	number	1	false
animated	是否开启切换动画	boolean	true	false
onChange	tab变化时触发	(tab: Models.TabData, index: number) => void		false
onTabClick	tab 被点击的回调	(tab: Models.TabData, index: number) => void		false
destroyInactiveTab	销毁超出范围Tab	boolean	false	false
distanceToChangeTab	滑动切换阈值(宽度比例)	number	0.3	false
usePaged	是否启用分页模式	boolean	true	false
tabDirection	Tab方向	'horizontal' \| 'vertical'	horizontal	false
tabBarUnderlineStyle	tabBar下划线样式	React.CSSProperties \| any		false
tabBarBackgroundColor	tabBar背景色	string		false
tabBarActiveTextColor	tabBar激活Tab文字颜色	string		false
tabBarInactiveTextColor	tabBar非激活Tab文字颜色	string		false
tabBarTextStyle	tabBar文字样式	React.CSSProperties \| any		false
renderTab	替换TabBar的Tab	(tab: Models.TabData) => React.ReactNode		false

Tabs.DefaultTabBar

属性	说明	类型	默认值	必选
goToTab	跳转Tab	(index: number) => boolean		true
tabs	tab数据	Models.TabData[]		true
activeTab	当前激活Tab索引	number		true
animated	是否使用动画	boolean		true
prefixCls	样式前缀	string	am-tabs-default-bar	false
renderTab	替换TabBar的Tab	(tab: Models.TabData) => React.ReactNode		false
page	Tab分页尺寸	number	5	false
onTabClick	tab 被点击的回调	(tab: Models.TabData, index: number) => void		false

Tabs标签页

Tabs 标签页

规则

代码演示

API

Tabs

Tabs.DefaultTabBar