Javascript Vue

A Swipeable Bottom Sheet Modal Build With Vue1 min read

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.

React Admin Templates and Themes

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest