miox-vuc

0.0.67 • Public • Published

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名字是必须的,分leftright

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

Readme

Keywords

none

Package Sidebar

Install

npm i miox-vuc

Weekly Downloads

10

Version

0.0.67

License

MIT

Last publish

Collaborators

  • evio
  • liyangready