我正在开发一个带有包含链接的 sidenav 的 sveltekit 应用程序。我无法使我的链接上的事件类样式正常工作。
链接是 NavLink.svelte 中的组件:
<script>
import { page } from '$app/stores';
import Icon from '$lib/Icon.svelte';
export let title;
export let href;
</script>
<a {href} class="link" class:active={$page.path == href}>
<Icon {title} />
</a>
<style>
a.active {
background-color: rgba(0,0,0,0.24);
</style>
这些链接在 SideNav.svelte 中使用:
<script>
import NavLink from '$lib/NavLink.svelte';
</script>
<nav class="container">
<div id="links">
<NavLink href="/link1" title="icon1" />
<NavLink href="/link2" title="icon2" />
<NavLink href="/link3" title="icon3" />
</div>
</nav>
最后,sidenav 加载到我的 __layout.svelte 中:
<SideNav />
<slot />
<Footer />
现在,当我单击其中一个 sidenav 链接时,我被路由到正确的页面,但我的 NavLink 没有使用 .active
设置样式类(class)。但是,如果我检查链接,devtools 会向我显示:<a class="link active:true">
和其他链接有active:false
.
看起来功能正常,但未应用我的事件样式(背景颜色)。我错过了什么?
我尝试将 Active 类代码移至 SideNav 组件而不是 NavLink 组件并观察到相同的行为。我想不通,所以我找到了一种新方法,效果很好。
在我的 NavLink.svelte 中:
<script>
import {onMount} from "svelte";
import Icon from '$lib/Icon.svelte';
let currentPath;
onMount(() => {
currentPath = window.location.pathname;
});
export let title;
export let href;
</script>
<a {href} class:active={currentPath == href}>
<Icon {title} />
</a>
其余代码相同。现在我的链接获得了正确的样式。值得注意的是,他们只有 <a class="active">
而不是 <a class="active:true">
.为什么它不能使用其他方法?
最佳答案
我想通了....我想我只是忘了包括引号。哦。 NavLink 的工作代码(也包括子页面)是:
<a {href} class:active="{$page.path.includes(href)}">
关于css - Sveltekit:使用 $page.path 设置事件链接的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70613169/