ant-design/components/select/demo/size.md

96 lines
2.1 KiB
Markdown
Raw Normal View History

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
三种大小的选择框,当 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
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
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
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
.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
```