Miox vue components

Layout

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

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

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

Row

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

栅格布局中的Row

<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

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

栅格布局中col,分24格。

• span String 宽度占比 Default:1

<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

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

• type String 图标名
• title Title 友好标题

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

Block

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

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

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

Navigate Bar

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

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

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

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

Button

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

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

按钮的属性说明如下：

|属性|说明|类型|默认值| |:----|:----|:----|:----| |type|设置按钮类型，可选值为 primary ghost 或者不设|string|-| |htmlType|设置 button 原生的 type 值，可选值请参考 HTML 标准|string|button| |icon|设置按钮的图标类型|string|-| |shape|设置按钮形状，可选值为 circle circle-outline 或者不设|string|-| |size|设置按钮大小，可选值为 small large 或者不设|string|default| |loading|设置按钮载入状态|boolean|false|

ButtonGroup

import { ButtonGroup } from 'miox-vuc';
...
components.ButtonGroup = ButtonGroup;

|属性|说明|类型|默认值| |:----|:----|:----|:----| |size|设置按钮大小，可选值为 small large 或者不设|string|default|