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
