@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

Directory

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

MIT - Copyright (c) 2023 takuma-ru