FloatingPanel

Intro

A panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information. Please upgrade vant to >= v4.5.0 before using this component.

Install

import { createApp } from 'vue';
import { FloatingPanel } from 'vant';

const app = createApp();
app.use(FloatingPanel);

Usage

Basic Usage

The default height of FloatingPanel is 100px, and users can drag it to expand the panel to a height of 60% of the screen height.

<van-floating-panel>
  <van-cell-group>
    <van-cell
      v-for="i in 26"
      :key="i"
      :title="String.fromCharCode(i + 64)"
      size="large"
    />
  </van-cell-group>
</van-floating-panel>

Custom Anchors

You can set the anchor position of FloatingPanel through the anchors attribute, and control the display height of the current panel through v-model:height.

For example, you can make the panel stop at three positions: 100px, 40% of the screen height, and 70% of the screen height.

<van-floating-panel v-model:height="height" :anchors="anchors">
  <div style="text-align: center; padding: 15px">
    <p>Panel Show Height {{ height.toFixed(0) }} px</p>
  </div>
</van-floating-panel>

import { ref } from 'vue';

export default {
  setup() {
    const anchors = [
      100,
      Math.round(0.4 * window.innerHeight),
      Math.round(0.7 * window.innerHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};

Head Drag Only

By default, both the header and content areas of FloatingPanel can be dragged, but you can disable dragging of the content area through the content-draggable attribute.

<van-floating-panel :content-draggable="false">
  <div style="text-align: center; padding: 15px">
    <p>Content cannot be dragged</p>
  </div>
</van-floating-panel>

API

Props

Attribute	Description	Type	Default
v-model:height	The current display height of the panel	number \| string	`0`
anchors	Setting custom anchors, unit `px`	number[]	`[100, window.innerWidth * 0.6]`
duration	Transition duration, unit second	number \| string	`0.3`
content-draggable	Allow dragging content	boolean	`true`
lock-scroll `v4.6.4`	When not dragging, Whether to lock background scroll	boolean	`false`
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`true`

Events

Event	Description	Arguments
height-change	Emitted when panel height is changed and the dragging is finished	{ height: number }

Slots

Name	Description
default	Custom panel content
header	Custom panel header

Types

The component exports the following type definitions:

import type { FloatingPanelProps } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-floating-panel-border-radius	16px	-
--van-floating-panel-header-height	30px	-
--van-floating-panel-z-index	999	-
--van-floating-panel-background	var(--van-background-2)	-
--van-floating-panel-bar-width	20px	-
--van-floating-panel-bar-height	3px	-
--van-floating-panel-bar-color	var(--van-gray-5)	-

4.0 KiB Raw Blame History