ant-design/components/select/demo/size.tsx
二货爱吃白萝卜 e7aa014c31
chore: Add type util ()
* docs: init

* chore: all types

* docs: faq

* chore: fix lint
2024-01-11 15:55:58 +08:00

68 lines
1.7 KiB
TypeScript

import React, { useState } from 'react';
import { Radio, Select, Space } from 'antd';
import type { ConfigProviderProps, RadioChangeEvent, SelectProps } from 'antd';
type SizeType = ConfigProviderProps['componentSize'];
const options: SelectProps['options'] = [];
for (let i = 10; i < 36; i++) {
options.push({
value: i.toString(36) + i,
label: i.toString(36) + i,
});
}
const handleChange = (value: string | string[]) => {
console.log(`Selected: ${value}`);
};
const App: React.FC = () => {
const [size, setSize] = useState<SizeType>('middle');
const handleSizeChange = (e: RadioChangeEvent) => {
setSize(e.target.value);
};
return (
<>
<Radio.Group value={size} onChange={handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="middle">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Space direction="vertical" style={{ width: '100%' }}>
<Select
size={size}
defaultValue="a1"
onChange={handleChange}
style={{ width: 200 }}
options={options}
/>
<Select
mode="multiple"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
options={options}
/>
<Select
mode="tags"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
options={options}
/>
</Space>
</>
);
};
export default App;