Usage
Zoom Avant is really simple to use. But if you want more control, you can access to differents slots and props to cover all your needs.
Basic
This example cover the basic of Zoom Avant. The ZAvant component is the root element. After that you can build with ZAvantItem and put on it your links or a submenu with ZAvantMenu
template
<template>
<ZAvant>
<ZAvantItem>
<ZAvantMenu next="Go to level 1" back="Back to root">
<ZAvantItem>Hello</ZAvantItem>
<ZAvantItem>world</ZAvantItem>
<ZAvantItem>
<ZAvantMenu next="Go to level 2" back="Back to level 1">
<ZAvantItem>Hello</ZAvantItem>
<ZAvantItem>world</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
<ZAvantItem>
<a href="#">Bonjour le monde</a>
</ZAvantItem>
</ZAvant>
</template>
Advanced
This exemple is more complexe using props and slots. You can check the components page for more information.
template
<template>
<ZAvant :dynamic-height="true">
<ZAvantItem>
<ZAvantMenu next="Item 0 1">
<ZAvantItem>Item 1 1</ZAvantItem>
<ZAvantItem>Item 1 2</ZAvantItem>
<ZAvantItem>Item 1 3</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
<ZAvantItem>
<ZAvantMenu next="Item 0 2" back="Back to root">
<ZAvantItem>Item 2 1</ZAvantItem>
<ZAvantItem>Item 2 2</ZAvantItem>
<ZAvantItem>Item 2 2</ZAvantItem>
<ZAvantItem>
<ZAvantMenu>
<template #next>
<span>Item 2 3</span>
</template>
<template #back>
<span>Back to 1</span>
</template>
<template #default>
<ZAvantItem>
<a href="#">Item 2 4</a>
</ZAvantItem>
<ZAvantItem>
<a href="#">Item 2 5</a>
</ZAvantItem>
</template>
</ZAvantMenu>
</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
<ZAvantItem>
<a href="#">Item 0 3</a>
</ZAvantItem>
</ZAvant>
</template>
Control programatically
You can control the Drilldown programatically with the v-model property. You need to pass an array with number values.
With this, you can reset the drilldown, start the drilldown at an another place or make a global back button outside the component.
template
<script lang="ts" setup>
const model = ref<number[]>([])
</script>
<template>
<div>
<p>Model : {{ model.join(' | ') }}</p>
<ZAvant :dynamic-height="true" v-model="model">
<ZAvantItem>
<ZAvantMenu next="Item 1">
<ZAvantItem>Item 1 1</ZAvantItem>
<ZAvantItem>Item 1 2</ZAvantItem>
<ZAvantItem>Item 1 3</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
<ZAvantItem>
<ZAvantMenu next="Item 2" back="Back to root">
<ZAvantItem>Item 2 1</ZAvantItem>
<ZAvantItem>Item 2 2</ZAvantItem>
<ZAvantItem>Item 2 2</ZAvantItem>
<ZAvantItem>
<ZAvantMenu>
<template #next>
<span>Item 2 3</span>
</template>
<template #back>
<span>Back to 1</span>
</template>
<template #default>
<ZAvantItem>
<a href="#">Item 2 4</a>
</ZAvantItem>
<ZAvantItem>
<a href="#">Item 2 5</a>
</ZAvantItem>
</template>
</ZAvantMenu>
</ZAvantItem>
</ZAvantMenu>
</ZAvantItem>
<ZAvantItem>
<a href="#">Item 3</a>
</ZAvantItem>
</ZAvant>
<button style="display: block" @click="model = [2, 1]">
Go to target element
</button>
<button style="display: block" @click="model.pop()">
Outside back button
</button>
</div>
</template>