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

46 lines
1.3 KiB
Markdown
Raw Normal View History

2015-08-08 19:11:10 +08:00
# 三种大小
- order: 0
2015-08-10 13:22:50 +08:00
三种大小的选择框,当 size 分别为 `large``small` 时,输入框高度为 `32px``22px` ,默认高度为 `28px`
2015-08-08 19:11:10 +08:00
---
````jsx
import { Select } from 'antd';
const Option = Select.Option;
2015-08-08 19:11:10 +08:00
function handleChange(value) {
console.log('selected ' + value);
}
2015-10-20 16:47:55 +08:00
ReactDOM.render(
2015-08-08 19:11:10 +08:00
<div>
2015-08-20 17:27:40 +08:00
<Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
2015-08-08 19:11:10 +08:00
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
2015-08-20 17:27:40 +08:00
<Select defaultValue="lucy" style={{width:200}} onChange={handleChange}>
2015-08-08 19:11:10 +08:00
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
2015-08-20 17:27:40 +08:00
<Select size="small" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
2015-08-08 19:11:10 +08:00
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
, document.getElementById('components-select-demo-size'));
````
````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
}
2015-08-20 17:27:40 +08:00
````