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={{
  16.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  17.             }}>
  18.                选项卡一内容
  19.             </div>
  20.           </TabPane>
  21.           <TabPane tab="选项卡二" key="2">
  22.             <div style={{
  23.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  24.             }}>
  25.                选项卡二内容
  26.             </div>
  27.           </TabPane>
  28.           <TabPane tab="选项卡三" key="3">
  29.             <div style={{
  30.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  31.             }}>
  32.                选项卡三内容
  33.             </div>
  34.           </TabPane>
  35.         </Tabs>
  36.         <WhiteSpace />
  37.       </div>
  38.     );
  39.   },
  40. });
  42. 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={{
  17.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  18.             }}>
  19.                选项卡一内容
  20.             </div>
  21.           </TabPane>
  22.           <TabPane tab="选项卡二" key="2">
  23.             <div style={{
  24.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  25.             }}>
  26.                选项卡二内容
  27.             </div>
  28.           </TabPane>
  29.           <TabPane tab="选项卡三" key="3">
  30.             <div style={{
  31.               display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100,
  32.             }}>
  33.                选项卡三内容
  34.             </div>
  35.           </TabPane>
  36.         </Tabs>
  37.         <WhiteSpace />
  38.       </div>
  39.     );
  40.   },
  41. });
  43. ReactDOM.render(<TabExample />, mountNode);

Tabs标签页 - 图1

API

Tabs

参数说明类型默认值
activeKey当前激活 tab 面板的 keyString无
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeyString第一个面板
onChange切换面板的回调Function无
onTabClicktab 被点击的回调Function无
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无