# Miox vue components

## Layout

``` javascript
import { Layout } from 'miox-vuc';
...
components.layout = Layout;
```

 - **blank** `Number` 顶部间距(px)
 - **horizontal** `Boolean` 是否横向铺展
 - **type** `String` layout布局中的上中下三部分,分别为`head` `body` `foot`

``` html
<layout>
    <layout type="head">head</layout>
    <layout type="body">
        <p>Hello world</p>
    </layout>
    <layout type="foot">foot</layout>
</layout>
```

## Row

``` javascript
import { Row } from 'miox-vuc';
...
components.Row = Row;
```

栅格布局中的`Row`

``` html
<Row type="flex">
...
</Row>
```

|成员|说明|类型|默认值|
|:----|:----|:----|:----|
|gutter|栅格间隔|number|0|
|type|布局模式，可选 `flex`，现代浏览器下有效|string|-|
|align|flex 布局下的垂直对齐方式：`top` `middle` `bottom`|string|`top`|
|justify|flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between`|string|`start`|

## Col

``` javascript
import { Col } from 'miox-vuc';
...
components.Colum = Col;
```

栅格布局中`col`,分24格。

 - **span** `String` 宽度占比 `Default:1`

``` html
<Row>
    <Colum>111</Colum>
    <Colum :span="16">111</Colum>
    <Colum :span="7">111</Colum>
</Row>
```

|成员|说明|类型|默认值|
|:----|:----|:----|:----|
|span|栅格占位格数，为 0 时相当于 `display: none`|number|-|
|order|栅格顺序，`flex` 布局模式下有效|number|0|
|offset|栅格左侧的间隔格数，间隔内不可以有栅格|number|0|
|push|栅格向右移动格数|number|0|
|pull|栅格向左移动格数|number|0|
|xs|`<768px`响应式栅格，可为栅格数或一个包含其他属性的对象|number or object|-|
|sm|`≥768px`响应式栅格，可为栅格数或一个包含其他属性的对象|number or object|-|
|md|`≥992px`响应式栅格，可为栅格数或一个包含其他属性的对象|number or object|-|
|lg|`≥1200px`响应式栅格，可为栅格数或一个包含其他属性的对象|number or object|-|

## Icon

``` javascript
import { Icon } from 'miox-vuc';
...
components.icon = Icon;
```

 - **type** `String` 图标名
 - **title** `Title` 友好标题

``` html
<icon type="edit"></icon>
```

## Block

``` javascript
import { Block } from 'miox-vuc';
...
components.block = Block;
```

- `align` 水平方向布局
    - `left` 居左
    - `center` 居中
    - `right` 居右
- `valign` 竖直方向布局
    - `top` 居上
    - `middle` 居中
    - `bottom` 居下

``` html
<block align="center" valign="middle">hello world</block>
```

## Navigate Bar

``` javascript
import { NavigateBar } from 'miox-vuc';
...
components.navigate = NavigateBar;
```

- `gutter` 间隔像素
- `border` 底部线条类型
    - `normal` 正常
    - `dark` 深色
    - `darkest` 深黑色
    - `light` 亮色
    - `lightest` 高亮色

``` html
<navigate :gutter="7" border="normal">
    <block slot="left">1<br />4</block>
    <block slot="right">2</block>
    3
</navigate>
```

**注意:** 在navigate标签下的slot名字是必须的,分`left`与`right`

## Button

``` javascript
import { Btn } from 'miox-vuc';
...
components.btn = Btn;
```

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`

按钮的属性说明如下：

|属性|说明|类型|默认值|
|:----|:----|:----|:----|
|type|设置按钮类型，可选值为 `primary` `ghost` 或者不设|string|-|
|htmlType|设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)|string|button|
|icon|设置按钮的图标类型|string|-|
|shape|设置按钮形状，可选值为 `circle` `circle-outline` 或者不设|string|-|
|size|设置按钮大小，可选值为 `small` `large` 或者不设|string|`default`|
|loading|设置按钮载入状态|boolean|false|

### ButtonGroup

``` javascript
import { ButtonGroup } from 'miox-vuc';
...
components.ButtonGroup = ButtonGroup;
```
|属性|说明|类型|默认值|
|:----|:----|:----|:----|
|size|设置按钮大小，可选值为 `small` `large` 或者不设|string|`default`|