Fixed - start and end slots for MegaMenu, remove default slot

pull/1533/head
Cagatay Civici 2021-08-27 17:02:32 +03:00
parent 5b0532aeca
commit 3f5d6a2bf1
4 changed files with 23 additions and 9 deletions
api-generator/components
src
components/megamenu
views/megamenu

View File

@ -20,6 +20,14 @@ const MegaMenuProps = [
];
const MegaMenuSlots = [
{
name: "start",
description: "Custom content before the content"
},
{
name: "end",
description: "Custom content after the content"
},
{
name: "item",
description: "Template of a menuitem."

View File

@ -9,7 +9,8 @@ interface MegaMenuProps {
declare class MegaMenu {
$props: MegaMenuProps;
$slots: {
'': VNode[];
start: VNode[];
end: VNode[];
item: VNode[];
}
}

View File

@ -1,5 +1,8 @@
<template>
<div :class="containerClass">
<div class="p-megamenu-start" v-if="$slots.start">
<slot name="start"></slot>
</div>
<ul class="p-megamenu-root-list" role="menubar">
<template v-for="(category,index) of model" :key="category.label + '_' + index">
<li v-if="visible(category)" :class="getCategoryClass(category)" :style="category.style"
@ -50,8 +53,8 @@
</li>
</template>
</ul>
<div class="p-megamenu-custom" v-if="$slots.default">
<slot></slot>
<div class="p-megamenu-end" v-if="$slots.end">
<slot name="end"></slot>
</div>
</div>
</template>

View File

@ -142,17 +142,19 @@ export default {
</code></pre>
<h5>Custom Content</h5>
<p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.
Additionally, MegaMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.
</p>
<h5>Templating</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre>
&lt;MegaMenu :model="items"&gt;
&lt;InputText placeholder="Search" type="text" /&gt;
&lt;Button label="Logout" icon="pi pi-power-off" /&gt;
&lt;template #start&gt;
Before
&lt;/template&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;/template&gt;
&lt;template #end&gt;
After
&lt;/template&gt;
&lt;/MegaMenu&gt;
</template>
</code></pre>