TabBar
标签栏。TabBar UI 提供与WeLink规范一致的菜单选项视图。
参数说明
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| active | bool | false | 选择状态 |
| onClick | func | 点击回调事件 | |
| icon | component | 标签图标 | |
| label | string | 标签名称 |
效果示例
HTML
import React from 'react';
import {
Tab,
TabBody,
TabBar,
TabBarItem,
Article,
Button
} from '@wecode/react-weui';
export default class TabBarDemo extends React.Component {
state = {
tab: 0,
tabSize: 5
};
render() {
const { tabSize, tab } = this.state;
return (
<Tab>
<TabBody>
<Article style={{ display: tab === 0 ? null : 'none' }}>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>
<Button type="warn" onClick={e => this.setState({ tabSize: 2 })}>切换2个标签页</Button>
<Button onClick={e => this.setState({ tabSize: 3 })}>切换3个标签页</Button>
<Button type="default" onClick={e => this.setState({ tabSize: 4 })}>切换4个标签页</Button>
<Button type="warn" onClick={e => this.setState({ tabSize: 5 })}>切换5个标签页</Button>
</p>
</section>
</section>
</Article>
<Article style={{ display: tab === 1 ? null : 'none' }}>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>2.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: tab === 2 ? null : 'none' }}>
<h1>Page 3</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>3.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: tab === 3 ? null : 'none' }}>
<h1>Page 4</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>4.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: tab === 4 ? null : 'none' }}>
<h1>Page 5</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>5.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</TabBody>
{ tabSize === 2
&& (
<TabBar>
<TabBarItem
active={tab === 0}
onClick={e => this.setState({ tab: 0 })}
icon={<i className={`icon-tab icon-tab-message${tab === 0 ? 'Current' : ''}`} />}
label="消息"
/>
<TabBarItem
active={tab === 1}
onClick={e => this.setState({ tab: 1 })}
icon={<i className={`icon-tab icon-tab-email${tab === 1 ? 'Current' : ''}`} />}
label="邮件"
/>
</TabBar>
)
}
{tabSize === 3
&& (
<TabBar>
<TabBarItem
active={tab === 0}
onClick={e => this.setState({ tab: 0 })}
icon={<i className={`icon-tab icon-tab-message${tab === 0 ? 'Current' : ''}`} />}
label="消息"
/>
<TabBarItem
active={tab === 1}
onClick={e => this.setState({ tab: 1 })}
icon={<i className={`icon-tab icon-tab-email${tab === 1 ? 'Current' : ''}`} />}
label="邮件"
/>
<TabBarItem
active={tab === 2}
onClick={e => this.setState({ tab: 2 })}
icon={<i className={`icon-tab icon-tab-contact${tab === 2 ? 'Current' : ''}`} />}
label="通讯录"
/>
</TabBar>
)
}
{ tabSize === 4
&& (
<TabBar>
<TabBarItem
active={tab === 0}
onClick={e => this.setState({ tab: 0 })}
icon={<i className={`icon-tab icon-tab-message${tab === 0 ? 'Current' : ''}`} />}
label="消息"
/>
<TabBarItem
active={tab === 1}
onClick={e => this.setState({ tab: 1 })}
icon={<i className={`icon-tab icon-tab-email${tab === 1 ? 'Current' : ''}`} />}
label="邮件"
/>
<TabBarItem
active={tab === 2}
onClick={e => this.setState({ tab: 2 })}
icon={<i className={`icon-tab icon-tab-contact${tab === 2 ? 'Current' : ''}`} />}
label="通讯录"
/>
<TabBarItem
active={tab === 3}
onClick={e => this.setState({ tab: 3 })}
icon={<i className={`icon-tab icon-tab-business${tab === 3 ? 'Current' : ''}`} />}
label="业务"
/>
</TabBar>
)
}
{ tabSize === 5
&& (
<TabBar>
<TabBarItem
active={tab === 0}
onClick={e => this.setState({ tab: 0 })}
icon={<i className={`icon-tab icon-tab-message${tab === 0 ? 'Current' : ''}`} />}
label="消息"
/>
<TabBarItem
active={tab === 1}
onClick={e => this.setState({ tab: 1 })}
icon={<i className={`icon-tab icon-tab-email${tab === 1 ? 'Current' : ''}`} />}
label="邮件"
/>
<TabBarItem
active={tab === 2}
onClick={e => this.setState({ tab: 2 })}
icon={<i className={`icon-tab icon-tab-contact${tab === 2 ? 'Current' : ''}`} />}
label="通讯录"
/>
<TabBarItem
active={tab === 3}
onClick={e => this.setState({ tab: 3 })}
icon={<i className={`icon-tab icon-tab-business${tab === 3 ? 'Current' : ''}`} />}
label="业务"
/>
<TabBarItem
active={tab === 4}
onClick={e => this.setState({ tab: 4 })}
icon={<i className={`icon-tab icon-tab-knowleage${tab === 4 ? 'Current' : ''}`} />}
label="知识"
/>
</TabBar>
)
}
</Tab>
);
}
}