Компоненты
В Laravel можно создавать компоненты (сообщения, элементы форм и другое) и подключать их на любой странице.
Компонент создаётся через команду:
php artisan make:component Alert
В итоге будут созданы два файла:
- app/View/Components/Alert.php
- resources/views/components/alert.blade.php
Подключение компонента происходит через тег <x-name>
.
<x-alert>Текст ошибки</x-alert>
Пример компонента «alert.blade.php»:
<!-- resources/views/components/alert.blade.php --> <div class="alert alert-danger"> {{ $slot }} </div>
Вместо переменной {{ $slot }}
будет выводиться текст, указанный в теге <x-alert>
.
В версиях Laravel 6 и ниже, компоненты выводились через ключевое слово @component
.
Подключить компонет с параметрами
Компонент можно подключать с параметрами.
<x-alert title="Название ошибки">Текст ошибки</x-alert>
И в настройках компонента указать, какие параметры можно передавать в шаблон:
// app/View/Components/Alert.php public function __construct(public string $title) { }
Пример файла с параметрами:
<!-- resources/views/components/alert.blade.php --> <div class="alert alert-danger"> <div class="alert-title">{{ $title }}</div> {{ $slot }} </div>
Если в качестве параметра надо указать переменную, то это можно сделать через код ниже:
<?php $variable = 'Значение'; ?> <x-alert title="{{ $variable }}">Текст ошибки</x-alert> <!-- 1-ый вариант --> <x-alert :title="$variable">Текст ошибки</x-alert> <!-- 2-ой вариант -->
Если атрибут и имя переменной совпадают, то код можно сократить:
<?php $title = 'Значение'; ?> <x-alert :$title>Текст ошибки</x-alert>
Атрибуты
Для каждого компонента можно указывать стандартные HTML-атрибуты.
<x-alert class="disable">Текст ошибки</x-alert> <x-alert id="filter-error">Текст ошибки</x-alert>
И выводить через переменную {{ $attributes }}
.
<!-- resources/views/components/alert.blade.php --> <div class="alert alert-danger" {{ $attributes }}> {{ $slot }} </div>
На примере выше в шаблоне компонента уже используется атрибут «class», из-за чего переданный класс не будет отображаться. Чтобы можно было добавлять свои классы, используется {{ $attributes->merge() }}
.
<!-- resources/views/components/alert.blade.php --> <div {{ $attributes->merge(['class' => 'alert alert-danger']) }}> {{ $slot }} </div>
В результате будет сгенерировано:
<div class="alert alert-danger disable"> Текст ошибки </div>
Слот
Переменная {{ $slot }}
позволяет выводить контент:
<x-alert>Текст ошибки</x-alert>
Код компонента:
<!-- resources/views/components/alert.blade.php --> <div class="alert alert-danger"> {{ $slot }} </div>
В результате будет сгенерирован текст:
<div class="alert alert-danger"> Текст ошибки </div>
Можно проверять, есть ли контент в слоте через метод $slot->isEmpty()
.
<div class="alert alert-danger"> @if ($slot->isEmpty()) Контент по умолчанию @else {{ $slot }} @endif </div>
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта