diff --git a/api-generator/components/menu.js b/api-generator/components/menu.js index 7a928a06c..cd75e0365 100644 --- a/api-generator/components/menu.js +++ b/api-generator/components/menu.js @@ -49,6 +49,14 @@ const MenuEvents = [ ]; const MenuSlots = [ + { + name: 'start', + description: 'Custom content before the content' + }, + { + name: 'end', + description: 'Custom content after the content' + }, { name: 'item', description: 'Template of a menuitem.' diff --git a/components/menu/Menu.d.ts b/components/menu/Menu.d.ts index e72c4118b..a36795045 100755 --- a/components/menu/Menu.d.ts +++ b/components/menu/Menu.d.ts @@ -49,6 +49,14 @@ export interface MenuProps { } export interface MenuSlots { + /** + * Custom start template. + */ + start: () => VNode[]; + /** + * Custom end template. + */ + end: () => VNode[]; /** * Custom item template. * @param {Object} scope - item slot's params. diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue index 487d0a1f9..84910f1eb 100644 --- a/components/menu/Menu.vue +++ b/components/menu/Menu.vue @@ -2,6 +2,9 @@
+
+ +
+
+ +
diff --git a/pages/menu/MenuDoc.vue b/pages/menu/MenuDoc.vue index 3f4d687a3..a2b09cdac 100755 --- a/pages/menu/MenuDoc.vue +++ b/pages/menu/MenuDoc.vue @@ -93,12 +93,18 @@ toggle(event) {
Templating
-

Menu offers content customization with the item template that receives the menuitem instance from the model as a parameter.

+

Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the item template that receives the menuitem instance from the model as a parameter.


 <Menu :model="items">
+    <template #start>
+		Start
+	</template>
     <template #item="{item}">
         <a :href="item.url">{{item.label}}</a>
     </template>
+    <template #end>
+		End
+	</template>
 </Menu>
 
 
@@ -265,6 +271,14 @@ toggle(event) { item item: Menuitem instance + + start + - + + + end + - + @@ -284,6 +298,14 @@ toggle(event) { p-menu Container element. + + p-menu-start + Container of the start slot. + + + p-menu-end + Container of the end slot. + p-menu-list List element.