Tab

标签页组件。

Install

1. npm install beeshell

Usage

引入方式

全部引入

1. import { Tab } from 'beeshell';

单独引入

1. import Tab from 'beeshell/components/Tab';

Examples

image

Code

1. import { Tab } from 'beeshell';

3. class App extends React.Component {
4. constructor(props) {
5. super(props);
6. this.state = {
7. value: 1,
8. };
9. }
10. render() {
11. const options = [
12. {
13. value: 1,
14. label: '全部',
15. },
16. {
17. value: 2,
18. label: '已完成',
19. },
20. {
21. value: 3,
22. label: '未完成',
23. }
24. ];

26. return (
27. <View>
28. <Tab
29. value={this.state.value}
30. options={options}
31. onChange={value => this.setState({ value })}
32. />
33. <View>
34. <Text>
35. {this.state.value}
36. </Text>
37. </View>
38. </View>
39. );
40. }
41. }

Props

Name Type Required Default Description
threshold Number false 4 阈值，超过该值则横向滚动
options Array true [] 数据源，数组中项为对象 {label: 'xx', value: 'zz'}
label（options 中的对象的属性） String/ReactElement true null 数据源数组中的对象的属性，用于展示选项，可以是字符串或者 React 组件
value（options 中的对象的属性） Any true null 数据源数组中的对象的属性，通过该属性判读是否选中该项
value Any false null 对应数据源对象的 value 值
onChange Function false null 状态切换时的回调