import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps current={1} onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description." /> <Steps.Step title="In Progress" description="This is a description." /> <Steps.Step title="Waiting" description="This is a description." /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps type="basic" current={1} onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description" /> <Steps.Step title="In Progress" description="This is a description" /> <Steps.Step title="Waiting" description="This is a description" /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <div style={{ display: 'flex', justifyContent: 'center' }}> <Steps type="nav" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}> <Steps.Step title="Register an account" /> <Steps.Step title="There is a lot of text in this project" /> <Steps.Step title="Product Usage" /> <Steps.Step title="Looking forward to trying out features" /> </Steps> </div> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps type="basic" size="small" current={1} onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description" /> <Steps.Step title="In Progress" description="This is a description" /> <Steps.Step title="Waiting" description="This is a description" /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <div style={{ display: 'flex', justifyContent: 'center' }}> <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}> <Steps.Step title="Register an account" /> <Steps.Step title="There is a lot of text in this project" /> <Steps.Step title="Product Usage" /> <Steps.Step title="Looking forward to trying out features" /> </Steps> </div> );

import React from 'react'; import { Steps, Button } from '@douyinfe/semi-ui'; class App extends React.Component { constructor(props) { super(props); this.state = { current: 0, }; } next() { const current = this.state.current + 1; this.setState({ current }); } prev() { const current = this.state.current - 1; this.setState({ current }); } render() { const { current } = this.state; const { Step } = Steps; const steps = [ { title: 'First', content: 'First-content', }, { title: 'Second', content: 'Second-content', }, { title: 'Last', content: 'Last-content', }, ]; return ( <div> <Steps type="basic" current={current} onChange={(i)=>console.log(i)}> {steps.map(item => ( <Step key={item.title} title={item.title} /> ))} </Steps> <div className Name="steps-content" style={{ marginTop: 4, marginBottom: 4 }}> {steps[current].content} </div> <div className="steps-action"> {current < steps.length - 1 && ( <Button type="primary" onClick={() => this.next()}> Next </Button> )} {current === steps.length - 1 && ( <Button type="primary" onClick={() => console.log('Processing complete!')}> Done </Button> )} {current > 0 && ( <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}> Previous </Button> )} </div> </div> ); } }

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps direction="vertical" current={1} style={{ width: 300 }} onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description" /> <Steps.Step title="In Progress" description="This is a description" /> <Steps.Step title="Waiting" description="This is a description" /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps direction="vertical" type="basic" current={1} onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description" /> <Steps.Step title="In Progress" description="This is a description" /> <Steps.Step title="Waiting" description="This is a description" /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; () => ( <Steps type="basic" current={1} status="error" onChange={(i)=>console.log(i)}> <Steps.Step title="Finished" description="This is a description" /> <Steps.Step title="In Process" description="This is a description" /> <Steps.Step title="Waiting" description="This is a description" /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; import { IconHome, IconLock, IconClear, IconTickCircle } from '@douyinfe/semi-icons'; () => ( <Steps type="basic" onChange={(i)=>console.log(i)}> <Steps.Step status="finish" title="Login" icon={<IconHome />} /> <Steps.Step status="finish" title="Verification" icon={<IconLock />} /> <Steps.Step status="process" title="Pay" icon={<IconClear />} /> <Steps.Step status="wait" title="Done" icon={<IconTickCircle />} /> </Steps> );

import React from 'react'; import { Steps } from '@douyinfe/semi-ui'; class App extends React.Component { constructor(props) { super(props); this.state = { current: 1, }; } onChange(index) { this.setState({ current: index }); } render() { const { current } = this.state; const { Step } = Steps; const steps = [ { title: 'First', content: 'First-content', }, { title: 'Second', content: 'Second-content', }, { title: 'Last', content: 'Last-content', }, ]; return ( <div> <Steps type="basic" current={current} onChange={index => this.onChange(index)}> {steps.map(item => ( <Step key={item.title} title={item.title} /> ))} </Steps> </div> ); } }