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

Better alignment for MegaMenu

pull/5806/head
Cagatay Civici 2024-05-30 10:45:23 +03:00
parent d868228ce2
commit 65b17ad53b
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -12,6 +12,12 @@ const theme = ({ dt }) => `
gap: ${dt('megamenu.gap')}; gap: ${dt('megamenu.gap')};
} }
.p-megamenu-start,
.p-megamenu-end {
display: flex;
align-items: center;
}
.p-megamenu-root-list { .p-megamenu-root-list {
margin: 0; margin: 0;
padding: 0; padding: 0;

6
components/lib/menubar/style/MenubarStyle.js
View File

@ -12,6 +12,12 @@ const theme = ({ dt }) => `
gap: ${dt('menubar.gap')}; gap: ${dt('menubar.gap')};
} }
.p-menubar-start,
.p-megamenu-end {
display: flex;
align-items: center;
}
.p-menubar-root-list, .p-menubar-root-list,
.p-menubar-submenu { .p-menubar-submenu {
display: flex; display: flex;

8
doc/megamenu/TemplateDoc.vue
View File

@ -32,7 +32,7 @@
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
<div v-else class="flex flex-col items-start gap-4"> <div v-else class="flex flex-col items-start gap-4 p-2">
<img alt="megamenu-demo" :src="item.image" class="w-full" /> <img alt="megamenu-demo" :src="item.image" class="w-full" />
<span>{{ item.subtext }}</span> <span>{{ item.subtext }}</span>
<Button :label="item.label" outlined /> <Button :label="item.label" outlined />
@ -121,7 +121,7 @@ export default {
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
<div v-else class="flex flex-col items-start gap-4"> <div v-else class="flex flex-col items-start gap-4 p-2">
<img alt="megamenu-demo" :src="item.image" class="w-full" /> <img alt="megamenu-demo" :src="item.image" class="w-full" />
<span>{{ item.subtext }}</span> <span>{{ item.subtext }}</span>
<Button :label="item.label" outlined /> <Button :label="item.label" outlined />
@ -162,7 +162,7 @@ export default {
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
<div v-else class="flex flex-col items-start gap-4"> <div v-else class="flex flex-col items-start gap-4 p-2">
<img alt="megamenu-demo" :src="item.image" class="w-full" /> <img alt="megamenu-demo" :src="item.image" class="w-full" />
<span>{{ item.subtext }}</span> <span>{{ item.subtext }}</span>
<Button :label="item.label" outlined /> <Button :label="item.label" outlined />
@ -262,7 +262,7 @@ export default {
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
<div v-else class="flex flex-col items-start gap-4"> <div v-else class="flex flex-col items-start gap-4 p-2">
<img alt="megamenu-demo" :src="item.image" class="w-full" /> <img alt="megamenu-demo" :src="item.image" class="w-full" />
<span>{{ item.subtext }}</span> <span>{{ item.subtext }}</span>
<Button :label="item.label" outlined /> <Button :label="item.label" outlined />