Easy to use and flexible modal sidebar component for Vue3.

Overview

🔥 Vue3 Side Panel

Easy to use and flexible modal sidebar component for Vue3

alt text

Example and Documentation

Features

  • Top, Right, Bottom, Left sides.
  • Slots for fixed header and footer areas.
  • Body scroll lock included thanks to BSL.
  • Calculating of body height on screen resizing. (useful for setting "height: 100%" inside default slot)

Installation

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);

or for local usage

App.vue

...
import { VueSidePanel } from 'vue3-side-panel';
import 'vue3-side-panel/dist/vue3-side-panel.css'

export default defineComponent({
  components: {
    VueSidePanel
  },
...

Using

The following 3 slots are expected inside the component
  • #header -- not required (Fixed and non scrolled area)
  • #default -- required (Scrolled area)
  • #footer -- not required. (Fixed and non scrolled area)

This is scrolled body!

">
// without fixed areas
<VueSidePanel v-model="isOpened">
  <div style="height: 100%; background-color: #ccc">
    <h2> This is scrolled body! h2>
  div>    
VueSidePanel>

or

">
// with the fixed header, footer, custom close button and fixed body scroll
<VueSidePanel
  v-model="isOpened"
  lock-scroll
  hide-close-btn
>
  <template #header>
    <div>
      <h2> This is fixed header! h2>
      <span @click="isOpened = false"> X span>
    div>
  template>
  <template #default>
    <div style="height: 100%; background-color: #ccc">
      <h2> This is scrolled body! h2>
    div> template> <template #footer> <h2>This is fixed footer!h2> template> VueSidePanel>

Documentation

Property Type Description
id-name String default: 'vsp-container'. ID of div element which contain the all side panels
side 'right' or 'bottom' or 'left' or 'top' default: 'right'. Screenside for a modal panel
hide-close-btn Boolean default: false Hide the close button component which appears by default
no-close Boolean default: false Disable the ability to close the panel by clicking on the overlay
z-index Number or 'auto' or undefined default: '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'
width String default: 'auto' Min-width style property for the side panel. Example: '500px' NOTICE! Works only with 'right' and 'left' values of side option
height String default: 'auto' Min-height style property for the side panel. Example: '500px'. NOTICE! Works only with 'top' and 'bottom' values of side option
lock-scroll Boolean default: 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-html Boolean default: 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.
overlay-color String default: 'black' Color of overlay that you can see under a side panel. This is a CSS 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-opacity Number default: 0.5 The opacity of the overlay
overlay-duration Number default: 500 How fast the overlay spawn animation works. ( in milliseconds )
panel-color String default: 'white'. The default color of the 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-duration Number default: 300 This is the same as the overlay-duration option. See above
header-class String default: '' It will be necessary in cases where you need to change the default styles of a static header block within a panel
body-class String default: '' It will be necessary in cases where you need to change the default styles of a scrolled body block within a panel
footer-class String default: '' It will be necessary in cases where you need to change the default styles of a static footer block within a panel

License

MIT

You might also like...
Vue modal component for Semantic-Ui no jquery
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage modal v-model="showModal" p slot="header"Confirmation needed

modal component for vuejs

vue-modaltor Changelog All notable changes to this project will be documented in this file. vue modal component for vuejs and i hope it be useful for

Vue stackable modal component by Innologica

Stackable modal Stackable modal is a library for modal dialogs which can be stacked by using z-index position. The component uses bootstrap for stylin

Modal component for Vue

vue-modal A modal window component for Vue vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibi

Bootstrap Modal on Vue component

BootstrapVueModal Bootstrap Modal with Vue component It's a vue component of Bootstrap Modal. Include a slots, that you can override them and write yo

Vue modal component for Semantic-Ui no jquery
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage modal v-model="showModal" p slot="header"Confirmation needed

Vue component for creating modal windows using Tailwind CSS.
Vue component for creating modal windows using Tailwind CSS.

Vue component for creating modal windows using Tailwind CSS.

Build A Custom Modal Component In Vue.js

creating-modal-component Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for produc

Vue-modally - a component based vue modal library

vue-modally is a component based vue modal library, in a simpler term, it lets you use any vue component as asynchronous/synchronous modal programmatically

Comments
Releases(v1.1.1)
Owner
Dmitry Golovin
Full-stack web dev
Dmitry Golovin
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final Modal Looking for a Vue 3 version? It's over here ?? Documentation ?? Examples Introduction Vue Final Modal is a renderless component! You c

Vue Final 521 Dec 30, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

??Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final 523 Jan 5, 2023
Easy to use, highly customizable Vue.js modal library.

Vue.js modal Easy to use, highly customizable Vue.js modal library. ?? Examples ?? Documentation ?? Changelog ?? Looking for maintainers ?? Sponsorshi

Yev Vlasenko 4.2k Jan 9, 2023
Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

JounQin 37 Nov 14, 2022
A plugin dedicated for vue3 to show confirm dialog modal

A plugin dedicated for vue3 to show confirm dialog modal. Currently the plugin works only with composition api.

Lukasz Malek 4 Apr 20, 2022
Universal modal plugin for Vue3

Universal modal plugin for Vue3

hoiheart 61 Dec 26, 2022
Reusable Modal component, supports own custom HTML, text and classes.

Vue Modal ?? Intro Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content /

Mel Macaluso 29 Aug 14, 2022
Simple and intuitive, highly customizable modal component for Vue.js.

Transform Vue.js 2.0+ component into modal with powerful layout and transition support

Yuqiao Chen 9 Nov 15, 2022
A simple and lightweight Vue (v2) modal component.

@burhanahmeed/vue-modal-2 A simple and lightweight Vue modal component for Vue 2.x. Documentation Docs: https://initbase.github.io/vue-modal-2/ Demo d

Initbase Labs 6 Dec 4, 2022
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast

v-dialogs · A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast Examples and Documentation Exp

Terry Zeng 126 Sep 25, 2022