🔥 VUE3-SIDE-PANEL

Easy to use and flexible
screenside modal component

npm i vue3-side-panel 
// main.ts
import { createApp } from 'vue';
import VueSidePanel from 'vue3-side-panel';
import 'vue3-side-panel/dist/vue3-side-panel.css'

const app = createApp(App);
app.use(VueSidePanel);

Options

Transition name

Duration 

// BASIC EXAMPLE
<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    setup() {
      return {
        isOpened: ref(false)
      }
    }
  })
</script>
<template>
  <VueSidePanel
		v-model="isOpened"
		lock-scroll
		width="600px"
  >
		 <div style="padding-top: 70px; color: #f14668">
        <h2
          v-for="item in 50"
          :key="item"
          :style="{fontSize: '58px', fontWeight: 700, opacity: item * 2 / 100, lineHeight: '43px'}"
        >
          This is scrolled body!
        </h2>
      </div>

  </VueSidePanel>
</template>

Documentation

Properties

id-nameStringdefault: 'vsp-container'ID of div element which contain the all side panels
side'right' | 'bottom' | 'left' | 'top'default: 'right'Screenside for a modal panel
rerenderBooleandefault: false By default, the modal is rendered once,
and changing v-model simply causes show or hide.
You can render modal on opening if set the true value.
hide-close-btnBooleandefault: falseHide the close button component which appears by default
no-closeBooleandefault: false Disable the ability to close the panel by clicking on the overlay
z-indexNumber | 'auto' | undefineddefault: 'auto' By default the component finds and sets the maximum z-index of your DOM.
You will disable it if you set a specific value or 'undefined'
widthStringdefault: 'auto' Min-width style property for the side panel.
Example: '500px' NOTICE! Works only with 'right' and 'left' values of side option
heightStringdefault: 'auto' Min-height style property for the side panel. Example: '500px'
NOTICE! Works only with 'top' and 'bottom' values of side option
lock-scrollBooleandefault: false Locks the body scroll if you set it to true.
NOTICE! For some css frameworks this is not enough. Read the description of the lock-scroll-html option
lock-scroll-htmlBooleandefault: true Works only with the lock-scroll option.
Bulma alike frameworks add "overflow-y: scroll;" option to the html tag and BSL (body-scroll-lock library) stops working after that.
This option helps to resolve this problem. You can turn it off if you are not suffering of this issue.
transition-nameString | undefineddefault: undefined There are slide-right | slide-left | slide-top | slide-bottom | undefined options to use. Under the hood, selecting 'undefined' simply sets
slide-right if the side == 'right' or
slide-left if the side == 'left'

Animation works through <Transtion> Vue component.
You can use your own transition name to override the default animation. For example: setting transition-name="my-transition" expects you to create at least these classes with your own css
.my-transition-enter-active and .my-transition-leave-active

@see https://vuejs.org/guide/built-ins/transition.html
overlay-colorStringdefault: 'black' Color of overlay that you can see under a side panel.
This is a style option and it is why you can use a different string format to set a color.
For example: rgb(0, 22, 22), #aaa;, white also suit
overlay-opacityNumberdefault: 0.5Opacity of the overlay
overlay-durationNumberdefault: 500 How fast the overlay spawn animation works. ( in milliseconds )
panel-colorStringdefault: 'white' Default color of main container. This is a style option so it can be any string that the browser supports.
See 'overlay-color' to find the examples
panel-durationNumberdefault: 300 This is the same as the overlay-duration option. See above
header-classStringdefault: '' It will be necessary in cases where you need to change the default styles of a static header block within a panel
body-classStringdefault: '' It will be necessary in cases where you need to change the default styles of a scrolled body block within a panel
footer-classStringdefault: '' It will be necessary in cases where you need to change the default styles of a static footer block within a panel

Events

@openedCalled when opening animation is finished and modal is opened
@closedCalled when closing animation is finished and modal is closed
👉 Github