# Group

组

将多个组件归为一组，默认 `display: table`

可组合的表单有：

* Input
* Select
* Tag 系列
* Tree

...

## basic use

```js
import { Group } from 'amos-framework';

<Group>
...
</Group>
```

## 案例演示

### 基本使用

---demo
```js
import { Group, Input, Select } from 'amos-framework';

const options = ['vertical', 'tight', 'enableSpace'];

class Demo extends Component {
  state = {
    groupProps: {}
  };

  onPropChange = (value) => {
    if (value){
      this.setState({
        groupProps: { [value]: true }
      });
    } else {
      this.setState({
        groupProps: {}
      });
    }
    console.log(this.state);
  }

  render() {
    const { groupProps } = this.state;
    return (
      <div>
        配置项：
        <Select
          data={options}
          renderOption={item => <Select.Option value={item}>{item}</Select.Option>}
          defaultOption={<Select.Option>请选择</Select.Option>}
          onChange={this.onPropChange}
        />
        <Group {...groupProps}>
          <Input placeholder="上" size="sm" />
          <Input placeholder="下" size="sm" />
          <Input placeholder="左" size="sm" />
          <Input placeholder="右" size="sm" />
          <Select>
            <Select.Option>test</Select.Option>
          </Select>
          <Select>
            <Select.Option>test</Select.Option>
          </Select>
        </Group>
    </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 子节点事件 Group 内容 每一项事件

---demo
```js
import { Group } from 'amos-framework';

const onChange = (type, value) => {
  console.log(type, value);
}

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <Group>
      <Input placeholder="上" size="sm" onChange={e => onChange('top', e.target.value)} />
      <Input placeholder="下" size="sm" onChange={e => onChange('bottom', e.target.value)} />
      <Input placeholder="左" size="sm" onChange={e => onChange('left', e.target.value)} />
      <Input placeholder="右" size="sm" onChange={e => onChange('right', e.target.value)} disabled />
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
    </Group>
  </div>
), _react_runner_);
```
---demoend

### 紧促的 设置 tight

---demo
```js
import { Group, Input, Select } from 'amos-framework';

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <Group tight>
      <Input placeholder="上" size="sm" />
      <Input placeholder="下" size="sm" />
      <Input placeholder="左" size="sm" />
      <Input placeholder="右" size="sm" />
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
    </Group>
  </div>
), _react_runner_);
```
---demoend

### 带间隔 设置 enableSpace

---demo
```js
import { Group, Input, Select } from 'amos-framework';

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <Group enableSpace>
      <Input placeholder="上" size="sm" />
      <Input placeholder="下" size="sm" />
      <Input placeholder="左" size="sm" />
      <Input placeholder="右" size="sm" disabled />
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
    </Group>
  </div>
), _react_runner_);
```
---demoend

### 垂直 设置 vertical

---demo
```js
import { Group, Input, Select } from 'amos-framework';

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <Group vertical>
      <Input placeholder="上" size="sm" />
      <Input placeholder="下" size="sm" />
      <Input placeholder="左" size="sm" />
      <Input placeholder="右" size="sm" />
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
      <Select>
        <Select.Option>test</Select.Option>
      </Select>
    </Group>
  </div>
), _react_runner_);
```
---demoend

## props

| params  | type | default | description |
| --- | --- | --- | --- |
| style | object | - | style 样式 |
| prefixCls | string | `amos-group` | css class 前缀 |
| className | string | - | css class |
| itemClassName | string | - | 每一项子节点设置样式名 |
| vertical | boolean | - | 垂直布局 |
| size | string | - | 大小，除了默认值，可选值有 `lg、sm` |
| tight | boolean | - | 是否采用紧促的 |
| enableSpace | boolean | - | 子节点之间有间隙 |