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> <template>
<div class="p-menubar p-component"> <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" /> <MenubarSub :model="model" :root="true" />
<div class="p-menubar-custom" v-if="$slots.default"> <div class="p-menubar-custom" v-if="$slots.default">
<slot></slot> <slot></slot>
</div> </div>
<div class="p-menubar-end" v-if="$slots.end">
<slot name="end"></slot>
</div>
</div> </div>
</template> </template>
@ -26,6 +32,7 @@ export default {
<style> <style>
.p-menubar { .p-menubar {
padding: .25em; padding: .25em;
display: flex;
} }
.p-menubar .p-menu-separator { .p-menubar .p-menu-separator {
@ -122,7 +129,11 @@ export default {
} }
.p-menubar .p-menubar-custom { .p-menubar .p-menubar-custom {
float: right; margin-left: auto;
padding: .25em; padding: .25em;
} }
.p-menubar .p-menubar-end {
margin-left: auto;
}
</style> </style>

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

@ -9,8 +9,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Menubar :model="items"> <Menubar :model="items">
<template #end>
<InputText placeholder="Search" type="text" /> <InputText placeholder="Search" type="text" />
<Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/> <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
</template>
</Menubar> </Menubar>
</div> </div>

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

@ -154,12 +154,16 @@ export default {
</CodeHighlight> </CodeHighlight>
<h3>Custom Content</h3> <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> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
&lt;InputText placeholder="Search" type="text" /&gt; &lt;template #start&gt;
&lt;Button label="Logout" icon="pi pi-power-off" /&gt; Before
&lt;/template&gt;
&lt;template #end&gt;
After
&lt;/template&gt;
&lt;/Menubar&gt; &lt;/Menubar&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -241,8 +245,10 @@ export default {
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
&lt;template #end&gt;
&lt;InputText placeholder="Search" type="text" /&gt; &lt;InputText placeholder="Search" type="text" /&gt;
&lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/&gt; &lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/&gt;
&lt;/template&gt;
&lt;/Menubar&gt; &lt;/Menubar&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>