import React from 'react'; import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons'; import { ConfigProvider, Steps } from 'antd'; const description = 'This is a description.'; const App: React.FC = () => ( <ConfigProvider theme={{ components: { Steps: { titleLineHeight: 20, customIconSize: 40, customIconTop: 0, customIconFontSize: 32, iconSize: 20, iconTop: 0, // magic for ui experience iconFontSize: 12, iconSizeSM: 16, dotSize: 20, dotCurrentSize: 24, navArrowColor: '#163CFF', navContentMaxWidth: 100, descriptionMaxWidth: 100, }, }, }} > <Steps current={1} items={[ { title: 'Finished', description, }, { title: 'In Progress', description, subTitle: 'Left 00:00:08', }, { title: 'Waiting', description, }, ]} /> <Steps size="small" current={1} items={[ { title: 'Finished', description, }, { title: 'In Progress', description, subTitle: 'Left 00:00:08', }, { title: 'Waiting', description, }, ]} /> <Steps items={[ { title: 'Login', status: 'finish', icon: <UserOutlined />, }, { title: 'Verification', status: 'finish', icon: <SolutionOutlined />, }, { title: 'Pay', status: 'process', icon: <LoadingOutlined />, }, { title: 'Done', status: 'wait', icon: <SmileOutlined />, }, ]} /> <Steps progressDot current={1} items={[ { title: 'Finished', description: 'This is a description.', }, { title: 'In Progress', description: 'This is a description.', }, { title: 'Waiting', description: 'This is a description.', }, ]} /> <Steps type="navigation" current={1} items={[ { title: 'Step 1', subTitle: '00:00:05', status: 'finish', description: 'This is a description.', }, { title: 'Step 2', subTitle: '00:01:02', status: 'process', description: 'This is a description.', }, { title: 'Step 3', subTitle: 'waiting for longlong time', status: 'wait', description: 'This is a description.', }, ]} /> </ConfigProvider> ); export default App;