Vue.js 3 vue-bottom-sheet Example to Build Bottom Sheet Footer Swipe Menu in Browser

App.vue

<template>
  <div>
    <!-- Buttons to trigger open and close -->
    <button @click="open">Open Bottom Sheet</button>
    <button @click="close">Close Bottom Sheet</button>
    
    <!-- Vue Bottom Sheet component -->
    <vue-bottom-sheet ref="myBottomSheet">
      <h1>Lorem Ipsum</h1>
      <h2>What is Lorem Ipsum?</h2>
      <p>
        <strong>Lorem Ipsum</strong> is simply dummy text used in the printing and typesetting industry.
      </p>
    </vue-bottom-sheet>
  </div>
</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);
// Open the bottom sheet
const open = () => {
  myBottomSheet.value.open();
}
// Close the bottom sheet
const close = () => {
  myBottomSheet.value.close();
}
</script>

<div>

<button @click="open">Open Bottom Sheet</button>

<button @click="close">Close Bottom Sheet</button>

<vue-bottom-sheet ref="myBottomSheet">

<h1>Lorem Ipsum</h1>

<h2>What is Lorem Ipsum?</h2>

<p>

<strong>Lorem Ipsum</strong> is simply dummy text used in the printing and typesetting industry.

</p>

</vue-bottom-sheet>

</div>

</template>

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";

import "@webzlodimir/vue-bottom-sheet/dist/style.css";

import { ref } from "vue";

const myBottomSheet = ref(null);

// Open the bottom sheet

const open = () => {

myBottomSheet.value.open();

}

// Close the bottom sheet

const close = () => {

myBottomSheet.value.close();

}

</script>

Vue.js 3 vue-bottom-sheet Example to Build Bottom Sheet Footer Swipe Menu in Browser

Comments

Leave a Reply Cancel reply

Archives