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

81 lines
2.7 KiB
Markdown

# 大小
- order: 2
不同大小的 TreeSelect。
---
````jsx
import { TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const Demo = React.createClass({
getInitialState() {
return {
value: 'leaf1',
};
},
onChange(value) {
this.setState({ value });
},
render() {
return (
<div>
<TreeSelect size="large" style={{ width: 180 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode value="sss" title="sss" key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
<br /><br />
<TreeSelect style={{ width: 180 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode value="sss" title="sss" key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
<br /><br />
<TreeSelect size="small" style={{ width: 180 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode value="sss" title="sss" key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
);
},
});
ReactDOM.render(
<Demo />
, mountNode);
````