## Grids 宫格

### 使用指南
``` javascript
import { Grids,Grid } from 'vortex-mobile';

Vue.use(Grids).use(Grid);
```

### 代码演示

#### 文字数据型宫格

文字数据型宫格单格左右外边距各8px，且宫格之间的外边距不会重合，space属性默认为around；text为需要显示的文字内容。

```html
<vm-grids>
  <vm-grid text="文字"></vm-grid>
  <vm-grid text="文字"></vm-grid>
  <vm-grid text="文字"></vm-grid>
</vm-grids>
```

#### 图标按钮型宫格

图标按钮型宫格单格左边距为8px，且只有最后一个宫格有右边距8px，使用时只需设置space为evenly即可；icon为图标名称。

```html
<vm-grids space="evenly">
  <vm-grid icon="pic"></vm-grid>
  <vm-grid icon="pic"></vm-grid>
  <vm-grid icon="pic"></vm-grid>
  <vm-grid icon="pic"></vm-grid>
  <vm-grid icon="pic"></vm-grid>
</vm-grids>
```

#### 多行宫格

多行宫格为可换行的flex容器布局，增加属性wrap即可使用。

```html
<vm-grids wrap>
  <vm-grid icon="pic" text="文字"></vm-grid>
  <vm-grid icon="pic" text="文字"></vm-grid>
  <vm-grid icon="pic" text="文字"></vm-grid>
  <vm-grid icon="pic" text="文字"></vm-grid>
  <vm-grid icon="pic" text="文字"></vm-grid>
  <vm-grid icon="pic" text="文字"></vm-grid>
</vm-grids>
```

#### 自定义html

自定义HTML片段只需在grid组件中写入自己的代码即可，但需要注意，如果写入了icon或text属性，自定义文本则不会生效。

```html
<vm-grids>
  <vm-grid>
    <div>自定义内容</div>
  </vm-grid>
  <vm-grid>
    <div>自定义内容</div>
  </vm-grid>
  <vm-grid>
    <div>自定义内容</div>
  </vm-grid>
</vm-grids>
```

### API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| space | 宫格布局类型，可选值为`around` `evenly` | `String` | `around` | - |
| wrap | 是否允许宫格布局换行 | `Boolean` | `false` | - |

### Grid API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| text | 文字内容 | `String` |  | - |
| icon | 图标名称 | `String` |  | - |
| icon-size | 图标大小 | `String` `Number` | 28 | - |

### Slot

| 名称 | 说明 |
|------|------|
| - | 自定义内容 |