ant-design/components/splitter/demo/size.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

24 lines
689 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' }}>
{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 defaultSize="40%" min="20%" max="70%">
<Desc text="First" />
</Splitter.Panel>
<Splitter.Panel>
<Desc text="Second" />
</Splitter.Panel>
</Splitter>
);
export default App;