Skip to content

Commit 88e7bbf

Browse files
cuilanxincuilanxin
authored
feat: 添加 Tabs 组件及文档 (#161)
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示
1 parent f87e12e commit 88e7bbf

File tree

9 files changed

+520
-1
lines changed

9 files changed

+520
-1
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,4 +299,12 @@ export const stackPageData: Routes[] = [
299299
description: '时间轴',
300300
},
301301
},
302+
{
303+
name: 'Tabs',
304+
component: require('./routes/Tabs').default,
305+
params: {
306+
title: 'Tabs 选项卡',
307+
description: 'Tabs 选项卡组件跨不同屏幕、数据集和其他交互的内容。',
308+
},
309+
},
302310
];

‎example/examples/src/routes/Tabs/index.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, View } from 'react-native';
3+
import Layout, { Container } from '../../Layout';
4+
import { Tabs, Icon, IconsName } from '@uiw/react-native';
5+
import { ComProps } from '../../routes';
6+
import { Text } from 'react-native-svg';
7+
8+
const { Header, Body, Card, Footer } = Layout;
9+
10+
export interface listItem {
11+
title: string | React.ReactElement | React.ReactNode,
12+
icon: IconsName | React.ReactElement | React.ReactNode,
13+
}
14+
export interface IndexProps extends ComProps { }
15+
export interface IndexState {
16+
flag1: string,
17+
flag: string,
18+
color1: string,
19+
}
20+
21+
export default class Index extends Component<IndexProps, IndexState> {
22+
constructor(props: IndexProps) {
23+
super(props)
24+
this.state = {
25+
flag: '喜欢',
26+
flag1: '喜欢',
27+
color1: '#f18700'
28+
}
29+
}
30+
onPress1 = (val: string) => {
31+
this.setState({flag: val})
32+
}
33+
onPress = (val: string) => {
34+
this.setState({flag1: val})
35+
}
36+
render() {
37+
const { route } = this.props;
38+
const description = route.params.description;
39+
const title = route.params.title;
40+
const { Item } = Tabs
41+
return (
42+
<Container>
43+
<Layout>
44+
<Header title={title} description={description} />
45+
<Body>
46+
<Tabs>
47+
<Item
48+
title={'喜欢'}
49+
icon='heart-on'
50+
style={{
51+
iconColor: this.state.flag === '喜欢'?this.state.color1:undefined,
52+
titleColor: this.state.flag === '喜欢'?this.state.color1:undefined
53+
}}
54+
border={this.state.flag === '喜欢'}
55+
onPress={this.onPress1}
56+
/>
57+
<Tabs.Item
58+
title={"关注"}
59+
style={{
60+
titleColor: this.state.flag === '关注'?this.state.color1:undefined
61+
}}
62+
icon={<Icon name='star-on' color={this.state.flag === '关注'?this.state.color1:"#fff"} size={24} />}
63+
border={this.state.flag === '关注'}
64+
onPress={this.onPress1}
65+
/>
66+
<Tabs.Item
67+
title={"信息"}
68+
icon='mail'
69+
style={{
70+
iconColor: this.state.flag === '信息'?this.state.color1:undefined,
71+
titleColor: this.state.flag === '信息'?this.state.color1:undefined
72+
}}
73+
border={this.state.flag === '信息'}
74+
onPress={this.onPress1}
75+
/>
76+
</Tabs>
77+
78+
<View style={styles.divider} />
79+
80+
<Tabs>
81+
<Tabs.Item
82+
title={'喜欢'}
83+
border={this.state.flag1 === '喜欢'}
84+
onPress={this.onPress}
85+
style={{
86+
titleColor: this.state.flag1 === '喜欢'?this.state.color1:undefined,
87+
borderColor: this.state.flag1 === '喜欢'?this.state.color1:undefined
88+
}}
89+
/>
90+
<Tabs.Item
91+
title={"关注"}
92+
border={this.state.flag1 === '关注'}
93+
onPress={this.onPress}
94+
style={{
95+
titleColor: this.state.flag1 === '关注'?this.state.color1:undefined,
96+
borderColor: this.state.flag1 === '关注'?this.state.color1:undefined
97+
}}
98+
/>
99+
<Tabs.Item
100+
title={"信息"}
101+
border={this.state.flag1 === '信息'}
102+
onPress={this.onPress}
103+
style={{
104+
titleColor: this.state.flag1 === '信息'?this.state.color1:undefined,
105+
borderColor: this.state.flag1 === '信息'?this.state.color1:undefined
106+
}}
107+
/>
108+
<Tabs.Item
109+
title={"我的"}
110+
border={this.state.flag1 === '我的'}
111+
onPress={this.onPress}
112+
style={{
113+
titleColor: this.state.flag1 === '我的'?this.state.color1:undefined,
114+
borderColor: this.state.flag1 === '我的'?this.state.color1:undefined
115+
}}
116+
/>
117+
<Tabs.Item
118+
title={"偏好"}
119+
border={this.state.flag1 === '偏好'}
120+
onPress={this.onPress}
121+
style={{
122+
titleColor: this.state.flag1 === '偏好'?this.state.color1:undefined,
123+
borderColor: this.state.flag1 === '偏好'?this.state.color1:undefined
124+
}}
125+
/>
126+
</Tabs>
127+
</Body>
128+
<Footer />
129+
</Layout>
130+
</Container>
131+
);
132+
}
133+
}
134+
135+
const styles = StyleSheet.create({
136+
card: {
137+
backgroundColor: '#fff',
138+
paddingLeft: 20,
139+
paddingRight: 20,
140+
},
141+
divider: {
142+
marginVertical: 10
143+
}
144+
});

‎packages/core/src/Tabs/README.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
Tabs 选项卡
2+
---
3+
4+
选项卡组件跨不同屏幕、数据集和其他交互的内容。
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment } from 'react';
10+
import { Tabs } from '@uiw/react-native';
11+
const { Item } = Tabs
12+
function Demo() {
13+
return (
14+
<Fragment>
15+
<Tabs>
16+
<Item
17+
title="喜欢"
18+
/>
19+
<Tabs.Item
20+
title="关注"
21+
/>
22+
<Tabs.Item
23+
title="信息"
24+
/>
25+
<Tabs.Item
26+
title="我的"
27+
/>
28+
<Tabs.Item
29+
title="偏好"
30+
/>
31+
</Tabs>
32+
</Fragment>
33+
);
34+
}
35+
```
36+
37+
## 使用 Icon
38+
39+
```jsx
40+
import { Fragment } from 'react';
41+
import { Rating, Icon } from '@uiw/react-native';
42+
function Demo() {
43+
return (
44+
<Fragment>
45+
<Tabs>
46+
<Tabs.Item
47+
title="喜欢"
48+
icon='heart-on'
49+
/>
50+
<Tabs.Item
51+
title="关注"
52+
icon={<Icon name='star-on' color="#fff" size={24} />}
53+
/>
54+
<Tabs.Item
55+
title="信息"
56+
icon='mail'
57+
/>
58+
</Tabs>
59+
</Fragment>
60+
);
61+
}
62+
```
63+
64+
## Tabs Props
65+
66+
```ts
67+
import { ViewStyle } from 'react-native';
68+
69+
export interface TabsProps {
70+
/** 子元素 */
71+
children?: Tabs.Item | Array<Tabs.Item>,
72+
/** 容器样式 */
73+
style?: ViewStyle
74+
}
75+
```
76+
77+
78+
## Tabs.Item Props
79+
80+
```ts
81+
import Icon, { IconsName } from '../Icon';
82+
83+
export type TabsItemIconTypes = IconsName | React.ReactElement | React.ReactNode | JSX.Element
84+
85+
/** 样式集合类型 */
86+
export interface TabsItemStyle {
87+
/** 宽度 */
88+
width?: number,
89+
/** 文字颜色 */
90+
titleColor?: string,
91+
/** 文字粗细 */
92+
titleFontWeight?: '100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900'|'bold'|'normal',
93+
/** 文字大小 */
94+
titleSize?: number,
95+
/** icon 颜色 */
96+
iconColor?: string,
97+
/** icon 大小 */
98+
iconSize?: number,
99+
/** border 宽度 */
100+
borderWidth?: number,
101+
/** border 颜色 */
102+
borderColor?: string,
103+
/** border 距离底部距离一般与 Tabs paddingBottom 相等 */
104+
borderBottom?: number,
105+
/** border 粗细 */
106+
borderHeight?: number
107+
}
108+
export interface TabsItemProps {
109+
/** 显示的文字 */
110+
title: string,
111+
/** 样式集合 */
112+
style?: TabsItemStyle,
113+
/**
114+
* 点击时触发
115+
* void
116+
* @param title type: string title 文字
117+
*/
118+
onPress?: (title: string) => void,
119+
/** 图标 */
120+
icon?: TabsItemIconTypes,
121+
/** 是否显示下边框 */
122+
border?: boolean
123+
}
124+
```

0 commit comments

Comments
 (0)