uiwjs · jaywcjlove · Aug 5, 2021 · Aug 3, 2021 · Aug 5, 2021 · Aug 5, 2021
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -275,4 +275,12 @@ export const stackPageData: Routes[] = [
       description: '折叠展开ExpandableSection',
     },
   },
+  {
+    name: 'Steps',
+    component: require('./routes/Steps').default,
+    params: {
+      title: 'Steps 步骤条',
+      description: '步骤条',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/Steps/index.tsx b/example/examples/src/routes/Steps/index.tsx
@@ -0,0 +1,62 @@
+import React, {Component, useState} from 'react';
+import {View, Text} from 'react-native';
+import {ComProps} from '../../routes';
+import Layout, {Container} from '../../Layout';
+import {Steps, WingBlank, Button} from '@uiw/react-native';
+
+const {Header, Body, Card} = Layout;
+
+interface StepsViewProps extends ComProps {}
+
+export default (props: StepsViewProps) => {
+  const { route } = props;
+  const [current, setCurrent] = useState<number>(1);
+  const item = [
+    { 'title': '步骤一', 'desc': '这里是额外的信息，这里是额外的信息'},
+    { 'title': '步骤二', 'desc': '这里是额外的信息,这里是额'},
+    { 'title': '步骤三', 'desc': '这里是'}
+  ]
+  const item2 = [
+    { 'title': '步骤一', 'desc': '这里是额外的信息，这里是额外的信息', status: 'success'},
+    { 'title': '步骤二', 'desc': '这里是额外的信息,这里是额', status: 'success'},
+    { 'title': '步骤三', 'desc': '这里是', status: 'error'}
+  ]
+
+  const onBtnPress = () => {
+    let index = current + 1;
+    if (index > item.length - 1) {
+      index = 0;
+    }
+    setCurrent(index);
+  }
+
+  const onChange = (index: number) => {
+    setCurrent(index);
+  }
+
+  return (
+    <Container>
+      <Header title={route.params.title} description={route.params.description} />
+      <Body>
+        <Card title="基础用法">
+          <WingBlank>
+            <Steps
+              items={item}
+              current={current}
+              // onChange={onChange}
+            />
+          </WingBlank>
+          <Button style={{ marginLeft: 20, marginRight: 20 }} onPress={onBtnPress}>下一步</Button>
+        </Card>
+        <Card title="步骤状态">
+          <WingBlank>
+            <Steps
+              items={item2}
+              current={2}
+            />
+          </WingBlank>
+        </Card>
+      </Body>
+    </Container>
+  )
+}
diff --git a/packages/core/src/Steps/README.md b/packages/core/src/Steps/README.md
@@ -0,0 +1,38 @@
+Steps 步骤条
+---
+
+## 基础示例
+
+```jsx
+import { Steps } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <Steps
+      items={[
+        { 'title': '步骤一', 'desc': '这里是额外的信息，这里是额外的信息'},
+        { 'title': '步骤二', 'desc': '这里是额外的信息,这里是额'},
+        { 'title': '步骤三', 'desc': '这里是'}
+      ]}
+      current={1}
+    />
+  );
+}
+```
+
+### props
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `items`           |步骤条数据列表      | Item[] | - |
+| `current`            | 当前步骤索引值  | Number | 0 |
+| `onChange`           | 点击时间轴     | (value: number) => void;    | - |
+
+
+### Item[]
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `title`           |步骤标题      | Item[] | - |
+| `desc`            | 步骤说明文字  | Number | 0 |
+| `status`           | 步骤的状态，'success' 或 'error' | String  | - |
diff --git a/packages/core/src/Steps/index.md b/packages/core/src/Steps/index.md
@@ -0,0 +1,28 @@
+### 步骤条组件
+
+```
+  <Steps
+    items={[
+      { 'title': '步骤一', 'desc': '这里是额外的信息，这里是额外的信息'},
+      { 'title': '步骤二', 'desc': '这里是额外的信息,这里是额'},
+      { 'title': '步骤三', 'desc': '这里是'}
+    ]}
+    current={1}
+  />
+```
+### props
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `items`           |步骤条数据列表      | Item[] | - |
+| `current`            | 当前步骤索引值  | Number | 0 |
+| `onChange`           | 点击时间轴     | (value: number) => void;    | - |
+
+
+### Item[]
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `title`           |步骤标题      | Item[] | - |
+| `desc`            | 步骤说明文字  | Number | 0 |
+| `status`           | 步骤的状态，'success' 或 'error' | String  | - |
diff --git a/packages/core/src/Steps/index.tsx b/packages/core/src/Steps/index.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {Icon} from '@uiw/react-native';
+
+type statusType = 'success' | 'error' | string;
+
+export interface StepsItemsProps {
+  title?: string;
+  desc?: string;
+  status?: statusType;
+}
+
+export interface StepsProps {
+  items: StepsItemsProps[];
+  current?: number;
+  onChange?: (value: number) => void;
+}
+
+export default (props: StepsProps) => {
+  const {
+    items = [],
+    current = 0,
+    onChange
+  } = props;
+
+  const onStepsPress = (index: number) => {
+    // onChange?.(index);
+    onChange && onChange(current);
+  }
+
+  return (
+    <View style={styles.steps}>
+      {items.map((item, index) => (
+        <TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
+          <View style={styles.wrap}>
+            {index !== 0 && <View style={styles.leftLine}></View>}
+            <View style={[styles.circular, {
+              backgroundColor: current >= index && !item?.status ? '#008EF0' : '#e5e5e5',
+            }]}>
+              {item?.status === 'error' && <Icon name="circle-close" size={22} fill="#dc3545" />}
+              {item?.status === 'success' && <Icon name="circle-check" size={22} fill="#008EF0" />}
+              {!item?.status && <Text style={{
+                color: current >= index ? '#fff' : '#333',
+              }}>{index + 1}</Text>}
+            </View>
+            {index < items.length - 1 && <View style={styles.rightLine}></View>}
+          </View>
+          <Text>{item.title}</Text>
+          <Text style={styles.desc}>{item.desc}</Text>
+        </TouchableOpacity>
+      ))} 
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  steps: {
+    flexDirection: 'row',
+    paddingTop: 10,
+    paddingBottom: 10
+  },
+  item: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center' 
+  },
+  wrap: {
+    position: 'relative',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 10
+  },
+  leftLine: {
+    backgroundColor: '#ccc',
+    position: 'absolute',
+    width: '50%',
+    top: '50%',
+    height: 1,
+    left: '0%'
+  },
+  rightLine: {
+    backgroundColor: '#ccc',
+    position: 'absolute',
+    width: "50%",
+    top: '50%',
+    height: 1,
+    right: '0%'
+
+  },
+  circular: {
+    width: 25,
+    height: 25,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 20,
+    position: 'relative',
+    zIndex: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  desc: {
+    color: '#ccc',
+    fontSize: 12,
+    textAlign: 'center',
+    paddingLeft: 5,
+    paddingRight: 5,
+    marginTop: 10,
+    lineHeight: 18
+  }
+});
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -60,6 +60,8 @@ export { default as SelectCascader } from './SelectCascader';
 export * from './SelectCascader';
 export { default as ExpandableSection } from './ExpandableSection';
 export * from './ExpandableSection';
+export { default as Steps } from './Steps';
+export * from './Steps';
 
 /**
  * Typography

diff --git a/website/src/component/Footer/index.module.less b/website/src/component/Footer/index.module.less
@@ -7,7 +7,7 @@
   font-size: 16px;
   max-width: 1248px;
   margin: 0 auto;
-  padding: 64px 32px 50px;
+  padding: 64px 32px 40px;
   label {
     padding: 8px 0;
     display: flex;