@takuma-ru/vue-swipe-modal
v5.0.5
Published
Swipeable Bottom Sheet library for vue2 and vue3
Downloads
5,890
Maintainers
Readme
@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
npm i @takuma-ru/vue-swipe-modal@^5.0.0
vue2 (deprecated)
npm 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.
<script lang="ts" setup>
import { ref } from "vue";
import { SwipeModal } from "@takuma-ru/vue-swipe-modal";
const isOpen = ref(false);
</script>
<template>
<button @click="isOpen = true">
Open modal
</button>
<SwipeModal
v-model="isOpen"
snap-point="auto"
>
<button @click="isOpen = false">
Close modal
</button>
Modal content
</SwipeModal>
</template>
<style lang="scss" scoped>
:deep(.modal-style) {
box-sizing: border-box;
width: 100%;
color: white;
background-color: #1d1b20;
border-radius: 1rem 1rem 0 0;
@media (prefers-color-scheme: light) {
color: black;
background-color: #f7f2fa;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
}
</style>