Miox vue components
Layout
;...componentslayout = Layout;
- blank
Number
顶部间距(px) - horizontal
Boolean
是否横向铺展 - type
String
layout布局中的上中下三部分,分别为head
body
foot
headHello worldfoot
Row
;...componentsRow = Row;
栅格布局中的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
;...componentsColum = Col;
栅格布局中col
,分24格。
- span
String
宽度占比Default:1
111111111
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
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
;...componentsicon = Icon;
- type
String
图标名 - title
Title
友好标题
Block
;...componentsblock = Block;
align
水平方向布局left
居左center
居中right
居右
valign
竖直方向布局top
居上middle
居中bottom
居下
hello world
Navigate Bar
;...componentsnavigate = NavigateBar;
gutter
间隔像素border
底部线条类型normal
正常dark
深色darkest
深黑色light
亮色lightest
高亮色
1423
注意: 在navigate标签下的slot名字是必须的,分left
与right
Button
;...componentsbtn = 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
;...componentsButtonGroup = ButtonGroup;
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 设置按钮大小,可选值为 small large 或者不设 |
string | default |