ant-design/components/splitter/demo/multiple.tsx
lijianan 01d1b3d492
demo: rewrite render function with React.FC (#50779)
* demo: rewrite render function with React.FC

* demo: rewrite render function with React.FC

* fix: fix snap

* Update components/splitter/Splitter.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: clear

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-09-10 22:35:32 +08:00

27 lines
757 B
TypeScript

import React from 'react';
import { Flex, Splitter, Typography } from 'antd';
const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
<Flex justify="center" align="center" style={{ height: '100%' }}>
<Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
Panel {props.text}
</Typography.Title>
</Flex>
);
const App: React.FC = () => (
<Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
<Splitter.Panel collapsible>
<Desc text={1} />
</Splitter.Panel>
<Splitter.Panel collapsible={{ start: true }}>
<Desc text={2} />
</Splitter.Panel>
<Splitter.Panel>
<Desc text={3} />
</Splitter.Panel>
</Splitter>
);
export default App;