To pass classes to the Laravel Livewire component you can make use of the property defined from within the component. The implementation is very straightforward, do refer to the code example below.
To create a new Livewire component you can make use of the "livewire:make" command line. For this example let's create a simple card component.
Create New Livewire Component
To create a new Livewire component you can make use of the "livewire:make" command line. For this example let's create a simple card component.
php artisan livewire:make components/card
Upon running the command you should get the message like below.
COMPONENT CREATED 🤙 CLASS: app/Http/Livewire/Components/Card.php VIEW: resources/views/livewire/components/card.blade.php
Do note that if you have not installed livewire do run the composer require command below.
composer require livewire/livewire
Create Simple Card Styling
For this example, we'll be using the Tailwind CSS User Card Component available from our components collection. The blade view of the card component should have this HTML.
<div class="flex items-center relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md">
<div class="w-12 h-12 rounded-full bg-gray-100"></div>
<div class="ml-3">
<p class="font-medium text-gray-800">John doe</p>
<p class="text-sm text-gray-600">Last online 4 hours ago</p>
</div>
</div>This component is using Tailwind CSS so do make sure to have the CDN included to have it running.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Define The Component Property
From the component class, you can define a new public property that will be accessible from the component blade view. For this example let's call it "classes" which is a string type.
<?php
namespace App\Http\Livewire\Components;
use Livewire\Component;
class Card extends Component
{
public $classes;
public function render()
{
return view('livewire.components.card');
}
}And for the blade view "livewire/components/card.blade.php" you need to update the class to add the Component property ($classes).
<div class="flex items-center relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md {{ $classes }}">
<div class="w-12 h-12 rounded-full bg-gray-100"></div>
<div class="ml-3">
<p class="font-medium text-gray-800">John doe</p>
<p class="text-sm text-gray-600">Last online 4 hours ago</p>
</div>
</div>Call Component From Your Blade Views
Now that you have defined that, you can call the component and pass an additional class to the "$classes" property like below.
<livewire:components.card
classes="your other class here"
>Do note that you can pass the property like above because you have defined the "$classes" property as public so it's accessible from within the component.
Leave a reply