output markup
williamengbjerg opened this issue · comments
Do you have an example for the full html mark-up?
I was more thinking the way to inject the code from the menu vue.
<menu all-attributes> markup here for generating the menu in general</menu>
If I understand the question correctly, that is 4 props (sorry, I just noticed that I forgot to describe another slot in the documentation):
- The first and main one is the default slot-scope, which is responsible for displaying content in the dropdown menu. The component goes through each element of the array with the menu and passes it to these props.
Example:
<vsm-menu :menu="menu">
<template #default="data">
<!--Dropdown Content-->
</template>
</vsm-menu>
- Next 2 props go as an addition to the menu (if we want to add something of our own). This can be clearly seen from the example that was dropped above - we added the Logo on the left and the Sign In button on the right. (Codepen)
Example:
<vsm-menu :menu="menu">
<template slot="before-nav">
<!--Content Left-->
</template>
<template slot="after-nav">
<!--Content Right-->
</template>
</vsm-menu>
- The last slot at the time of writing is for menu items. Those. if you transfer the menu array, then naturally the text will only be displayed, and if we want to push the picture as well, then this can be done through this slot.
Example:
<vsm-menu :menu="menu">
<template #title="data">
<div v-if="data.item.title === 'MyTitle'">
<!--<img src="My additional attribute with image url" :alt="data.item.title">-->
</div>
{{ data.item.title }}
</template>
</vsm-menu>
I think later I will add a complete example with all the filled attributes and other
@Alexeykhr Thanks for the description. It would be really nice with a complete example with all the attributes. I think that would quickly help seeing some results when playing with the feature:)