Box 容器
创建一个容器,可以设置宽、高,背景色,圆角等,也可以用于上下左右留白占位的使用。
平台
App | 小程序 | H5 |
---|---|---|
√ | √ | √ |
属性
属性名 | 类型 | 默认值 | 说明 | 平台 |
---|---|---|---|---|
height | String,Number | null | 高度,允许的值:数字、statusBar(状态栏高度)、navBar(导航栏高度)、header(状态栏+导航栏)、window(窗口高度)、safeBottom(安全底部高度) | All |
width | String,Number | null | 宽度,允许的值:数字、window(窗口宽度) | All |
radius | String,Number,Array | null | 圆角,radius=round时为圆形,允许c-radius- 开头的类 | All |
loading | Boolean | false | 显示加载中 | All |
loadingProps | Object | {} | loading配置 参考c-load-more | All |
loadingBg | String | rgba(255,255,255,.8) | All | |
border | Boolean,String,Number | false | 是否显示边框 可以是true、'top'、'bottom'、'left'、'right',数字边框大小 | All |
borderColor | String | c-bdr-base | 边框颜色 | All |
hoverClass | String | none | All | |
hoverStopPropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态,微信小程序有效 | All |
hoverStartTime | Number | 50 | 按住后多久出现点击态,单位毫秒 | All |
hoverStayTime | Number | 400 | 手指松开后点击态保留时间,单位毫秒 | All |
cClass | String,Array,Object | null | 组件类 | All |
cStyle | String,Array,Object | null | 组件样式 | All |
margin | String,Number,Array | null | 外边距 | All |
padding | String,Number,Array | null | 内边距 | All |
bgColor | String | null | 背景色,支持c-bg- 开头的背景色类 | All |
事件
事件名 | 说明 |
---|---|
click | 点击事件 |
插槽
插槽名 | 说明 |
---|---|
default | 默认插槽 |
示例
vue
<template>
<c-box bgColor="c-bg-primary" height="header">
<text>高度为导航栏高度</text>
</c-box>
</template>
1
2
3
4
5
2
3
4
5