31. Using a single Vuetify Expansion Panel to Get Slide Up/Down when Showing / Hiding an Area

Опубликовано: 21 Апрель 2025
на канале: Dedicated Managers

1,836

I had an area of my interface that contains a form, which I wanted the form to have Slide Up / Slide Down when its visiblity changed via a toolbar (header) being clicked. I couldn't use the v-list or v-list-group component as it messed up the formatting of the form. I ended up using an Expansion Panel.

Here are the codepens I show in the video:

Vuetify - Expansion Panel Controlled by V-Toolbar (to get slide up/down effect on an area)
https://codepen.io/DedicatedManager/p...

Veutify v-slide-y-transition controlled by V-Toolbar
https://codepen.io/DedicatedManager/p...

Veutify V-List visibility controlled by Toolbar (with transition)
https://codepen.io/DedicatedManager/p...

This video is part of a playlist:
• Real Time Database with Vue.js + Vuex...

It is also part of a blog post on DedicatedManagers.com:
http://www.dedicatedmanagers.com/real...

The source code for this project is available publicly on the Dedicated Managers Github account:
https://github.com/DedicatedManagers/...