antd step步骤条成功状态后icon仍显示数字怎么设置
要设置antd步骤条在成功状态后,icon不显示数字,可以通过设置icon属性为null来实现。以下是设置步骤条成功状态后,icon不显示数字的示例代码:
import { Steps } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
const { Step } = Steps;
const steps = [
{
title: 'Step 1',
icon: <CheckOutlined />,
},
{
title: 'Step 2',
icon: null,
},
{
title: 'Step 3',
icon: null,
},
];
function MySteps() {
return (
<Steps current={1}>
{steps.map((item) => (
<Step key={item.title} title={item.title} icon={item.icon} />
))}
</Steps>
);
}
export default MySteps;
在上述代码中,我们定义了一个steps数组,其中Step 1的icon设置为<CheckOutlined />表示成功状态,而Step 2和Step 3的icon设置为null,即不显示数字。然后,我们在MySteps组件中使用Steps组件和Step组件来渲染步骤条。通过map方法遍历steps数组,根据每个步骤的设置渲染对应的Step组件,并将icon属性设置为对应的值。
这样,当步骤条的当前步骤为1时,Step 1会显示成功状态的图标,而Step 2和Step 3不会显示数字。
原文地址: https://www.cveoy.top/t/topic/jfMx 著作权归作者所有。请勿转载和采集!