@takuma-ru/vue-swipe-modal NPM

@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

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"
    snapPoint="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>