ant-design/components/steps/demo/vertical.tsx
二货爱吃白萝卜 8db39e34a7
feat: ConfigProvider support classNames and styles for Steps (#53789)
* basic flex

* chore: style basic

* chore: status style

* chore: small size

* chore: label vertical

* chore: more style

* chore: hover disabled

* chore: variant

* chore: dot variant

* chore: max width

* chore: hover dot

* chore: update style

* chore: click style

* chore: init percent

* chore: pass detail

* chore: for progress

* chore: clean up

* chore: clean up

* chore: multiple css var

* chore: status text

* chore: status use var

* chore: fix nest

* chore: use svg

* chore: type of panel

* chore: offset support

* chore: inline offset

* chore: warning of steps

* docs: add semantic preview

* chore: semantic transition

* chore: hover

* chore: adjust style

* chore: update semantic preview

* chore: fix nav style

* chore: patch panel motion

* chore: update semantic preview

* docs: update config provider doc

* chore: fix part ts def

* chore: fix test ts

* test: update test case

* test: coverage

* chore: fix lint

* test: update test case

* test: update snapshot

* chore: adjust style

* chore: fix rtl

* docs: update design

* chore: update sctructure

* chore: update comment

* chore: clean up

* chore: clean up

* chore: cursor style

* chore: coverage

* docs: add missing part

* chore: order

* test: add test case

* chore: fix ts

* chore: clean up
2025-05-13 20:36:54 +08:00

33 lines
558 B
TypeScript

import React from 'react';
import { Flex, Steps } from 'antd';
const content = 'This is a content.';
const items = [
{
title: 'Finished',
content,
},
{
title: 'In Progress',
content,
},
{
title: 'Waiting',
content,
},
];
const App: React.FC = () => (
<Flex>
<div style={{ flex: 1 }}>
<Steps orientation="vertical" current={1} items={items} />
</div>
<div style={{ flex: 1 }}>
<Steps orientation="vertical" current={1} items={items} size="small" />
</div>
</Flex>
);
export default App;