Slots and Advance Component Features Tutorial in Laravel 11

 <?php


namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\Support\HtmlString;
use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    public $dismissible;
    protected $types = [
        "success",
        "danger",
        "info"
    ];
    /**
     * Create a new component instance.
     */
    public function __construct(string $type = "info", $dismissible = false)
    {
        $this->type = $type;
        $this->dismissible = $dismissible;
    }

    public function validType()
    {
        return in_array($this->type, $this->types) ? $this->type : "info";
    }

    public function link($text, $target = "#")
    {
        return new HtmlString("<a href='$target' class='alert-link'>$text</a>");
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.alert');

        // Making inline component as shown below :
        // return <<< 'blade'
        //     <div {{ $attributes->class(["alert-dismissible fade show" => $dismissible])->merge(["class" => "alert alert-".$validType,"role"=>$attributes->prepends("alert")]) }}>
        //         @isset($title)
        //         {{-- "$attributes->class(["alert-heading"])" is the default class --}}
        //             <h4 {{ $title->attributes->class(["alert-heading"]) }}>{{ $title }}</h4>
        //             <hr>
        //         @endisset

        //         @if($slot->isEmpty())
        //             <p>This is default content if the slot is empty.</p>
        //         @else
        //             {{ $slot }}
        //         @endif
        //         @if($dismissible)
        //             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        //         @endif
        //     </div>
        // blade;
    }
}
Above File is app\View\Components\Alert File




Below File is app\View\Components\card File
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class card extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return <<<'blade'
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        blade;
    }
}





Below File is resources\views\components\alert File
<div {{ $attributes->class(["alert-dismissible fade show" => $dismissible])->merge(["class" => "alert alert-".$validType,"role"=>$attributes->prepends("alert")]) }}>
    @isset($title)
    {{-- "$attributes->class(["alert-heading"])" is the default class --}}
        <h4 {{ $title->attributes->class(["alert-heading"]) }}>{{ $title }}</h4>
        <hr>
    @endisset

    @if($slot->isEmpty())
        <p>This is default content if the slot is empty.</p>
    @else
        {{ $slot }}
    @endif
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
</div>





Below File is resources\views\components\form File
{{-- Below properties method "@props()" is used only when we have not created any class File separately --}}
{{-- Below "action" and "method" are dynamic properties and user will send its value --}}
@props([
    "action",
    "method" => "POST"
])

<form action="{{ $action }}" method="{{ $method === "GET" ? "GET" : "POST"}}" {{ $attributes }}>
    @csrf

    @unless(in_array($method,["GET","POST"]))
        @method($method)
    @endunless

    {{-- @method("PUT") --}}
    {{ $slot }}
</form>





Below File is resources\views\welcomeTwo File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Components</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <x-alert type="danger">
            {{-- <x-slot name="title"> --}}
            <x-slot:title class="font-bold">
                Heading goes here ----
                {{ $component->link("Just Testing","https://www.google.com/") }}
            </x-slot>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
            </p>
    </x-alert>

    {{-- Below is inline component --}}
    {{-- <x-card/> --}}

    @php
        $componentName = "alert";
    @endphp

    <x-dynamic-component :component="$componentName" class="m-4"/>

    <x-form action="/somepage" method="PUT" id="firstform" class="myform">
        <input type="text" name="name">
        <button type="submit">Save</button>
    </x-form>
</body>
</html>




Below File is routes\web File
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get("/welcomeTwo", function () {
    return view("welcomeTwo");
});








Comments

Post a Comment

Popular posts from this blog

Eloquent Many to Many Relationship Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ User ; use Illuminate\Http\ Request ; class UserController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // $users = User::find(2);         // return $users;         // $users = User::with("roles")->get();         // return $users;         // $users = User::find(1);         // return $users->roles;         // $users = User::find(1);         // foreach($users->roles as $data) {         //     echo $data->role_name . "<br>";         // }         // To show All users data as shown below :         $users = User :: get ();...
Read more

Eloquent with JSON Data Columns Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ Test ; use Illuminate\Http\ Request ; class TestController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // Read first record from database         // $test = Test::find(1);         // return $test->meta_data;         // Read all records from database         // $test = Test::get();         // return $test;         // Order all records based on name         // $test = Test::orderBy("meta_data->name")->get();         // return $test;         // Read only "name" value of any particular record from database         // $test = Test::find(1);     ...
Read more

Blade Template Tutorial Three Template Inheritance in Laravel 11

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Master Layout - @yield ( "title" , "Website" ) </ title >     {{-- Below "asset('css/style.css')" is for declaring Absolute Path and "asset() is helper function for Absolute Path" --}}     < link rel = "stylesheet" href = " {{ asset ('css/style.css') }} " > </ head > < body >     < div id = "wrapper" >         < header >             < h1 > Hello World </ h1 >         </ header >         < nav >             < a href = "/welcomeT...
Read more