TabBar 标签栏

基本用法

import { Icon, TabBar, Cell, Button } from 'zarm';
const TabIcon = Icon.createFromIconfont('//at.alicdn.com/t/font_1340918_4p9b5skcr79.js');
class Demo extends React.Component {
  state = {
    activeKey: 'home',
    visible: true
  };
  render() {
    const { visible, activeKey } = this.state;
    return (
      <>
        <Cell
          description={
            <Button
              size="xs"
              onClick={() => {
                this.setState({visible: !visible})
              }}
            >
              { visible ? '隐藏' : '展示'}
            </Button>
          }
        >
         隐藏 | 展示
        </Cell>
        <TabBar
          visible={visible}
          activeKey={activeKey}
          onChange={(value) => this.setState({activeKey: value})}>
          <TabBar.Item
            itemKey="home"
            title="主页"
            icon={<TabIcon type="home" />}
          />
          <TabBar.Item
            itemKey="found"
            title="保险"
            icon={<TabIcon type="insurance" />}
            badge={{ shape: 'circle', text: '3' }}
          />
          <TabBar.Item
            itemKey="me"
            title="我的"
            icon={<TabIcon type="user" />}
            badge={{ shape: 'dot' }}
          />
        </TabBar>
      </>  
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

API

TabBar

TabBar.Item