31 января 2025 г.

Laravel - Компоненты Blade

 

<x-app-layout> — Компоненты Blade

<x-app-layout> — это Blade-компонент, который появился в Laravel 7 и стал активно использоваться в Laravel 8 и выше. Компоненты позволяют создавать повторно используемые блоки кода с изолированной логикой и представлением.

Как это работает:

 

  • Компоненты определяются в директории app/View/Components или через команду Artisan:

    bash
    Copy
    php artisan make:component AppLayout

    Это создаст два файла:

    • AppLayout.php — класс компонента (логика).

    • app-layout.blade.php — шаблон компонента (представление).

  • Использование компонента:
    В шаблоне Blade вы можете использовать компонент следующим образом:

    blade
    Copy
    <x-app-layout>
    <!-- Содержимое страницы -->
</x-app-layout>

  • Содержимое компонента:
    Внутри компонента (app-layout.blade.php) вы можете использовать {{ $slot }} для вывода содержимого, переданного между тегами <x-app-layout> и </x-app-layout>:

    blade
    Copy
    <!-- resources/views/components/app-layout.blade.php -->
<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <header>Header</header>
        <main>
            {{ $slot }} <!-- Сюда подставится содержимое страницы -->
        </main>
        <footer>Footer</footer>
    </body>
</html>

Преимущества компонентов:

  • Изоляция логики: Логика компонента может быть вынесена в отдельный класс.

  • Повторное использование: Компоненты можно использовать в любом месте приложения.

  • Гибкость: Можно передавать данные в компоненты через атрибуты:

    blade
    Copy
    <x-app-layout title="Home Page">
    <!-- Содержимое страницы -->
</x-app-layout>

<x-app-layout> — это современный подход с использованием компонентов, который предоставляет больше гибкости и изоляции логики

 

</x-slot> — это часть синтаксиса Blade-компонентов в Laravel, которая используется для передачи именованных слотов (named slots) в компоненты. Слоты позволяют передавать блоки содержимого в компоненты, что делает их более гибкими и переиспользуемыми.

Что такое слоты в Blade-компонентах?

Слоты — это механизм, который позволяет передавать HTML-код или другие Blade-директивы в компонент. Они бывают двух типов:

  1. Анонимный слот (default slot): Передается через {{ $slot }} в компоненте.

  2. Именованные слоты (named slots): Передаются через <x-slot name="slot-name">.

Как работает </x-slot>?

Когда вы используете <x-slot>, вы определяете блок содержимого, который будет передан в компонент. Закрывающий тег </x-slot> указывает конец этого блока.

Пример использования именованных слотов

  1. Компонент с именованными слотами:
    Создадим компонент panel, который принимает два именованных слота: title и content.

    bash
    Copy
    php artisan make:component Panel

    Файл шаблона компонента (resources/views/components/panel.blade.php):

    blade
    Copy
    <div class="panel">
    <div class="panel-header">
        {{ $title }} <!-- Именованный слот "title" -->
    </div>
    <div class="panel-body">
        {{ $content }} <!-- Именованный слот "content" -->
    </div>
</div>

  2. Использование компонента с именованными слотами:
    Теперь, когда вы используете компонент panel, вы можете передать содержимое для каждого слота с помощью <x-slot>.

    blade
    Copy
    <x-panel>
    <x-slot name="title">
        This is the Panel Title
    </x-slot>

    <x-slot name="content">
        This is the content of the panel.
    </x-slot>
</x-panel>

    Здесь:

    • <x-slot name="title"> определяет содержимое для слота title.

    • <x-slot name="content"> определяет содержимое для слота content.

    • </x-slot> закрывает каждый слот.

  3. Результат:
    Blade сгенерирует следующий HTML:

    html
    Copy
    <div class="panel">
    <div class="panel-header">
        This is the Panel Title
    </div>
    <div class="panel-body">
        This is the content of the panel.
    </div>
</div>
  1. Run HTML

Анонимный слот (default slot)

Если вы не указываете имя слота (name), то содержимое будет передано в анонимный слот, который доступен через {{ $slot }} в компоненте.

Пример:

blade
Copy
<x-panel>
    This is the default slot content.
</x-panel>

В компоненте:

blade
Copy
<div class="panel">
    {{ $slot }} <!-- Анонимный слот -->
</div>

Когда использовать </x-slot>?

Используйте </x-slot>, когда:

  1. Вам нужно передать несколько блоков содержимого в компонент.

  2. Вы хотите сделать компонент более гибким и переиспользуемым.

  3. Вам нужно разделить содержимое на логические части (например, заголовок и тело).

Пример с несколькими слотами

Компонент card:

blade
Copy
<!-- resources/views/components/card.blade.php -->
<div class="card">
    <div class="card-header">
        {{ $header }}
    </div>
    <div class="card-body">
        {{ $body }}
    </div>
    <div class="card-footer">
        {{ $footer }}
    </div>
</div>

Использование компонента:

blade
Copy
<x-card>
    <x-slot name="header">
        Card Title
    </x-slot>

    <x-slot name="body">
        This is the body of the card.
    </x-slot>

    <x-slot name="footer">
        Footer content goes here.
    </x-slot>
</x-card>

Результат:

html
Copy
<div class="card">
    <div class="card-header">
        Card Title
    </div>
    <div class="card-body">
        This is the body of the card.
    </div>
    <div class="card-footer">
        Footer content goes here.
    </div>
</div>
Run HTML

Заключение

  • <x-slot> используется для передачи именованных слотов в Blade-компоненты.

  • </x-slot> закрывает блок содержимого, который будет передан в компонент.

  • Именованные слоты делают компоненты более гибкими и позволяют разделять содержимое на логические части.

Этот механизм особенно полезен при создании сложных и переиспользуемых компонентов, таких как карточки, панели, модальные окна и т.д.

 

на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)

Laravel - Компоненты Blade

  <x-app-layout> — Компоненты Blade <x-app-layout> — это Blade-компонент , который появился в Laravel 7 и стал активно исполь...