Fixed #246 - Add menubar-left and menubar-right slots to Menubar

primefaces · Apr 7, 2020 · c4ea334 · c4ea334
1 parent 27fc8a1
commit c4ea334
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
@@ -1,9 +1,15 @@
 <template>
     <div class="p-menubar p-component">
+        <div class="p-menubar-start" v-if="$slots.start">
+            <slot name="start"></slot>
+        </div>
         <MenubarSub :model="model" :root="true" />
         <div class="p-menubar-custom" v-if="$slots.default">
             <slot></slot>
         </div>
+        <div class="p-menubar-end" v-if="$slots.end">
+            <slot name="end"></slot>
+        </div>
     </div>
 </template>
 
@@ -26,6 +32,7 @@ export default {
 <style>
 .p-menubar {
     padding: .25em;
+    display: flex;
 }
 
 .p-menubar .p-menu-separator {
@@ -122,7 +129,11 @@ export default {
 }
 
 .p-menubar .p-menubar-custom {
-    float: right;
+    margin-left: auto;
     padding: .25em;
 }
+
+.p-menubar .p-menubar-end {
+    margin-left: auto;
+}
 </style>
diff --git a/src/views/menubar/MenubarDemo.vue b/src/views/menubar/MenubarDemo.vue
@@ -9,8 +9,10 @@
 
         <div class="content-section implementation">
             <Menubar :model="items">
-                <InputText placeholder="Search" type="text" />
-                <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
+                <template #end>
+                    <InputText placeholder="Search" type="text" />
+                    <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
+                </template>
             </Menubar>
         </div>
 

diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
@@ -154,12 +154,16 @@ export default {
 </CodeHighlight>
 
                 <h3>Custom Content</h3>
-                <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-menubar-custom" style class to change the location of the content.</p>
+                <p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;Menubar :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 #end&gt;
+        After
+    &lt;/template&gt;
 &lt;/Menubar&gt;
 </template>
 </CodeHighlight>
@@ -241,8 +245,10 @@ export default {
 <CodeHighlight>
 <template v-pre>
 &lt;Menubar :model="items"&gt;
-    &lt;InputText placeholder="Search" type="text" /&gt;
-    &lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/&gt;
+    &lt;template #end&gt;
+        &lt;InputText placeholder="Search" type="text" /&gt;
+        &lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/&gt;
+    &lt;/template&gt;
 &lt;/Menubar&gt;
 </template>
 </CodeHighlight>