Element-React Steps 步驟

2020-10-19 10:33 更新

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

基礎(chǔ)用法

簡單的步驟條。

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

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. active: 0
  5. };
  6. }
  7. next() {
  8. let active = this.state.active + 1;
  9. if (active > 3) {
  10. active = 0;
  11. }
  12. this.setState({ active });
  13. }
  14. render() {
  15. return (
  16. <div>
  17. <Steps space={200} active={this.state.active} finishStatus="success">
  18. <Steps.Step title="步驟 1"></Steps.Step>
  19. <Steps.Step title="步驟 2"></Steps.Step>
  20. <Steps.Step title="步驟 3"></Steps.Step>
  21. </Steps>
  22. <Button onClick={() => this.next()}>下一步</Button>
  23. </div>
  24. )
  25. }

含狀態(tài)步驟條

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

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

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

有描述的步驟條

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

帶描述的步驟條。

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

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

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

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

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

豎式步驟條

豎直方向的步驟條。

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

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

Steps Attributes

參數(shù) 說明 類型 可選值 默認(rèn)值
space 每個(gè) step 的間距,不填寫將自適應(yīng)間距 Number
direction 顯示方向 string vertical/horizontal horizontal
active 設(shè)置當(dāng)前激活步驟 number 0
processStatus 設(shè)置當(dāng)前步驟的狀態(tài) string wait/process/finish/error/success process
finishStatus 設(shè)置結(jié)束步驟的狀態(tài) string wait/process/finish/error/success finish

Step Attributes

參數(shù) 說明 類型 可選值 默認(rèn)值
title 標(biāo)題 string
description 描述性文字 string/ReactElement
icon 圖標(biāo) Element Icon 提供的圖標(biāo),如果要使用自定義圖標(biāo)可以通過自定義element的方式寫入 string
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號