This is a simple collapsible pattern inspired by the collapsibles used in Bitbucket.
It includes the following features:
- ARIA specifications
- CSS3 animations (translate3d) that needs no javascript hacks
Install the package first:
npm install vue-translate3d-collapsible
Then import it into your component
<script>
import { CollapsiblePanel } from 'vue-translate3d-collapsible'
export default {
components: {
CollapsiblePanel
}
}
</script>
Add the layout styles in your application
<style>
@import "../node_modules/vue-translate3d-collapsible/dist/vue-translated3d-collapsible.css"
</style>
This is an animation that requires no hacks for setting the height of the panel in javascript. The animation is also done only in CSS and therefore is fast.
npm install
npm run serve
npm run build
npm run lint