vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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

pull/310/head
cagataycivici 2020-04-07 11:33:06 +03:00
parent 27fc8a1947
commit c4ea3341d2
3 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/menubar/Menubar.vue
View File

@ -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>

6
src/views/menubar/MenubarDemo.vue
View File

@ -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>

16
src/views/menubar/MenubarDoc.vue
View File

@ -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>