See My Upcoming Book On Ionic & Vue JS
Creating an Animated Accordion List Component in VueJS
Using vue animations, vue slots & HTML data attributes I walk through how to create a component that you can pass a list of data and it will create a list with a header and a body that can be expanded and collapsed.
This video is not heavy on the ionic framework as most of my other videos are, but this component that is built here can be used in ionic or a plain vuejs application
Source Code
Links and References Used
- Data Attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- Vue Animations: https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components
- Vue Slots: https://v3.vuejs.org/guide/component-slots.html#scoped-slots
Top comments (4)
Yesterday after I posted a video showing how to build an accordion component in
Ionic framework and vuejs I realized it was overkill; I rebuilt the same thing using #HTML5 & #CSS #javascript
Here is a link to the video and the source code
youtube.com/watch?v=4BGfvKpP-b0SEE
And I love you to post a video on youtube talk about how to use a feature of Ionic Vue. How to use components and fetch data by ionic vue.
Actually, you are saving me a lot in my project when I dead-end no other way to find the greater answer.
Great! 🚀
Yeah, I agreed with you. Ionic Vue is not stable for now to the public on ionic. Ionic Vue was missing a lot of great components like another fw.