Tabs 标签页

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

规则

  • 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。

  • 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

代码演示

选项卡

多用于页面的内容区块，起着控制小范围内的大块内容的分组和隐藏，起着保持界面整洁的作用。 

  1. import { Tabs, WhiteSpace } from 'antd-mobile';
  3. const TabPane = Tabs.TabPane;
  5. function callback(key) {
  6.   console.log(key);
  7. }
  9. const TabExample = React.createClass({
  10.   render() {
  11.     return (
  12.       <div>
  13.         <Tabs defaultActiveKey="1" onChange={callback}>
  14.           <TabPane tab="选项卡一" key="1">
  15.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  16.               选项卡一内容
  17.             </div>
  18.           </TabPane>
  19.           <TabPane tab="选项卡二" key="2">
  20.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  21.               选项卡二内容
  22.             </div>
  23.           </TabPane>
  24.           <TabPane tab="选项卡三" key="3">
  25.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  26.               选项卡三内容
  27.             </div>
  28.           </TabPane>
  29.         </Tabs>
  30.         <WhiteSpace />
  31.       </div>
  32.     );
  33.   },
  34. });
  36. ReactDOM.render(<TabExample />, mountNode);

无动画

禁用切换动画效果 

  1. import { Tabs, WhiteSpace } from 'antd-mobile';
  3. const TabPane = Tabs.TabPane;
  5. function callback(key) {
  6.   console.log(key);
  7. }
  9. const TabExample = React.createClass({
  10.   render() {
  11.     return (
  12.       <div>
  13.         <WhiteSpace />
  14.         <Tabs defaultActiveKey="1" animated={false} onChange={callback}>
  15.           <TabPane tab="选项卡一" key="1">
  16.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  17.                选项卡一内容
  18.             </div>
  19.           </TabPane>
  20.           <TabPane tab="选项卡二" key="2">
  21.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  22.                选项卡二内容
  23.             </div>
  24.           </TabPane>
  25.           <TabPane tab="选项卡三" key="3">
  26.             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
  27.                选项卡三内容
  28.             </div>
  29.           </TabPane>
  30.         </Tabs>
  31.         <WhiteSpace />
  32.       </div>
  33.     );
  34.   },
  35. });
  37. ReactDOM.render(<TabExample />, mountNode);

Tabs标签页 - 图1

API ( 适用平台：WEB、React-Native )

Tabs

参数说明类型默认值
activeKey当前激活 tab 面板的 keyString无
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeyString第一个面板
onChange切换面板的回调(key: string): void无
onTabClicktab 被点击的回调(key: string): void无
animated是否动画booleantrue
swipeable是否可以滑动 tab 内容进行切换booleantrue
tabBarPositiontab 位置 top/bottomstringtop
destroyInactiveTabPane是否销毁掉不活动的 tabPane (优化使用)booleanfalse
underlineColor(react-native only)线条颜色string#ddd
activeUnderlineColor(react-native only)选中线条颜色string#108ee9
textColor(react-native only)文字颜色string#000
activeTextColor(react-native only)选中文字颜色string#108ee9

Tabs.TabPane

参数说明类型默认值
key对应 activeKeyString无
tab选项卡头显示文字React.Element or String无