Ant?Design?組件庫之步驟條實現(xiàn)

更新時間：2022年08月19日 15:03:41 作者：極智視界

這篇文章主要為大家介紹了Ant?Design組件庫之步驟條實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

antd 組件庫是基于 Ant Design 設(shè)計體系的 React UI 組件庫，antd 為 Web 應(yīng)用提供了豐富的基礎(chǔ) UI 組件，可以用于研發(fā)企業(yè)級中后臺產(chǎn)品。這篇咱們介紹 antd 組件庫之 步驟條。

1 antd 之 Steps API

步驟條 Steps 的用處是在當任務(wù)復(fù)雜或者存在先后關(guān)系時，將其分解成一系列的步驟，從而達到簡化任務(wù)的目的。其 DOM 節(jié)點為 :

<Steps>
  <Step>...</Step>
  <Step>...</Step>
  <Step>...</Step>
</Steps>

antd 中的步驟條樣式豐富，可以通過設(shè)置 Steps 和 Step 的屬性來產(chǎn)生不同的步驟條樣式，詳細的這里我進行一個整理：

下面做一些實踐。

2 antd 之 Steps 示例

先來看最簡單的靜態(tài)的步驟條，看代碼：

import { Steps } from 'antd';
import React from 'react';
const { Step } = Steps;
const App = () => (
  <Steps current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>
);
export default App;

可以看到現(xiàn)在 current 默認選擇了 1，來看效果：

如果 current 我們選擇了 2，那會是什么樣子的呢：

再來看一個 帶圖標的步驟條，這里用了 antd 的 icon，上代碼：

import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
import React from 'react';
const { Step } = Steps;
const App = () => (
  <Steps>
    <Step status="finish" title="Login" icon={<UserOutlined />} />
    <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
    <Step status="process" title="Pay" icon={<LoadingOutlined />} />
    <Step status="wait" title="Done" icon={<SmileOutlined />} />
  </Steps>
);
export default App;

來看效果：

來有意思一些的，看看動態(tài)的吧：配合按鈕進行步進或后退，來表示一個流程的處理進度，上代碼：

import { Button, message, Steps } from 'antd';
import React, { useState } from 'react';
const { Step } = Steps;
const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];
const App = () => {
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  return (
    <>
      <Steps current={current}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
      <div className="steps-action">
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button type="primary" onClick={() => message.success('Processing complete!')}>
            Done
          </Button>
        )}
        {current > 0 && (
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => prev()}
          >
            Previous
          </Button>
        )}
      </div>
    </>
  );
};
export default App;

還有 CSS 代碼，同級目錄下寫個 index.less：

.steps-content {
    min-height: 200px;
    margin-top: 16px;
    padding-top: 80px;
    text-align: center;
    background-color: #fafafa;
    border: 1px dashed #e9e9e9;
    border-radius: 2px;
  }
  .steps-action {
    margin-top: 24px;
  }

來看效果：

步驟條還可以通過 Steps 的 status 屬性來指定當前步驟的狀態(tài)，來看示例：

import { Steps } from 'antd';
import React from 'react';
const { Step } = Steps;
const App = () => (
  <Steps current={1} status="error">
    <Step title="Finished" description="This is a description" />
    <Step title="In Process" description="This is a description" />
    <Step title="Waiting" description="This is a description" />
  </Steps>
);
export default App;

來看效果，這里是第 1 步出現(xiàn) err 了：

咱們也可以給步驟條的每個步驟添加自定義的展示，上代碼：

import { Popover, Steps } from 'antd';
import React from 'react';
const { Step } = Steps;
const customDot = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
);
const App = () => (
  <Steps current={1} progressDot={customDot}>
    <Step title="Finished" description="You can hover on the dot." />
    <Step title="In Progress" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
  </Steps>
);
export default App;

來看效果：

最后來看一個 Steps 中的 Step 可點擊的步驟條，上代碼：

import { Divider, Steps } from 'antd';
import React, { useState } from 'react';
const { Step } = Steps;
const App = () => {
  const [current, setCurrent] = useState(0);
  const onChange = (value) => {
    console.log('onChange:', current);
    setCurrent(value);
  };
  return (
    <>
      <Steps current={current} onChange={onChange}>
        <Step title="Step 1" description="This is a description." />
        <Step title="Step 2" description="This is a description." />
        <Step title="Step 3" description="This is a description." />
      </Steps>
      <Divider />
      <Steps current={current} onChange={onChange} direction="vertical">
        <Step title="Step 1" description="This is a description." />
        <Step title="Step 2" description="This is a description." />
        <Step title="Step 3" description="This is a description." />
      </Steps>
    </>
  );
};
export default App;

從上面的代碼可以看到，當你點擊 change Steps 的時候，會觸發(fā) onChange 回調(diào)函數(shù)，咱們這里的 onChange 只做了兩件事情：

(1) 控制臺打印 current，current 大家應(yīng)該熟悉，就是第幾個 Step；

(2) 設(shè)置 setCurrent。這個地方不限于此，盡可以發(fā)揮想象。

來看效果：