mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
01d1b3d492
* 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>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
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 = () => (
|
|
<Flex vertical gap="middle">
|
|
<Typography.Title level={3}>[true, 0, false]</Typography.Title>
|
|
<Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
|
|
<Splitter.Panel>
|
|
<Desc text={1} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel defaultSize={0}>
|
|
<Desc text={2} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel resizable={false}>
|
|
<Desc text={3} />
|
|
</Splitter.Panel>
|
|
</Splitter>
|
|
<Typography.Title level={3}>[false, 0, true]</Typography.Title>
|
|
<Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
|
|
<Splitter.Panel resizable={false}>
|
|
<Desc text={1} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel defaultSize={0}>
|
|
<Desc text={2} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel>
|
|
<Desc text={3} />
|
|
</Splitter.Panel>
|
|
</Splitter>
|
|
<Typography.Title level={3}>Start have min & max</Typography.Title>
|
|
<Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
|
|
<Splitter.Panel min={50} max={100}>
|
|
<Desc text={1} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel>
|
|
<Desc text={2} />
|
|
</Splitter.Panel>
|
|
</Splitter>
|
|
<Typography.Title level={3}>End have min & max</Typography.Title>
|
|
<Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
|
|
<Splitter.Panel>
|
|
<Desc text={1} />
|
|
</Splitter.Panel>
|
|
<Splitter.Panel min="20%" max="70%">
|
|
<Desc text={2} />
|
|
</Splitter.Panel>
|
|
</Splitter>
|
|
</Flex>
|
|
);
|
|
|
|
export default App;
|