ant-design/components/steps/demo/customized-progress-dot.md

order	title
9	[{zh-CN 自定义点状步骤条} {en-US Customized Dot Style}]

zh-CN

为点状步骤条增加自定义展示。

en-US

You can customize the display for Steps with progress dot style.

import type { StepsProps } from 'antd';
import { Popover, Steps } from 'antd';
import React from 'react';

const customDot: StepsProps['progressDot'] = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
);
const description = 'You can hover on the dot.';
const App: React.FC = () => (
  <Steps
    current={1}
    progressDot={customDot}
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;