React Antd 步骤条:成功后显示数字而非图标
在 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' />。
原文地址: https://www.cveoy.top/t/topic/dHIe 著作权归作者所有。请勿转载和采集!