Step步骤条
进度条适用于提示用户当前所处的任务进度 from 0.15.0
代码演示#
// 基础用法
<Step current={2}>
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
</Step>
// 带数字
<Step number>
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
</Step>
// 自定义图标
<Step number>
<Step.Item label="节点名称" icon={<Icon type="heart" />} />
<Step.Item label="节点名称" icon={<Image source={...} />} color="#ff571a" />
<Step.Item label="节点名称" icon={<Image source={...} />} color="#ff4040" />
</Step>示例代码与效果
import React from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import {
FontSize,
Icon,
Step,
theme,
} from '@souche-ui/srn-ui';
class StepExample extends React.Component {
static navigation = {
left: {
onPress: function(emitter) {
NavHelper.pop();
}
},
title: {
text: 'Step 步骤条'
}
};
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>普通用法</Text>
<View style={styles.item}>
<Step current={2}>
<Step.Item label="节点名称" />
<Step.Item label="节点名称节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
</Step>
</View>
<Text style={styles.title}>四种状态</Text>
<View style={styles.item}>
<Step current={2}>
<Step.Item label="Success" status="success" />
<Step.Item label="Process" status="process" />
<Step.Item label="Error" status="error" />
<Step.Item label="Wait" status="wait" />
<Step.Item label="节点名称" />
</Step>
</View>
<Text style={styles.title}>数字节点样式</Text>
<View style={styles.item}>
<Step current={2} number>
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
</Step>
</View>
<Text style={styles.title}>自定义样式</Text>
<View style={styles.item}>
<Step current={1} number>
<Step.Item
label="节点名称"
icon={<Icon type="heart" color={theme('color_white')} size={10} />}
borderColor={'#ac59ff'}
color={'#ac59ff'}
/>
<Step.Item
label="节点名称"
icon={<Icon type="visual" color={theme('color_white')} size={10} />}
borderColor={'#4da6ff'}
color={'#4da6ff'}
/>
<Step.Item label="节点名称" />
</Step>
</View>
<Text style={styles.title}>固定连接线长度</Text>
<View style={styles.item}>
<Step current={3} lineLength={48}>
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
<Step.Item label="节点名称" />
</Step>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
color: theme('color_text_caption'),
fontSize: FontSize.P2,
marginVertical: 8,
paddingHorizontal: 16,
},
item: {
paddingVertical: 10,
backgroundColor: theme('color_white'),
},
});
export default StepExample;
API#
Step#
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| current | 当前位置 | number | - | 0 |
| status | 当前位置的状态 | string | success | process | error | wait | process |
| number | 图标位置是否显示数字 | boolean | - | false |
| style | 自定义样式 | 同 View | - | - |
| labelStyle | 自定义节点文字样式 | 同 Text | - | - |
| lineLength | 指定连接线长度，如果指定数值且总宽度超过容器宽度，可以通过手势滚动内容 from 0.18.0 | number | - | - |
Step.Item#
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| status | 状态 | string | success | process | error | wait | 由 Step 的 current 属性值决定 |
| label | 文字，必选 | string | - | - |
| icon | 自定义图标 | React.Element | - | - |
| borderColor | 图标边框颜色 | string | number | - | - |
| color | 图标背景颜色 | string | number | - | transparent |