# 介绍
面板只是一个容器,里面可以放入自定义的内容。
# 引入
在app.json或index.json中引入组件,详细介绍见快速上手
"usingComponents": {
"mx-panel": "/miniprogram_npm/m-ui/mx-panel/index",
}
# 小程序码
可使用微信扫码查看小程序码
#
# 代码演示
# 基本用法
<mx-panel padding="16" margin height="107">span: 24</mx-panel>
# 修改背景色
<mx-panel padding="16" bgColor="#267AFF" margin custom-class="panel-color" height="107">span: 24</mx-panel>
# 无圆角
<mx-panel padding="16" border="{{false}}" bgColor="#E61E1E" margin custom-class="panel-color" height="107">span: 24</mx-panel>
# 无内外边距
<mx-panel height="107">span: 24</mx-panel>
# API
# Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
margin | 是否需要外边距 | boolean | false |
paading | 左右内边距 | string | 16 |
border | 是否需要边框 | boolean | true |
bgColor | 背景色 | string | #fff |
height | 自定义高度 | string | - |
width | 自定义宽度 | string | - |
hoverClass | 是否需要按压样式 | Boolean | false |
# Slot
名称 | 说明 |
---|---|
- | 默认插槽,用于在组件嵌入内容 |
# 外部样式类
名称 | 说明 |
---|---|
custom-class | 根节点样式类 |