feat: add breadcrumb navigation example
This commit is contained in:
@@ -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 />
|
||||
|
@@ -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));
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user