laravel喷气流组件如何传递活动类作为参数

Question

我用的是拉拉维尔·杰斯特拉姆。我还添加了“黑暗主题”对我的申请的支持。我使用的是Tailwind 3的Laravel 8 Jetstream。

到目前为止，我已经成功地为resources/views/navigation-menu.blade.php文件中的导航链接设置了暗类，如下所示：

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link class="dark:text-gray-200 dark:hover:text-blue-300" href="{{ route($ruta_dashboard) }}" :active="request()->routeIs($ruta_dashboard)">
        {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

到目前一切尚好。

但是，当我尝试将黑暗类添加到dark:active:bg-amber-200类时，如下所示

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link class="dark:text-gray-200 dark:hover:text-blue-300 dark:active:bg-amber-200" href="{{ route($ruta_dashboard) }}" :active="request()->routeIs($ruta_dashboard)">
        {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

它不起作用。

如何将黑暗模式的活动类传递给Laravel组件？

Answer 1

早上好，亲爱的，我也遇到了同样的问题，我设法找到了解决办法。事实证明，黑暗类必须在位于文件夹中的Jetstream组件中指定：

vendor/laravel/jetstream/resources/views/components

修改后的组件示例：

@props(['active'])

@php
$classes = ($active ?? false)
            ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition dark:bg-slate-700 dark:border-slate-500'
            : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition dark:hover:border-slate-500';

<a {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</a>

我在这段视频中得到了这个信息(至少11:35)。

https://www.youtube.com/watch?v=jU3IrFmOGNQ

应该澄清一下，它是用西班牙语写的，但它是可以理解的

告诉我们你能否解决这个问题

干杯