Home / Snippets / How to Pass Classes to Laravel Livewire Component
How to Pass Classes to Laravel Livewire Component cover

How to Pass Classes to Laravel Livewire Component

2.3K

2 years ago

0 comments

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.

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.
notion avatar

Ahabz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this