Jenesius / vue-modal

🖖The progressive and simple modal system for Vue.js v3
https://modal.jenesius.com
MIT License
145 stars 14 forks source link

add side drawer feature #88

Closed morteza-mortezai closed 1 year ago

morteza-mortezai commented 1 year ago

Hi, Is it possible to implement this modal as a side drawer ? may by adding a new animation to be opened from left or right while it cover half of screen

Jenesius commented 1 year ago

@morteza-mortezai ,Hi, can you provide the example.


Hmm, now we can change all animation by override css. I not at home now and can't check next solution:

  1. Add to Your modal the next css class .modal-test
  2. Add global css rules: .modal-container:has(.modal-test) {...}

This rules must be applied only for this one modal.

If it's will not work I will find the solution after some hours.

Related link: css has Related link: modal styles

Jenesius commented 1 year ago

Also, I created the following example:

rec-tab (8)

You can play around with it by cloning the repository and running npm run serve. Then open the resulting server and go to the Sidebar modal Example. Also this example is here. If that's what suits you - I recommend looking at the css described in this folder inside the vue component.

If this is not the right or not quite the solution - let's look further!

morteza-mortezai commented 1 year ago

that's nice !