mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-24 02:20:01 +08:00
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Flex, Space, 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 = () => (
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
<Splitter lazy 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>
|
|
<Splitter
|
|
lazy
|
|
layout="vertical"
|
|
style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
|
|
>
|
|
<Splitter.Panel defaultSize="40%" min="30%" max="70%">
|
|
<Desc text="First" />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel>
|
|
<Desc text="Second" />
|
|
</Splitter.Panel>
|
|
</Splitter>
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|