Socket
Socket
Sign inDemoInstall

@uiw/react-steps

Package Overview
Dependencies
4
Maintainers
2
Versions
172
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-steps


Version published
Weekly downloads
246
increased by28.8%
Maintainers
2
Install size
3.41 MB
Created
Weekly downloads
 

Readme

Source

Steps 步骤条

Buy me a coffee Open in unpkg NPM Downloads npm version

引导用户按照流程完成任务的导航条。当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。

import { Steps } from 'uiw';
// or
import Steps from '@uiw/react-steps';

基本用法

简单的步骤条。

import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
  return (
    <Steps current={1} style={{ padding:"20px 0" }}>
      <Steps.Step title="步骤一" description="这里是步骤一的说明,可以很长很长哦。这里是步骤一的说明,可以很长很长哦。这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤二" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤三" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤四" description="这里是步骤一的说明,可以很长很长哦。" />
    </Steps>
  )
}

没有详情介绍

简单的步骤条。

import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
  return (
    <Steps current={1} style={{padding:"20px 0"}}>
      <Steps.Step title="步骤一" />
      <Steps.Step title="步骤二" />
      <Steps.Step title="步骤三" />
      <Steps.Step title="步骤四" />
    </Steps>
  )
}

带图标的步骤条

通过设置 Steps.Stepicon 属性,可以启用自定义图标。

import React from 'react';
import { Steps, Icon } from 'uiw';

export default function Demo() {
  return (
    <Steps current={1} style={{padding:"20px 0"}}>
      <Steps.Step icon={<Icon type="user"/>} title="注册" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step icon={<Icon type="picasa" spin={true} color="red" />} title="上传头像" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step icon="message" title="验证邮箱" description="这里是步骤一的说明,可以很长很长哦。" />
    </Steps>
  )
}

步骤运行错误

使用 Stepsstatus 属性来指定当前步骤的状态。

import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
  return (
    <Steps current={2} status="error" style={{padding:"20px 0"}}>
      <Steps.Step title="步骤一" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤二" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤三" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤四" description="这里是步骤一的说明,可以很长很长哦。" />
    </Steps>
  )
}

点状步骤条

包含步骤点的进度条。

import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
  return (
    <Steps progressDot status="error" current={2} style={{padding:"20px 0"}}>
      <Steps.Step title="步骤一" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤二" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤三" description="这里是步骤一的说明,可以很长很长哦。" />
      <Steps.Step title="步骤四" description="这里是步骤一的说明,可以很长很长哦。" />
    </Steps>
  )
}

步骤切换

通常配合内容及按钮使用,表示一个流程的处理进度。

import React from 'react';
import { Steps, Button, Notify } from 'uiw';

const conStyle = { minHeight: 200, backgroundColor: '#fafafa',textAlign: 'center', borderRadius: 6, paddingTop: 80, marginTop: 15 }
const steps = [
  {
    title: '第一步',
    content: '注册一个账号',
  }, {
    title: '第二步',
    content: '填写个人信息。',
  }, {
    title: '第三步',
    content: '验证邮箱',
  }
]

export default function Demo() {
  const [current, setCurrent] = React.useState(0);
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => <Steps.Step key={item.title} title={item.title} />)}
        </Steps>
        <div style={conStyle}>{steps[current].content}</div>
        <div style={{marginTop: 20}}>
          {current < steps.length - 1 && (
            <Button type="primary" size="small" onClick={() => setCurrent(current + 1)}>下一步</Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" size="small" onClick={() => Notify.open({ description: '处理完成!' })}>完成</Button>
          )}
          {current > 0 && (
            <Button size="small" style={{ marginLeft: 8 }} onClick={() => setCurrent(current - 1)}>
              上一步
            </Button>
          )}
        </div>
      </div>
    );
}

竖直方向的步骤条

简单的竖直方向的步骤条。

import React from 'react';
import { Steps, Row, Col, Icon } from 'uiw';

export default function Demo() {
  return (
    <Row gutter={20}>
      <Col>
        <Steps current={1} direction="vertical" style={{ padding: '20px 0' }}>
          <Steps.Step title="已完成" description="这里是该步骤的描述信息" />
          <Steps.Step title="进行中" description="这里是该步骤的描述信息" />
          <Steps.Step status="error" title="待进行" description="这里是该步骤的描述信息" />
          <Steps.Step title="待进行" description="这里是该步骤的描述信息" />
        </Steps>
      </Col>
      <Col>
        <Steps direction="vertical" progressDot status="error" current={2} style={{ padding: '20px 0' }}>
          <Steps.Step title="步骤一" description="这里是步骤一的说明,可以很长很长哦。" />
          <Steps.Step title="步骤二" description="这里是步骤一的说明,可以很长很长哦。" />
          <Steps.Step title="步骤三" description="这里是步骤一的说明,可以很长很长哦。" />
          <Steps.Step icon={<Icon type="user"/>} title="步骤四" description="这里是步骤一的说明,可以很长很长哦。" />
        </Steps>
      </Col>
    </Row>
  )
}

Props

Steps

参数说明类型默认值
current指定当前步骤,从 0 开始记数。Number0
status当前步骤的状态,可选值为waitprocessfinisherrorStringprocess
direction指定步骤条方向,支持水平verticalhorizontalhorizontal
progressDot点状步骤条horizontal

Steps.Step

参数说明类型默认值
status指定状态。当不配置该属性时,会使用 Steps 的 current 来自动指定状态。可选:wait process finish errorStringwait
title指定每个步骤标题String/ReactNode-
description步骤的详情描述,可选String/ReactNode-
icon步骤的图标,字符串类型从<Icon/>组件中找,可选String/ReactNode-

Keywords

FAQs

Last updated on 29 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc