Repository: https://github.com/codewithdary/components-in-laravel-9

Documentation: https://laravel.com/docs/10.x/blade#components

Source:  /g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing  - Branch = layout

Readme instruction in the github repo.

$ php artisan model:show [TABLE NAME]

Create Blade Component
$ php artisan make:component Header

Created:
app/view/Components/Header.php
resources/views/components/header.blade.php

Add HTML to new component

Open header.blade.php:
code resources/views/components/header.blade.php
Add: <div>hello from header.blade.php</div>

Call Component

Open welcome.blade.php and call the header blate template:
code resources/views/welcome.blade.php
Add: <x-header />

Passing Data to Component

Open Header.php
code app/view/Components/Header.php
Add $title:

    public $title;
    /**
     * Create a new component instance.
     */
    public function __construct($title) // variable being passed through from components/header.blade.php
    {
        $this->title = $title;
    }

Open welcome.blade.php to pass the value to title:
code resources/views/welcome.blade.php
Change To:

<x-header title="Page Title" />

Open header.blade.php:
code resources/views/components/header.blade.php
Change To:

<h1>{{$title}}</h1>
<div>hello from resources/views/components/header.blade.php</div>

Create Sub directory for each component type:

$ php artisan make:component Blog/BlogItem
$ code App/View/Components/Blog/BlogItem.php
This creates a Folder in App/View/Components/Blog/BlogItem.php
https://youtu.be/7E76PPoIVW4?si=1rthfNRfaIl8zIWb&t=679
ADD:BlogItem.php

    public $post;
    /**
     * Create a new component instance.
     */
    public function __construct($post)
    {
        $this->post = $post;
    }

Blog Blade Template
code resources/views/components/blog/blog-item.blade.php

<p>{{$post}}</p>

code resources/views/welcome.blade.php

<h2>x-header Title:</h2>
<x-header title="Page Title" />
<h1>Blog:</h1>
<x-blog.blog-item post="blog0" />

open in browser: /welcome

components inside components
create a new component Tag/TagItem
Add TagItem to BlogItem
<x-tag.tag-item :tag="$tag->name" />
https://youtu.be/7E76PPoIVW4?si=ncG3r72fOCAOivi8&t=886

Components with Slot Variables.

https://youtu.be/7E76PPoIVW4?t=906&si=f9FwC41YntwcSopI

Laravel creates a slot variabled which you can use in your components, all you need to do is add the html inside the component tags.

welcome.php

<x-header title="Page Title">
<p>This is a p inside the x-header</p> // Antying between the header tags are the value of $slot
</x-header

header.blade.php

<h1>{{$title}}</h1>
<div>hello from resources/views/components/header.blade.php</div>
{{$slot}} // you can put $slot anywhere you want in this page

Passing attributes to components: Class

In this example, we will pass an additional class property to the component:

welcome.php

<x-header title="Page Title" class="text-danger">

header.blade.php

<h1 {{ $attributes->merge(['class' => 'underliner' ]) }}>{{$title}}</h1>

Inspect CSS:

<h1 class="underliner text-danger">Page Title</h1>

Passing attributes to components: Input Type

https://youtu.be/7E76PPoIVW4?si=jc4U_A57kBvrpudf&t=1451

$ php artisan make:component Forms/PrimaryButton

welcome.blade.php

<x-forms.primary-button class="btn-primary" type="button">Submit Message</x-forms.primary-button>

primary-button.blade.php

{{-- 'type' => 'submit' = the default if no prop is passed --}}
<button {{$attributes->merge([
    'class' => 'btn',
    'type' => 'submit'
])}}>
{{$slot}}
</button>

Mannually create component Add file to Forms:

$ touch resources/views/components/forms/text-input.blade.php

welcome.blade.php

<x-forms.text-input
class=" text-danger m-2"
name="name"
placeholder="...enter your name"
/>

text-input.blade.php

@props([
    'type' => 'text', // text is the default
    'name',
    'placeholder',
])

<input type="{{ $type }}" name="{{ $name }}" placeholder="{{ $placeholder }}"
    {{ $attributes->merge([
        'class' => 'form-control',
    ]) }} />

Textarea InLine Component

The --inline option only creates a component class and does not create a view component

$ php artisan make:component Forms/Textarea --inline

$ code app/view/Components/Forms/Textarea.php

welcome.blade.php

<x-forms.textarea />

 

app/view/Component/Forms/textarea.php

        return <<<'blade'
<textarea
name="message"
placeholder="Enter your message"
class="form-control"
>
I have not failed. I've just found 10,000 ways that won't work. - Thomas Edison
</textarea>
blade;

Done

7E76PPoIVW4

Laravel Simple Layout Tutorial To Use in Blade Templates With PHP
Laravel Components Create, File Location And Usage Instructons