Element-React Steps 步驟

引導(dǎo)用戶按照流程完成任務(wù)的分步導(dǎo)航條，可根據(jù)實(shí)際應(yīng)用場(chǎng)景設(shè)定步驟，步驟不得少于 2 步。

基礎(chǔ)用法

簡(jiǎn)單的步驟條。

設(shè)置active屬性，接受一個(gè)Number，表明步驟的 index，從 0 開始。需要定寬的步驟條時(shí)，設(shè)置space屬性即可，它接受Boolean，單位為px，如果不設(shè)置，則為自適應(yīng)。設(shè)置finishStatus屬性可以改變已經(jīng)完成的步驟的狀態(tài)。

constructor(props) {
  super(props);


  this.state = {
    active: 0
  };
}


next() {
  let active = this.state.active + 1;
  if (active > 3) {
    active = 0;
  }
  this.setState({ active });
}


render() {
  return (
    <div>
      <Steps space={200} active={this.state.active} finishStatus="success">
        <Steps.Step title="步驟 1"></Steps.Step>
        <Steps.Step title="步驟 2"></Steps.Step>
        <Steps.Step title="步驟 3"></Steps.Step>
      </Steps>
      <Button onClick={() => this.next()}>下一步</Button>
    </div>
  )
}

含狀態(tài)步驟條

每一步驟顯示出該步驟的狀態(tài)。

也可以使用title具名分發(fā)。

render() {
  return (
    <Steps space={100} active={1} finishStatus="success">
      <Steps.Step title="已完成"></Steps.Step>
      <Steps.Step title="進(jìn)行中"></Steps.Step>
      <Steps.Step title="步驟 3"></Steps.Step>
    </Steps>
  )
}

有描述的步驟條

每個(gè)步驟有其對(duì)應(yīng)的步驟狀態(tài)描述。

帶描述的步驟條。

render() {
  return (
    <Steps space={200} active={1}>
      <Steps.Step title="步驟 1" description="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"></Steps.Step>
      <Steps.Step title="步驟 2" description="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"></Steps.Step>
      <Steps.Step title="步驟 3" description="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"></Steps.Step>
    </Steps>
  )
}

帶圖標(biāo)的步驟條

步驟條內(nèi)可以啟用各種自定義的圖標(biāo)。

通過(guò)icon屬性來(lái)設(shè)置圖標(biāo)，圖標(biāo)的類型可以參考 Icon 組件的文檔。

render() {
  return (
    <Steps space={100} active={1}>
      <Steps.Step title="步驟 1" icon="edit"></Steps.Step>
      <Steps.Step title="步驟 2" icon="upload"></Steps.Step>
      <Steps.Step title="步驟 3" icon="picture"></Steps.Step>
    </Steps>
  )
}

豎式步驟條

豎直方向的步驟條。

只需要在Steps元素中設(shè)置direction屬性為vertical即可。

render() {
  return (
    <Steps space={100} direction="vertical" active={1}>
      <Steps.Step title="步驟 1"></Steps.Step>
      <Steps.Step title="步驟 2"></Steps.Step>
      <Steps.Step title="步驟 3"></Steps.Step>
    </Steps>
  )
}

Steps Attributes

Step Attributes