mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
2.2 KiB
2.2 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
三种大小的选择框,当 size 分别为 large
和 small
时,输入框高度为 40px
和 24px
,默认高度为 32px
。
en-US
The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
import React, { useState } from 'react';
import { Select, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import type { RadioChangeEvent } from 'antd';
const { Option } = Select;
const children: React.ReactNode[] = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
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="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Select size={size} defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
{children}
</Select>
<br />
<Select
mode="multiple"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
>
{children}
</Select>
<br />
<Select
mode="tags"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
>
{children}
</Select>
</>
);
};
export default App;
.code-box-demo .ant-select {
margin: 0 8px 10px 0;
}
.ant-row-rtl .code-box-demo .ant-select {
margin: 0 0 10px 8px;
}
#components-select-demo-search-box .code-box-demo .ant-select {
margin: 0;
}