ant-design/components/steps/demo/customized-progress-dot.md
2017-01-23 16:09:34 +08:00

35 lines
810 B
Markdown

---
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.
````__react
import { Steps, Popover } from 'antd';
const Step = Steps.Step;
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);
````