2016-03-31 09:40:55 +08:00
|
|
|
---
|
2018-05-21 17:07:39 +08:00
|
|
|
order: 3
|
2017-03-24 12:14:00 +08:00
|
|
|
title:
|
2016-07-10 08:55:43 +08:00
|
|
|
zh-CN: 三种大小
|
2017-03-24 12:14:00 +08:00
|
|
|
en-US: Sizes
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-08-08 19:11:10 +08:00
|
|
|
|
2016-07-10 08:55:43 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2017-09-27 22:32:49 +08:00
|
|
|
三种大小的选择框,当 size 分别为 `large` 和 `small` 时,输入框高度为 `40px` 和 `24px` ,默认高度为 `32px`。
|
2015-08-08 19:11:10 +08:00
|
|
|
|
2016-07-10 08:55:43 +08:00
|
|
|
## en-US
|
|
|
|
|
2017-10-20 15:47:42 +08:00
|
|
|
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.
|
2016-07-10 08:55:43 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2017-03-24 12:14:00 +08:00
|
|
|
import { Select, Radio } from 'antd';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2019-05-27 21:32:45 +08:00
|
|
|
const { Option } = Select;
|
2015-08-08 19:11:10 +08:00
|
|
|
|
2017-03-24 12:14:00 +08:00
|
|
|
const children = [];
|
|
|
|
for (let i = 10; i < 36; i++) {
|
|
|
|
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
|
|
|
|
}
|
|
|
|
|
2015-08-08 19:11:10 +08:00
|
|
|
function handleChange(value) {
|
2017-03-24 12:14:00 +08:00
|
|
|
console.log(`Selected: ${value}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
class SelectSizesDemo extends React.Component {
|
|
|
|
state = {
|
|
|
|
size: 'default',
|
|
|
|
};
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
handleSizeChange = e => {
|
2017-03-24 12:14:00 +08:00
|
|
|
this.setState({ size: e.target.value });
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2017-03-24 12:14:00 +08:00
|
|
|
|
|
|
|
render() {
|
|
|
|
const { size } = this.state;
|
|
|
|
return (
|
2020-03-14 00:04:54 +08:00
|
|
|
<>
|
2017-03-24 12:14:00 +08:00
|
|
|
<Radio.Group value={size} onChange={this.handleSizeChange}>
|
|
|
|
<Radio.Button value="large">Large</Radio.Button>
|
|
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
|
|
</Radio.Group>
|
2019-05-07 14:57:32 +08:00
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Select size={size} defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
|
2017-03-24 12:14:00 +08:00
|
|
|
{children}
|
|
|
|
</Select>
|
|
|
|
<br />
|
|
|
|
<Select
|
2017-03-28 21:27:58 +08:00
|
|
|
mode="multiple"
|
2017-03-24 12:14:00 +08:00
|
|
|
size={size}
|
|
|
|
placeholder="Please select"
|
|
|
|
defaultValue={['a10', 'c12']}
|
|
|
|
onChange={handleChange}
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Select>
|
|
|
|
<br />
|
|
|
|
<Select
|
2017-03-28 21:27:58 +08:00
|
|
|
mode="tags"
|
2017-03-24 12:14:00 +08:00
|
|
|
size={size}
|
|
|
|
placeholder="Please select"
|
|
|
|
defaultValue={['a10', 'c12']}
|
|
|
|
onChange={handleChange}
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Select>
|
2020-03-14 00:04:54 +08:00
|
|
|
</>
|
2017-03-24 12:14:00 +08:00
|
|
|
);
|
|
|
|
}
|
2015-08-08 19:11:10 +08:00
|
|
|
}
|
|
|
|
|
2017-03-24 12:14:00 +08:00
|
|
|
ReactDOM.render(<SelectSizesDemo />, mountNode);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|
2015-08-08 19:11:10 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```css
|
2015-10-19 17:57:33 +08:00
|
|
|
.code-box-demo .ant-select {
|
2015-10-22 21:12:13 +08:00
|
|
|
margin: 0 8px 10px 0;
|
2015-08-08 19:11:10 +08:00
|
|
|
}
|
2016-05-13 11:45:09 +08:00
|
|
|
|
2020-05-10 22:11:09 +08:00
|
|
|
.ant-row-rtl .code-box-demo .ant-select {
|
|
|
|
margin: 0 0 10px 8px;
|
|
|
|
}
|
|
|
|
|
2016-05-13 11:45:09 +08:00
|
|
|
#components-select-demo-search-box .code-box-demo .ant-select {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|