Swipeable Bottom Sheet Component – vue-swpie-modal

A Vue 3/2 component to create a swipeable inspired by the mobile bottom sheet as you’ve seen on iOS and Android.

How to use it:

1. Import and register the modal component.

// Vue 2
import { defineComponent, ref, reactive } from '@vue/composition-api';
import { swipeModal } from '@takuma-ru/vue-swipe-modal'
export default defineComponent({
  components: {
    swipeModal,
  },
  setup () {
    const modal = ref<boolean>(false)
    return {
      modal,
    }
  }
})

// Vue 3
import { ref } from 'vue'
import { swipeModal } from '@takuma-ru/vue-swipe-modal'
const modal = ref(false)

2. Add the swipeable modal to the template.

<template>
  <div>
    <!-- Trigger Button -->
    <button @click="modal = true">open</button>
    <!-- Modal Component -->
    <swipe-modal
      v-model="modal"
      contents-height="50vh"
      border-top-radius="16px"
    >
      <h1>Modal Content</h1>
    </swipe-modal>
  </div>
</template>

3. Available component props.

// modal
modelValue: {
  type: Boolean,
  default: false,
},
dark: {
  type: Boolean,
  default: false,
},
// modal_background
persistent: {
  type: Boolean,
  default: false,
},
backgroundColor: {
  type: String,
  default: '#80808080',
},
// modal_contents
fullscreen: {
  type: Boolean,
  default: false,
},
noTip: {
  type: Boolean,
  default: false,
},
contentsWidth: {
  type: String,
  default: '100%',
},
contentsHeight: {
  type: String,
  default: '30vh',
},
borderTopRadius: {
  type: String,
  default: null,
},
borderTopLeftRadius: {
  type: String,
  default: '0px',
},
borderTopRightRadius: {
  type: String,
  default: '0px',
},
contentsColor: {
  type: String,
  default: 'white',
},
tipColor: {
  type: String,
  default: '#c8c8c8',
},
darkContentsColor: {
  type: String,
  default: '#1E1E1E',
},

Preview:

Changelog:

v4.0.7 (11/02/2022)

• Update

Download Details:

Author: takuma-ru

Live Demo: https://vue-swipe-modal-vue2.vercel.app/

Download Link: https://github.com/takuma-ru/vue_SwipeModal/archive/refs/heads/main.zip

Official Website: https://github.com/takuma-ru/vue_SwipeModal

Install & Download:

# Vue 3
$ yarn add @takuma-ru/[email protected]^4.0.0

# Vue 2
$ yarn add @takuma-ru/[email protected]^4.0.0 @vue/composition-api