Video-19 (Component and class Based Component in Laravel):-
----------------------------------------------------------------------------------------
1. Components are a reusable group of elements. This let us build large
applications which are made up of reusable,independent and
decoupled
components.
There are two approaches to writing components:-
a. Class based components
b. Anonymous components
a. Class Based Components : -
1. To create a class based component, you may use the
make:component artisan command.
php artisan make:component Component_name
2. The make:component command will place the component in the
App\view\Component\Component_Name
3. The make:component command will also create a view template for
the component. The view will be placed in the
resources\view\components\component_name directory.
4. You may also create components within subdirectory:
php artisan make:component
Directory_name/Component_name
Rendering Component : -
1. To display a component, you may use a Blade component tag within
one of your Blade templates. Blade component tags start with the
string x- followed by the kebab case name of the component class:
Syntax : -
<x-componet-name/>
Example : -
<x-card/>
<x-user-profile/>
2. If the component class is nested deeper within the app/View/
Components directory, you may use the . character to indicate
directory nesting.
Syntax : -
<x-directory.componet-name/>
Example : -
<x-include.header/>
Passing Data to component
1. You may pass data to Blade components using HTML attributes.
2. Hard-coded, primitive values may be passed to the component using
simple HTML attribute strings.
3. PHP expressions and variables should be passed to the component
via attributes that use the : character as a prefix:
Example:-
<x-card title=”card-title” :description=$desc/>
Defining Data in component :-
Location of defining component :- app\view\Component\Componet_Name
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class catd extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public $title;
public $description;
public function __construct($title,$description)
{
$this->title=$title;
$this->description=$description;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.catd');
}
}
Note:-
1. Define the component’s required data in its class constructor.
2. All public properties on a component will automatically be made
available to the component view.
3. It is not necessary to pass the data to the view from the component’s
render method.
Displaying component Data :-
1. When your component is rendered, you may display the contents of
your component's public variables by echoing the variables by name:
Example:-
{{$title}}
{{$description}}
Casing : -
1. Component constructor arguments should be specified using
camelCase, while kebab-case should be used when referencing the
argument names in your HTML attributes.
Example : -
public function __construct($subTitle)
{
$this->subTitle=$subTitle;
}
<x-card sub-title=”card Subtitle”/>
Practice of Class based component
Location of view file : - app\view\component\card.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class card extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public $title;
public $description;
public $subTitle;
public function __construct($title,$description,$subTitle)
{
$this->title=$title;
$this->description=$description;
$this->subTitle=$subTitle;
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.card');
}
}
Location of blade view file : - resources\view\component\card.blade.php
<div>
<h3>{{$title}} </h3>
<h4> {{$subTitle}} </h4>
<p> {{$description}} </p>
<hr>
</div>
Location of home blade view file : - resources\view\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Home Page </h1>
<hr>
@php
$desc="card-description";
@endphp
<x-card title="Card-title-1" sub-title="Card-Subtitle-1"
:description=$desc/>
<x-card title="Card-title-2" sub-title="Card-Subtitle-2"
:description=$desc/>
<x-card title="Card-title-3" sub-title="Card-Subtitle-3"
:description=$desc/>
</body>
</html>
Component Method : -
1. Defining Method in component : -
public function addNumber($a)
{
return $a+20;
}
2. Calling component Method : -
{{$addNumber(10)}}
Example:-
Location of view file : - app\view\component\card.php
// Add compoent in card
public function addNumber($a)
{
return $a+20;
}
Location of blade view file : - resources\view\component\card.blade.php
<div>
<h3>{{$title}} </h3>
<h4> {{$subTitle}} </h4>
<p> {{$description}} </p>
<p> {{$addNumber(10)}} </p>
<hr>
</div>
Component Attributes : -
1. Defining Attributes in component : -
<x-card title=”card-title” sub-title=”card-subtitle” :description=$desc
class=”myclass” />
2. Using Attributes : -
<div> {{$attributes }} </div>
<!-- Component content →
</div>
3. All of the attributes that are not part of the component's constructor
will automatically be added to the component's "attribute bag". This
attribute bag is automatically made available to the component via the
$attributes variable.
Example:-
Location of blade view file : - resources\view\component\card.blade.php
<div>
<h3>{{$title}} </h3>
<h4> {{$subTitle}} </h4>
<p> {{$description}} </p>
<p {{$attributes}}>This is myclass</p>
<hr>
</div>
Location of home blade view file : - resources\view\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Home Page </h1>
<hr>
@php
$desc="card-description";
@endphp
<x-card title="Card-title-1" sub-title="Card-Subtitle-1"
:description=$desc class=”myclass”/>
<x-card title="Card-title-2" sub-title="Card-Subtitle-2"
:description=$desc/>
<x-card title="Card-title-3" sub-title="Card-Subtitle-3"
:description=$desc/>
</body>
</html>
Merge Attributes : -
1. Sometimes you may need to specify default values for attributes or
merge additional values into some of the component's attributes.
2. To accomplish this, you may use the attribute bag's merge method.
3. This method is particularly useful for defining a set of default CSS
classes that should always be applied to a component:
Example : -
Location of blade view file : - resources\view\component\card.blade.php
<div>
<h3>{{$title}} </h3>
<h4> {{$subTitle}} </h4>
<p> {{$description}} </p>
<p {{$attributes}}>This is myclass</p>
<hr>
<div {{ $attributes->merge(['class' => 'dclass']) }}>
{{ $subTitle }}
</div>
</div>
Video-20 (Anonymous Component in Laravel):-
----------------------------------------------------------------
1. Anonymous components provide a mechanism for managing a
component via a single file.Anonymous components utilise a single
view file and have no associated class.
2. To define an anonymous component, you only need to place a Blade
template within your resources/views/components directory.
Example : -
resources/views/components/card.blade.php
Rendering Anonymous Component
<x-card />
<x-card title=”card title-1”>
Example : -
Location of component blade file : - resources/views/components/card.blade.php
<div>
<h3>Anonymous Component Page</h3>
</div>
Location of home blade file : - resources/views/home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Home Page </h1>
<hr>
<x-card title="Card-title-1" sub-title="Card-Subtitle-1"
:description=$desc class="myclass"/>
</body>
</html>
Video-21 (Slot and Named Slot in Laravel):-
------------------------------------------------------------
1. You will often need to pass additional content to your component via
"slots".
2. Component slots are rendered by echoing the $slot variable.
Defining and Using Slot
1. Defining Components slot
<x-component_name>
<span> Hello , I am span tag </span>
</x-component_name>
2. Using Slot inside component
<div>
<h3> Alert Component </h3>
{{ $slot}}
</div>
Example:-
Location of view blade : - resources\view\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Home Page </h1>
<hr>
<x-alert>
<span>Hello,I am alert</span>
</x-alert>
</body>
</html>
Location of component blade : - resources\view\componet\alert.blade.php
<div>
<h2> Alert Title </h2>
<h3> Alert Componenet </h3>
{{$slot}}
</div>
Defining and Using Named Slot
1. Defining component named slot
<x-component_name>
<x-slot name=’title’> Alert Title </x-slot>
<span> Hello I am alert </span>
</x-component_name>
2. Using slot inside component
<div>
<h2> {{$title}} </h2>
<h3> Alert Component </h3>
{{$slo}}
</div>
Note : -
1. Any content not within an explicit x-slot tag will be passed to the
component in the $slot variable.
Example : -
Location of view blade : - resources\view\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Home Page </h1>
<hr>
<x-alert>
<x-slot name='title'>Alert title 1</x-slot>
<span>Hello,I am alert</span>
</x-alert>
</body>
</html>
Location of component blade : - resources\view\componet\alert.blade.php
<div>
<h2> {{$title}} </h2>
<h3> Alert Componenet </h3>
{{$slot}}
</div>
