Panel

Deprecate Tip

The Panel component will be deprecated in version 3.0. Please use the Cell and Button components instead.

Install

import Vue from 'vue';
import { Panel } from 'vant';

Vue.use(Panel);

Usage

Basic Usage

<van-panel title="Title" desc="Description" status="Status">
  <div>Content</div>
</van-panel>

Advanced Usage

<van-panel title="Title" desc="Description" status="Status">
  <div>Content</div>
  <template #footer>
    <van-button size="small">Button</van-button>
    <van-button size="small" type="danger">Button</van-button>
  </template>
</van-panel>

API

Props

Attribute	Description	Type	Default
icon	Left Icon	string	-
title	Title	string	-
desc	Description	string	-
status	Status	string	-

Slots

Name	Description
default	Default slot
header	Custom header
footer	Custom footer

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@panel-background-color	`@white`	-
@panel-header-value-color	`@red`	-
@panel-footer-padding	`@padding-xs @padding-md`	-