Tabs 标签页

规则

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

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

代码演示

基本用法

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log('onChange', key);
}
function handleTabClick(key) {
  console.log('onTabClick', key);
}
const TabExample = () => (
  <div>
    <Tabs defaultActiveKey="2" onChange={callback} onTabClick={handleTabClick}>
      <TabPane tab={<Badge text={'3'}>First Tab</Badge>} key="1">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          Content of First Tab
        </div>
      </TabPane>
      <TabPane tab={<Badge text={'今日(20)'}>Second Tab</Badge>} key="2">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          Content of Second Tab
        </div>
      </TabPane>
      <TabPane tab={<Badge dot>Third Tab</Badge>} key="3">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          Content of Third Tab
        </div>
      </TabPane>
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

无动画

import { Tabs, WhiteSpace } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log('onChange', key);
}
function handleTabClick(key) {
  console.log('onTabClick', key);
}
const TabExample = () => (
  <div>
    <WhiteSpace />
    <Tabs defaultActiveKey="3" animated={false} onChange={callback} onTabClick={handleTabClick}>
      <TabPane tab="First tab" key="1">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
           Content of First Tab
        </div>
      </TabPane>
      <TabPane tab="Second Tab" key="2">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
           Content of Second Tab
        </div>
      </TabPane>
      <TabPane tab="Third Tab" key="3">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
           Content of Third Tab
        </div>
      </TabPane>
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

超出界面宽度，多于5个标签

import { Tabs, WhiteSpace } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log('onChange', key);
}
function handleTabClick(key) {
  console.log('onTabClick', key);
}
const makeTabPane = key => (
  <TabPane tab={`Option${key}`} key={key}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
      {`content of option${key}`}
    </div>
  </TabPane>
);
const makeMultiTabPane = (count) => {
  const result = [];
  for (let i = 0; i <= count; i++) {
    result.push(makeTabPane(i));
  }
  return result;
};
const TabExample = () => (
  <div>
    <Tabs defaultActiveKey="8" onChange={callback} pageSize={5} onTabClick={handleTabClick}>
      {makeMultiTabPane(11)}
    </Tabs>
    <WhiteSpace />
  </div>
);
ReactDOM.render(<TabExample />, mountNode);

API

Tabs

Tabs.TabPane