@uiw/react-native
Version:
UIW for React Native
64 lines (51 loc) • 1.83 kB
Markdown
Steps 步骤条
---
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。
```jsx mdx:preview&background=
import React from 'react';
import { Steps } from '@uiw/react-native';
function Demo() {
return (
<Steps
items={[
{ 'title': '步骤一', 'desc': '这里是额外的信息,这里是额外的信息'},
{ 'title': '步骤二', 'desc': '这里是额外的信息,这里是额'},
{ 'title': '步骤三', 'desc': '这里是'}
]}
current={1}
/>
);
}
export default Demo;
```
```jsx mdx:preview&background=
import React from 'react';
import { Steps } from '@uiw/react-native';
function Demo() {
return (
<Steps
items={[
{ 'title': '步骤一', 'desc': '当前服务正在申请中',status:'success'},
{ 'title': '步骤二', 'desc': '当前服务正在审批中',status:'success'},
{ 'title': '步骤三', 'desc': '当前服务审批失败',status:'error'}
]}
current={0}
/>
);
}
export default Demo;
```
| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | ------------ | ------- | ------- |
| `items` |步骤条数据列表 | Item[] | - |
| `current` | 当前步骤索引值 | Number | 0 |
| `onChange` | 点击时间轴 | (value: number) => void; | - |
| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | ------------ | ------- | ------- |
| `title` |步骤标题 | Item[] | - |
| `desc` | 步骤说明文字 | String | - |
| `status` | 步骤的状态,'success' 或 'error' | String | - |