@takuma-ru/vue-swipe-modal
TypeScript icon, indicating that this package has built-in type declarations

5.0.5 • Public • Published

@takuma-ru/vue-swipe-modal

featureGraphic npm npm bundle size (scoped)

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

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>

License

MIT - Copyright (c) 2023 takuma-ru

Package Sidebar

Install

npm i @takuma-ru/vue-swipe-modal

Weekly Downloads

916

Version

5.0.5

License

MIT

Unpacked Size

43.3 kB

Total Files

7

Last publish

Collaborators

  • takuma-ru