ant-design/components/steps/demo/step-next.tsx
JarvisArt c74b93b2df
chore: step-next demo supports dark mode ()
* chore: step-next demo supports dark mode

* test: update snapshot
2023-01-04 23:57:05 +08:00

69 lines
1.5 KiB
TypeScript

import React, { useState } from 'react';
import { Button, message, Steps, theme } from 'antd';
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
const App: React.FC = () => {
const { token } = theme.useToken();
const [current, setCurrent] = useState(0);
const next = () => {
setCurrent(current + 1);
};
const prev = () => {
setCurrent(current - 1);
};
const items = steps.map((item) => ({ key: item.title, title: item.title }));
const contentStyle: React.CSSProperties = {
lineHeight: '260px',
textAlign: 'center',
color: token.colorTextTertiary,
backgroundColor: token.colorFillAlter,
borderRadius: token.borderRadiusLG,
border: `1px dashed ${token.colorBorder}`,
marginTop: 16,
};
return (
<>
<Steps current={current} items={items} />
<div style={contentStyle}>{steps[current].content}</div>
<div style={{ marginTop: 24 }}>
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
Next
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={() => message.success('Processing complete!')}>
Done
</Button>
)}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
Previous
</Button>
)}
</div>
</>
);
};
export default App;