mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
e7aa014c31
* docs: init * chore: all types * docs: faq * chore: fix lint
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Button, Flex, Radio, Slider } from 'antd';
|
|
import type { ConfigProviderProps } from 'antd';
|
|
|
|
type SizeType = ConfigProviderProps['componentSize'];
|
|
|
|
const App: React.FC = () => {
|
|
const [gapSize, setGapSize] = React.useState<SizeType | 'customize'>('small');
|
|
const [customGapSize, setCustomGapSize] = React.useState<number>(0);
|
|
return (
|
|
<Flex gap="middle" vertical>
|
|
<Radio.Group value={gapSize} onChange={(e) => setGapSize(e.target.value)}>
|
|
{['small', 'middle', 'large', 'customize'].map((size) => (
|
|
<Radio key={size} value={size}>
|
|
{size}
|
|
</Radio>
|
|
))}
|
|
</Radio.Group>
|
|
{gapSize === 'customize' && <Slider value={customGapSize} onChange={setCustomGapSize} />}
|
|
<Flex gap={gapSize !== 'customize' ? gapSize : customGapSize}>
|
|
<Button type="primary">Primary</Button>
|
|
<Button>Default</Button>
|
|
<Button type="dashed">Dashed</Button>
|
|
<Button type="link">Link</Button>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default App;
|