Laravel Components

A Component can be defined in the resources/views/components directory.

Definition

components/layout.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
    
</body>
</html>
  • This Component can be referenced in other blade files with the <x- html tag with the file name appended in the end (<x-layout>...</x-layout>).
  • Any content inside the <x-layout> tag will be slotted inside the ‘layout’ component

home.blade.php:

<x-layout>
    <h1>Home Page</h1>
</x-layout>

Named Slots

A Component can use multiple $slot variables with named slots.

...
<body>
    <h1></h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
    
</body>
...
  • A named slot can be used with the <x-slot: tag with the corresponding variable name appended next to the ‘:’ (<x-slot:heading>...</x-slot:heading>).
<x-layout>
    <x-slot:heading>Home Page</x-slot:heading>
</x-layout>

Attributes

HTML attributes such as id, class, … can be used inside a blade component with the $attributes object.

nav-link.blade.php:

<a ></a>

layout.blade.php:

...
    <nav>
        <x-nav-link href="/">Home</x-nav-link>
        <x-nav-link href="/about">About</x-nav-link>
        <x-nav-link href="/contact">Contact</x-nav-link>
    </nav>
...
  • Since $attributes is an object different methods can be called on it.
  • One such method is ‘merge’ which can be used to define some sensible default for the component.
<a ></a>

Props

A Prop can be used to run code inside a component conditionally.

layout.blade.php:

...
    <nav>
        <x-nav-link href="/" :active="true">Home</x-nav-link>
        <x-nav-link href="/about" :active="false">About</x-nav-link>
        <x-nav-link href="/contact" :active="false">Contact</x-nav-link>
    </nav>
...

nav-link.blade.php:

@props(['active' => false])

<a class="" ></a>
  • A prop can be defined with the @props() blade directive.
  • ’:’ can be used with the prop to define how the value will be passed down.
    • active="true" - value will be interpreted as the string "true"
    • :active="true" - value will be interpreted as the boolean true
  • Function calls can be also used as inside a prop and the return value will be passed down.
...
    <nav>
        <x-nav-link href="/" :active="request()->is('/')">Home</x-nav-link>
        <x-nav-link href="/about" :active="request()->is('/about')">About</x-nav-link>
        <x-nav-link href="/contact" :active="request()->is('/contact')">Contact</x-nav-link>
    </nav>
...

results matching ""

    No results matching ""