Tabs 标签页

定义／Definition

规则 / Rule

• 标签栏位于屏幕底部，并应该保证在应用内任何位置都可用。标签栏展示图标和文字内容，每一项均保持等宽。当用户选中某个标签时，该标签呈现适当的高亮状态。

• 一个标签栏一次最多可承载5个标签，最少显示2个

• 你可以在标签上加上红底白字，显示数字或者省略号的小气泡（badge），用以展示与应用相关的信息。

• 你可以使用标签栏来切换对同一组数据的不同视图模式，或者整体功能下不同的子任务。

• 即使标签当前不可用，也不要把它从标签栏中删除。如果某个标签所代表的部分功能在当前场景下不可用，可以将它标识为不可用状态，但不要删除它。让某些标签时而出现时而隐藏，会让用户觉得应用UI不稳定而且难以预测。最好的解决方式是确保每个标签都可用，并解释当前标签不可用的原因。

代码演示

线性型选项卡

import { Tabs, WhiteSpace } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log(key);
}
let TabExample = React.createClass({
  render() {
    return (
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
          <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
          <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
        </Tabs>
        <WhiteSpace />
      </div>
    );
  },
});
ReactDOM.render(<TabExample />, mountNode);

胶囊型选项卡

import { Tabs, WhiteSpace } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log(key);
}
let TabExample = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace />
        <Tabs defaultActiveKey="1" type="capsule" onChange={callback}>
          <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
          <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
          <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
        </Tabs>
        <WhiteSpace />
      </div>
    );
  },
});
ReactDOM.render(<TabExample />, mountNode);

APP型选项卡

import { Tabs, Icon, WhiteSpace } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log(key);
}
let TabExample = React.createClass({
  render() {
    return (
      <div>
        <Tabs type="tabbar" defaultActiveKey="1" onChange={callback}>
          <TabPane tab={<span><Icon type="home" />首页</span>} key="1">选项首页内容</TabPane>
          <TabPane tab={<span><Icon type="team" />好友</span>} key="2">选项好友内容</TabPane>
          <TabPane tab={<span><Icon type="setting" />设置</span>} key="3">选项设置的内容</TabPane>
        </Tabs>
        <WhiteSpace />
        <Tabs type="tabbar" mode="dark" defaultActiveKey="2" onChange={callback}>
          <TabPane tab={<span><Icon type="home" />首页</span>} key="1">选项首页内容</TabPane>
          <TabPane tab={<span><Icon type="team" />好友</span>} key="2">选项好友内容</TabPane>
          <TabPane tab={<span><Icon type="setting" />设置</span>} key="3">选项设置的内容</TabPane>
        </Tabs>
      </div>
    );
  },
});
ReactDOM.render(<TabExample />, mountNode);

内容区域无动画

import { Tabs, WhiteSpace, Icon } from 'antd-mobile';
const TabPane = Tabs.TabPane;
function callback(key) {
  console.log(key);
}
let TabExample = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace />
        <Tabs defaultActiveKey="1" animation={false} onChange={callback}>
          <TabPane tab={<span><Icon type="loading" />选项卡一</span>} key="1">选项卡一内容</TabPane>
          <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
          <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
        </Tabs>
        <WhiteSpace />
      </div>
    );
  },
});
ReactDOM.render(<TabExample />, mountNode);

API

Tabs

Tabs.TabPane