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

大小

• order: 2

不同大小的 TreeSelect。

---

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);