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

35 lines
810 B
Markdown
Raw Normal View History

---
order: 9
title:
zh-CN: 自定义点状步骤条
en-US: Customized Dot Style
---
## zh-CN
为点状步骤条增加自定义展示。
## en-US
You can customize the display for Steps with progress dot style.
2017-01-23 15:52:03 +08:00
````__react
import { Steps, Popover } from 'antd';
const Step = Steps.Step;
2017-01-23 16:09:34 +08:00
const customDot = (dot, { status, index }) => (
<Popover content={<span>step {index} status: {status}</span>}>
{dot}
</Popover>
);
ReactDOM.render(
<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>
, mountNode);
````