Panel 面板

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-panel": "@vant/weapp/panel/index"
  3. }

代码演示

基础用法

面板只是一个容器,里面可以放入自定义的内容

  1. <van-panel title="标题" desc="描述信息" status="状态">
  2. <view>内容</view>
  3. </van-panel>

高级用法

使用slot自定义内容

  1. <van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
  2. <view>内容</view>
  3. <view slot="footer">
  4. <van-button size="small">按钮</van-button>
  5. <van-button size="small" type="danger">按钮</van-button>
  6. </view>
  7. </van-panel>

API

Props

参数说明类型默认值版本
title标题string--
desc描述string--
status状态string--
use-footer-slot是否使用 footer slotbooleanfalse-

Slot

名称说明
-自定义内容
header自定义 header,如果设置了titledescstatus属性则不生效
footer自定义 footer,需要设置 use-footer-slot属性

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类

Panel 面板 - 图1