A Swipeable Bottom Sheet Modal Build With Vue - スワイプして閉じれるモーダルウィンドウ

vue_SwipeModal

A modal window that can be swiped to close. (Commonly known as: Swipeable Bottom Sheet)

Requirement

name version
nuxt.js 2.15.3
core-js 3.9.1

Getting Started

npm i nekoo_vue_swipemodal

<template>
  <div>
    <button @click = "modal = true"> open </ button>

    <swipemodal
      v-model = "modal"
      height = "80vh"
      width = "100%"
      radius = "20px"
    >
      <h1> contents </ h1>
    </ swipemodal>
  </ div>
</ template>

<script>
import swipemodal from'nekoo_vue_swipemodal'
import'nekoo_vue_swipemodal /dist/swipemodal.css'

export default {
  name:'App',

  data () {
    return {
      modal: false
    }
  },

  components: {
    swipemodal
  }
}
</ script>

Installation

Variable Data type Initial value Description
v-model Boolean false Assign a variable that specifies the opening and closing of modal
height String auto Modal height
width String auto Modal width
max-height String null Maximum modal height
max-width String null Maximum modal width
radius String 20px Rounded upper corners of Modal
color String #FFFFFF Modal background color
persistent Boolean false Do you want to close the modal when you click outside the modal?
fullscreen Boolean false Do you want the modal to fill the screen? If true, height will be 100vh
notip Boolean false Do you want to display the decoration at the top of the modal? If true, it will not be displayed and swipe motion cannot be performed using the mouse.

Download Details:

Author: takuma-ru
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/takuma-ru/vue_SwipeModal
License: MIT

#vue #vuejs

A Swipeable Bottom Sheet Modal Build With Vue - スワイプして閉じれるモーダルウィンドウ