Modal window that can be swiped to close.（Swipeable Bottom Sheet）
Installations
npm install @takuma-ru/vue-swipe-modalDeveloper Guide
Typescript
Yes
Module System
ESM
Node Version
20.9.0
NPM Version
10.1.0
Score
56.2
Supply Chain
88.1
Quality
79.4
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (40.58%)
Vue (38.73%)
JavaScript (15.13%)
CSS (4.36%)
HTML (1.2%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
81,005
Last Day
23
Last Week
997
Last Month
4,133
Last Year
49,526
GitHub Statistics
MIT License
70 Stars
342 Commits
7 Forks
1 Watchers
4 Branches
2 Contributors
Updated on Feb 08, 2025
Maintainers
Package Meta Information
Latest Version
5.0.5
Package Id
@takuma-ru/vue-swipe-modal@5.0.5
Unpacked Size
42.31 kB
Size
10.92 kB
File Count
7
NPM Version
10.1.0
Node Version
20.9.0
Published on
May 29, 2024
Total Downloads
Cumulative downloads
Total Downloads
81,005
Last Day
187.5%
23
Compared to previous day
Last Week
22.9%
997
Compared to previous week
Last Month
30.5%
4,133
Compared to previous month
Last Year
124.7%
49,526
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Dev Dependencies
18
@takuma-ru/vue-swipe-modal
Description
Modal window that can be swiped to close.（Swipeable Bottom Sheet）
⚠️ WARN ⚠️
Due to the eol of vue2, vue2 is no longer supported. vue2 can be used with v4.0.7 or earlier, but we are not responsible for any problems that may occur.
DEMO
Documentation
vue-swipe-modal-docs.takumaru.dev
Getting Started
1. Install
vue3
1npm i @takuma-ru/vue-swipe-modal@^5.0.0
vue2 (deprecated)
1npm i @takuma-ru/vue-swipe-modal@^4.0.0 @vue/composition-api
2. Use
Import and use the modal with the vue file you want to use.
1<script lang="ts" setup> 2import { ref } from "vue"; 3import { SwipeModal } from "@takuma-ru/vue-swipe-modal"; 4 5const isOpen = ref(false); 6</script> 7 8<template> 9 <button @click="isOpen = true"> 10 Open modal 11 </button> 12 <SwipeModal 13 v-model="isOpen" 14 snap-point="auto" 15 > 16 <button @click="isOpen = false"> 17 Close modal 18 </button> 19 Modal content 20 </SwipeModal> 21</template> 22 23<style lang="scss" scoped> 24:deep(.modal-style) { 25 box-sizing: border-box; 26 width: 100%; 27 color: white; 28 background-color: #1d1b20; 29 border-radius: 1rem 1rem 0 0; 30 31 @media (prefers-color-scheme: light) { 32 color: black; 33 background-color: #f7f2fa; 34 box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%); 35 } 36} 37</style>
License
No vulnerabilities found.
No security vulnerabilities found.