ant-design/components/flex/demo/gap.tsx

31 lines
1.0 KiB
TypeScript
Raw Normal View History

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;