mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
43 lines
750 B
TypeScript
43 lines
750 B
TypeScript
|
import React from 'react';
|
||
|
import type { StepsProps } from 'antd';
|
||
|
import { Popover, Steps } from 'antd';
|
||
|
|
||
|
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;
|