Touch-friendly Bottom Sheet For Vue 3

Install & Download:

Description:

A minimal, clean, draggable, touch-enabled bottom sheet component for Vue 3.

How to use it:

1. Import and register the bottom sheet plugin.

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";

2. Add your own content to the bottom sheet.

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>Title</h1>
    <h2>Sub Title</h2>
    <p>
      Content Here
    </p>
  </vue-bottom-sheet>
</template>
<!-- OR -->
<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <template #header>
      <h1>Title</h1>
    </template>
    <template #default>
      <h2>Sub Title</h2>
    </template>
    <template #footer>
      <p>
        Content Here
      </p>
    </template>
  </vue-bottom-sheet>
</template>

3. Available props.

overlay?: boolean
overlayColor?: string
maxWidth?: number
maxHeight?: number
transitionDuration?: number
overlayClickClose?: boolean
canSwipe?: boolean

4. Events.

  • @opened
  • @closed
  • @dragging-up
  • @dragging-down

Preview:

Touch-friendly Bottom Sheet For Vue 3

Changelog:

v3.0.0 (08/02/2023)

  • New version, new code, new logic

v2.0.5 (04/22/2023)

  • Added initial frames to animations for unsupported devices.
  • Now backdrop element is fixed instead of absolute.

Add Comment