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

Menubar cosmetics

pull/6596/head
Cagatay Civici 2024-10-16 12:36:52 +03:00
parent 7cfd170b74
commit 3f8d470499
3 changed files with 41 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/showcase/doc/menubar/RouterDoc.vue
View File

@ -8,13 +8,13 @@
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
<span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a>
</template>
</Menubar>
@ -70,13 +70,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
<span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a>
</template>
</Menubar>
@ -89,13 +89,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
<span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a>
</template>
</Menubar>
@ -156,13 +156,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
<span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a>
</template>
</Menubar>

118
apps/showcase/doc/menubar/TemplateDoc.vue
View File

@ -20,16 +20,15 @@
</template>
<template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
<i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a>
</template>
<template #end>
<div class="flex items-center gap-2">
<InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
<InputText placeholder="Search" type="text" class="w-36" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
</div>
</template>
@ -47,13 +46,10 @@ export default {
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
badge: 3,
items: [
{
label: 'Core',
@ -65,37 +61,16 @@ export default {
icon: 'pi pi-server',
shortcut: '⌘+B'
},
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{
separator: true
},
{
label: 'Templates',
icon: 'pi pi-palette',
items: [
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
}
]
}
]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
],
code: {
basic: `
@ -108,11 +83,10 @@ export default {
</template>
<template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
<i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a>
</template>
<template #end>
@ -141,11 +115,10 @@ export default {
</template>
<template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
<i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a>
</template>
<template #end>
@ -167,13 +140,10 @@ export default {
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
badge: 3,
items: [
{
label: 'Core',
@ -185,38 +155,17 @@ export default {
icon: 'pi pi-server',
shortcut: '⌘+B'
},
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{
separator: true
},
{
label: 'Templates',
icon: 'pi pi-palette',
items: [
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
}
]
}
]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
]
};
}
};
@ -240,11 +189,10 @@ export default {
</template>
<template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span>{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
<i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a>
</template>
<template #end>
@ -265,13 +213,10 @@ const items = ref([
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
badge: 3,
items: [
{
label: 'Core',
@ -283,37 +228,16 @@ const items = ref([
icon: 'pi pi-server',
shortcut: '⌘+B'
},
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{
separator: true
},
{
label: 'Templates',
icon: 'pi pi-palette',
items: [
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
}
]
}
]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
]);
<\/script>
`

17
packages/primevue/src/menubar/style/MenubarStyle.js
View File

@ -123,7 +123,7 @@ const theme = ({ dt }) => `
z-index: 1;
background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')};
border-radius: ${dt('menubar.border.radius')};
border-radius: ${dt('menubar.submenu.border.radius')};
box-shadow: ${dt('menubar.submenu.shadow')};
color: ${dt('menubar.submenu.color')};
flex-direction: column;
@ -189,14 +189,16 @@ const theme = ({ dt }) => `
position: absolute;
display: none;
width: 100%;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
padding: ${dt('menubar.submenu.padding')};
background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')};
box-shadow: ${dt('menubar.submenu.shadow')};
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
border-radius: ${dt('menubar.item.border.radius')};
border-radius: ${dt('menubar.submenu.border.radius')};
gap: ${dt('menubar.submenu.gap')};
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
@ -205,10 +207,6 @@ const theme = ({ dt }) => `
.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
@ -244,6 +242,7 @@ const theme = ({ dt }) => `
box-shadow: none;
border: 0 none;
padding-left: ${dt('menubar.submenu.mobile.indent')};
padding-right: 0;
}
`;