FloatingPanel floating panel

introduce

A panel that floats at the bottom of the page and can be dragged up or down to browse content. It is often used to provide additional functionality or information.

Code Demo

Basic usage

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

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

Custom anchor point

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

For example, make the height of the panel dock at three positions: 100px, 40% screen height, and 70% screen height:

<z-floating-panel v-model:height="height" :anchors="anchors">
   <view style="padding: 30rpx; text-align: center">
     <text>Panel display height {{ height.toFixed(0) }} px</text>
   </view>
</z-floating-panel>
import { computed, ref } from 'vue'
const windowHeight = computed(() => {
   return uni.getSystemInfoSync().windowHeight
})
const anchors = [
   100,
   Math.round(0.4 * windowHeight.value),
   Math.round(0.7 * windowHeight.value)
]

const height = ref(anchors[0])

Head drag only

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

<z-floating-panel :content-draggable="false">
   <view style="padding: 30rpx; text-align: center">
     <text>Content cannot be dragged</text>
   </view>
</z-floating-panel>

API

Props

ParametersDescriptionTypeDefault value
v-model:heightThe display height of the current panelnumber | string0
anchorsSet custom anchor point, unit pxnumber[100, windowHeight * 0.6]
durationanimation duration, unit seconds, set to 0 to disable animationnumber | string0.3
content-draggableAllow dragging of content containersbooleantrue
lock-scrollWhether to lock background scrolling when not draggingbooleanfalse
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleantrue

Events

Event nameDescriptionCallback parameters
height-changeTriggered when the panel display height changes and ends dragging

Slots

NameDescription
defaultCustom panel content

Theme customization

Style variables

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

NameDefault ValueDescription
--z-floating-panel-border-radius32rpx-
--z-floating-panel-header-height60rpx-
--z-floating-panel-z-index999-
--z-floating-panel-backgroundvar(--z-background-2)-
--z-floating-panel-bar-width40rpx-
--z-floating-panel-bar-height6rpx-
--z-floating-panel-bar-colorvar(--z-gray-5)-