• Stars
    star
    206
  • Rank 190,504 (Top 4 %)
  • Language Vue
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3

Example

Vue Bottom Sheet

Size Downloads Version

A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 2 & Vue 3

Installation

NPM

npm install @webzlodimir/vue-bottom-sheet

Yarn

yarn add @webzlodimir/vue-bottom-sheet

Usage

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>Lorem Ipsum</h1>
    <h2>What is Lorem Ipsum?</h2>
    <p>
      <strong>Lorem Ipsum</strong> is simply dummy text
    </p>
  </vue-bottom-sheet>
</template>

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

const myBottomSheet = ref(null)

const open = () => {
  myBottomSheet.value.open();
}

const close = () => {
  myBottomSheet.value.close();
}
</script>

Props

Prop Type Description Example
overlay Boolean Remove back overlay :overlay="false"
click-to-close Boolean Click outside card to close :click-to-close="false"
max-width String Set max-width of component card max-width="640px"
max-height String Set max-height of component card max-height="90%"
effect String Set effect for component card effect="fx-fadein-scale"
rounded Boolean Round the top two corners of the sheet :rounded="false"
full-screen Boolean Enable or disable full-screen mode :full-screen="true"
swipeable Boolean Enable or disable swipe to close :swipeable="false"
overlay-color String Set overlay color with opacity :overlay-color="#0000004D"
background-scrollable Boolean Enable scroll :background-scrollable="true"
background-clickable Boolean Enable background click, doesn't work if click-to-close=true :background-clickable="true"

Events

Event Description Example
opened Fire when card component is opened @opened=""
closed Fire when card component is closed @closed=""

List of effects

  • fx-default
  • fx-fadein-scale
  • fx-slide-from-right
  • fx-slide-from-left

You can see all the effects on the demo page