feat: add breadcrumb navigation example

This commit is contained in:
vince
2024-07-19 01:26:13 +08:00
parent 0c245665a9
commit 9ec91ac16d
24 changed files with 188 additions and 75 deletions

View File

@@ -106,6 +106,7 @@ onBeforeUnmount(() => {
<div v-show="!showTooltip" :class="[e('content')]">
<VbenMenuBadge
v-if="rootMenu.props.mode !== 'horizontal'"
class="right-2"
v-bind="props"
/>
<VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />

View File

@@ -507,12 +507,12 @@ $namespace: vben;
}
&.is-light {
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-active-color: hsl(var(--primary-foreground));
--menu-submenu-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--accent));
}

View File

@@ -69,16 +69,17 @@ $namespace: vben;
&.is-dark {
.#{$namespace}-normal-menu__item {
color: hsl(var(--foreground) / 80%);
@apply text-foreground/80;
// color: hsl(var(--foreground) / 80%);
&:not(.is-active):hover {
color: hsl(var(--primary-foreground));
@apply text-foreground;
}
&.is-active {
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
color: hsl(var(--primary-foreground));
@apply text-foreground;
}
}
}
@@ -117,11 +118,11 @@ $namespace: vben;
border-color 0.15s ease;
&.is-active {
@apply text-primary bg-primary/15 dark:bg-accent;
@apply text-primary bg-primary dark:bg-accent;
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
@apply text-primary font-semibold;
@apply text-primary-foreground font-semibold;
}
}

View File

@@ -56,6 +56,7 @@ const hasChildren = computed(() => {
:badge="menu.badge"
:badge-type="menu.badgeType"
:badge-variants="menu.badgeVariants"
class="right-6"
/>
</template>
<template #title>{{ menu.name }}</template>