Components
This page details the three components which compose the Zoom Avant.
You need to know about VueJS 3 props and slots.
ZAvant
This is the root element of the drilldown.
Props
dynamicHeight
Change the height dynamically. If false, it will take the bigger menu height.
Type: boolean
Default: false
<ZAvant :dynamic-height="true"></ZAvant>
back
Set all the button back text.
Type: string
Default: Back
<ZAvant back="Précédent"></ZAvant>
v-model
The path of the tree.
For example [2, 1] will show the first menu inside the second menu.
Type: number[]
Default: []
<ZAvant v-model="[1]"></ZAvant>
ZAvantMenu
Props
next
Set the button next text.
Type: string
Default: Next
<ZAvantMenu next="Next 1 level"></ZAvantMenu>
back
Set the button back text.
Type: string
Default: Back
<ZAvantMenu back="Previous 1 level"></ZAvantMenu>
Slots
next
Set the button next inner HTML. It will override the next props for this item.
<ZAvantMenu>
<template #next>
Next <span>➡️</span>
</template>
<template #default>
<!--My menu items-->
</template>
</ZAvantMenu>
back
Set the button back inner HTML. It will override the back global options and back props for this item.
<ZAvantMenu>
<template #back>
<span>⬅️</span> Back
</template>
<template #default>
<!--My menu items-->
</template>
</ZAvantMenu>
ZAvantItem
Nothing special here, just a component to generate the <li class="zavant__item"></li> element.
<ZAvantItem>
Hello
<span>World</span>
</ZAvantItem>