在 React Antd 中,可以使用 Steps 和 Step 组件来实现步骤条的功能。如果在步骤成功后,仍然想要显示数字而不是图标,可以通过设置 Step 组件的 status 属性为 'process',并将 title 属性设置为数字。

例如:

import { Steps } from 'antd';

const { Step } = Steps;

function MySteps() {
  return (
    <Steps>
      <Step title='1' status='finish' />
      <Step title='2' status='process' />
      <Step title='3' status='wait' />
    </Steps>
  );
}

在上面的例子中,第一个 Step 组件的 status 属性设置为 'finish',表示已完成;第二个 Step 组件的 status 属性设置为 'process',表示正在进行中;第三个 Step 组件的 status 属性设置为 'wait',表示待完成。同时,通过将 title 属性设置为数字,可以显示步骤的数字。

注意:如果想要显示图标而不是数字,可以将 title 属性设置为一个带有图标的元素,例如 <Step title={<Icon type='check-circle' />} status='finish' />

React Antd 步骤条:成功后显示数字而非图标

原文地址: https://www.cveoy.top/t/topic/dHIe 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录