Overriding default prop of a Laravel 11 component

laravelStudent
May 10, 2024
122 views
0 votes
2 Answers

I’m new at Laravel and recently came across this problem. I’d like to override the background of my Laravel 11 component, but instead I’m just adding an extra class which is not rendered,ie the background does not change.

How can I solve this? For example:

<div {{$attributes->merge(['class' => 'bg-blue-100'])}}>
    {{$slot}}
</div>


<x-card class="bg-black">
...
</x-card>

Instead of class="bg-black" I end up with class="bg-blue-100 bg-black". Is there anyway around it other than exluding bg-blue-100, because I’d like to have a default background.

Thanks

Tags: laravel

Answers

- AdarshChandran
- May 9, 2024 at 12:24 pm
- 0 votes
0
You can use component variables to solve this issue.
```
// card.blade.php
@props(['bgColor' => 'bg-blue-100'])
<div {{$attributes->merge(['class' => $bgColor])}}>
    {{$slot}}
</div>

// view.blade.php
<x-card bgColor='bg-black'>
...
</x-card>
```
If bgColor isn’t specifically mentioned in the x-card tag, the default value of bg-blue-100 will be used.
Login or Signup to reply.

        //components
        button.blade.php:
               <a {{ $attributes->merge(['class' => 'relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300']) }}>{{ $slot }}</a>
        
        form-button.blade.php
            <button {{ $attributes->merge(['class' => 'rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600', 'type' => 'submit']) }}>
            {{ $slot }}
        </button>
        
        form-error.blade.php
            @props(['name'])
        
           @error($name)
              <p class="text-xs text-red-500 font-semibold mt-1">{{ $message }}</p>
           @enderror
        
        form-field.blade.php :
            <div class="sm:col-span-4">
              {{ $slot }}
            </div>
        
        form-input.blade.php : 
            <div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
            <input {{ $attributes->merge(['class' => 'block flex-1 border-0 bg-transparent py-1.5 px-3 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6']) }}>
        </div>
        
        form-label.blade.php
          <label {{ $attributes->merge(['class' => 'block text-sm font-medium leading-6 text-gray-900']) }}>{{ $slot }}</label>
        
        layout.blade.php
        
        <!doctype html>
        <html lang="en" class="h-full bg-gray-100">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>My Website</title>
            <script src="https://cdn.tailwindcss.com"></script>
        </head>
        
        <body class="h-full">
            <div class="min-h-full">
                <nav class="bg-gray-800">
                    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                        <div class="flex h-16 items-center justify-between">
                            <div class="flex items-center">
                                <div class="flex-shrink-0">
                                    <img class="h-8 w-8" src="https://laracasts.com/images/logo/logo-triangle.svg"
                                         alt="Your Company">
                                </div>
                                <div class="hidden md:block">
                                    <div class="ml-10 flex items-baseline space-x-4">
                                        <x-nav-link href="/" :active="request()->is('/')">Home</x-nav-link>
                                        <x-nav-link href="/jobs" :active="request()->is('jobs')">Jobs</x-nav-link>
                                        <x-nav-link href="/contact" :active="request()->is('contact')">Contact</x-nav-link>
                                    </div>
                                </div>
                            </div>
                            <div class="hidden md:block">
                                <div class="ml-4 flex items-center md:ml-6">
                                    @guest
                                        <x-nav-link href="/login" :active="request()->is('login')">Log In</x-nav-link>
                                        <x-nav-link href="/register" :active="request()->is('register')">Register</x-nav-link>
                                    @endguest
        
                                    @auth
                                            <form method="POST" action="/logout">
                                                @csrf
        
                                                <x-form-button>Log Out</x-form-button>
                                            </form>
                                    @endauth
                                </div>
                            </div>
                            <div class="-mr-2 flex md:hidden">
                                <!-- Mobile menu button -->
                                <button type="button"
                                        class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
                                        aria-controls="mobile-menu" aria-expanded="false">
                                    <span class="absolute -inset-0.5"></span>
                                    <span class="sr-only">Open main menu</span>
                                    <!-- Menu open: "hidden", Menu closed: "block" -->
                                    <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                         stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                                    </svg>
                                    <!-- Menu open: "block", Menu closed: "hidden" -->
                                    <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                         stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
        
                    <!-- Mobile menu, show/hide based on menu state. -->
                    <div class="md:hidden" id="mobile-menu">
                        <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
                            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
                            <a href="/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
                               aria-current="page">Home</a>
                            <a href="/about"
                               class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">About</a>
                            <a href="/contact"
                               class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact</a>
                        </div>
                        <div class="border-t border-gray-700 pb-3 pt-4">
                            <div class="flex items-center px-5">
                                <div class="flex-shrink-0">
                                    <img class="h-10 w-10 rounded-full" src="https://laracasts.com/images/lary-ai-face.svg"
                                         alt="">
                                </div>
                                <div class="ml-3">
                                    <div class="text-base font-medium leading-none text-white">Lary Robot</div>
                                    <div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
                                </div>
                                <button type="button"
                                        class="relative ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                                    <span class="absolute -inset-1.5"></span>
                                    <span class="sr-only">View notifications</span>
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                         stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </nav>
        
                <header class="bg-white shadow">
                    <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 sm:flex sm:justify-between">
                        <h1 class="text-3xl font-bold tracking-tight text-gray-900">{{ $heading }}</h1>
        
                        <x-button href="/jobs/create">Create Job</x-button>
                    </div>
                </header>
        
                <main>
                    <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
                        {{ $slot }}
                    </div>
                </main>
            </div>
        </body>
        </html>
        
     nav-link.blade.php
    
         @props(['active' => false])
    
       <a class="{{ $active ? 'bg-gray-900 text-white': 'text-gray-300 hover:bg-gray-700 hover:text-white'}} rounded-md px-3 py-2 text-sm font-medium"
       aria-current="{{ $active ? 'page': 'false' }}"
       {{ $attributes }}
    >{{ $slot }}</a>
    
    create.blade.php
    
    <x-layout>
        <x-slot:heading>
            Create Job
        </x-slot:heading>
    
        <form method="POST" enctype="multipart/form-data" action="/jobs">
            @csrf
    
            <div class="space-y-12">
                <div class="border-b border-gray-900/10 pb-12">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Create a New Job</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">We just need a handful of details from you.</p>
    
    
                    <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <x-form-field>
                            <x-form-label for="title">Title</x-form-label>
    
                            <div class="mt-2">
                                <x-form-input name="title" id="title" placeholder="CEO" />
                                <x-form-error name="title" />
                            </div>
                        </x-form-field>
                        <x-form-field>
                            <x-form-label for="title">File</x-form-label>
    
                            <div class="mt-2">
                                <x-form-input name="image" type="file" id="file" placeholder="import" />
                                <x-form-error name="file" />
                            </div>
                        </x-form-field>
                        <x-form-field>
                            <x-form-label for="salary">Salary</x-form-label>
                            <div class="mt-2">
                                <x-form-input name="salary" id="salary" placeholder="$50,000 USD" />
                                <x-form-error name="salary" />
                            </div>
                        </x-form-field>
                    </div>
                </div>
            </div>
    
            <div class="mt-6 flex items-center justify-end gap-x-6">
                <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
                <x-form-button>Save</x-form-button>
            </div>
        </form>
    </x-layout>
    
    login.blade.php
<x-layout>
    <x-slot:heading>
        Log In
    </x-slot:heading>

    <form method="POST" action="/login">
        @csrf

        <div class="space-y-12">
            <div class="border-b border-gray-900/10 pb-12">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <x-form-field>
                        <x-form-label for="email">Email</x-form-label>

                        <div class="mt-2">
                            <x-form-input name="email" id="email" type="email" :value="old('email')" required />

                            <x-form-error name="email" />
                        </div>
                    </x-form-field>

                    <x-form-field>
                        <x-form-label for="password">Password</x-form-label>

                        <div class="mt-2">
                            <x-form-input name="password" id="password" type="password" required />

                            <x-form-error name="password" />
                        </div>
                    </x-form-field>
                </div>
            </div>
        </div>

        <div class="mt-6 flex items-center justify-end gap-x-6">
            <a href="/" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
            <x-form-button>Log In</x-form-button>
        </div>
    </form>
</x-layout>

Please signup or login to give your own answer.

Click here to cancel reply.