Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Blade @props default not over ridden

I just started learning Laravel & Blade. I am having problem with components

File: header.blade.php

<header class="bg-blue-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-3xl font-semibold">
            <a href="{{ url('/') }}">Workopia</a>
        </h1>
        <nav class="hidden md:flex items-center space-x-4">
            <x-nav-link url="/" :active="request()->is('/')">Home</x-nav-link>
            <x-nav-link url="/jobs" :active="request()->is('/jobs')">Jobs</x-nav-link>
            <x-nav-link url="/register" 
               :active="request()->is('/register')">Register
            </x-nav-link>
        </nav>
    </div>
</header>

File: nav-link.blade.php

@props(['url' => '/', 'active' => false])

<a href="{{ $url }}" class="text-white hover:underline py-2 {{ $active ? 'text-yellow-500 font-bold' : '' }}">
    {{ $slot }}
</a>

I can see all the nav links and it suppose to have yellow text when I click on the link, but I don’t see text changing color when I click on the link.
Please let me know where it’s going wrong. Thanks

When I click on the Home or other links, it suppose to get url from the header.blade.php file, pass to nav-link.blade.php and also change the text to yellow color. This is not happening. It always taking defaults.

Tags:

2

Answers


  1. 0

    Maybe it’s because you already have a text-white class, which applies the same property as text-yellow-500.

    <a
    href="{{ $url }}"
    class="hover:underline py-2 {{ $active ? 'text-yellow-500 font-bold' : 'text-white' }}"
>
    {{ $slot }}
</a>

    Alternatively, try adding some of the tailwind variants.

    <a
    href="{{ $url }}"
    class="hover:underline py-2 active:text-yellow-500 active:font-bold {{ $active ? 'text-yellow-500 font-bold' : 'text-white' }}"
>
    {{ $slot }}
</a>
    Login or Signup to reply.
  2. 0

    You can use the @clsss directive to resolve the conflict between text-white and text-yellow-500:

    @props(['url' => '/', 'active' => false])

<a href="{{ $url }}" 
   @class(['hover:underline py-2,
           'text-yellow-500 font-bold' => $active,
           'text-white' => !$active
   ])
>
    {{ $slot }}
</a>

    In this example the first element is always applied, the second one is applied when $active is true and the third one when $active is false

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search