- Введение
- Отображение данных
- Директивы Blade
- Компоненты
- Создание макетов
- Формы
- Стеки
- Внедрение служб
- Отрисовка встроенных шаблонов Blade
- Расширение Blade
Blade – это простой, но мощный движок шаблонов, входящий в состав Laravel. В отличие от некоторых шаблонизаторов PHP, Blade не ограничивает вас в использовании простого кода PHP в ваших шаблонах. На самом деле, все шаблоны Blade компилируются в простой код PHP и кешируются до тех пор, пока не будут изменены, что означает, что Blade добавляет фактически нулевую нагрузку вашему приложению. Файлы шаблонов Blade используют расширение файла .blade.php
и обычно хранятся в каталоге resources/views
.
Шаблоны Blade могут быть возвращены из маршрутов или контроллера с помощью глобального помощника view
. Конечно, как упоминалось в документации по HTML-шаблонам, данные могут быть переданы в шаблоны Blade, используя второй аргумент помощника view
:
Route::get('/', function () {
return view('greeting', ['name' => 'Finn']);
});
{tip} Хотите вывести использование шаблонов Blade на новый уровень и с легкостью создавать динамические интерфейсы? Ознакомьтесь с Laravel Livewire.
Вы можете отображать данные, которые передаются в шаблоны Blade, заключив переменную в фигурные скобки. Например, учитывая следующий маршрут:
Route::get('/', function () {
return view('welcome', ['name' => 'Samantha']);
});
Вы можете отобразить содержимое переменной name
следующим образом:
Hello, {{ $name }}.
{tip} Выражения вывода
{{ }}
Blade автоматически отправляются через функциюhtmlspecialchars
PHP для предотвращения XSS-атак.
Вы не ограничены отображением содержимого переменных, переданных в шаблон. Вы также можете вывести результаты любой функции PHP. Фактически, вы можете поместить любой PHP-код в выражение вывода Blade:
The current UNIX timestamp is {{ time() }}.
По умолчанию Blade (и глобальный помощник e
Laravel) будет дважды кодировать объекты HTML. Если вы хотите отключить двойное кодирование, то вызовите метод Blade::withoutDoubleEncoding
в методе boot
поставщика App\Providers\AppServiceProvider
:
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Загрузка любых служб приложения.
*
* @return void
*/
public function boot()
{
Blade::withoutDoubleEncoding();
}
}
По умолчанию, выражения вывода {{ }}
Blade автоматически отправляются через функцию htmlspecialchars
PHP для предотвращения XSS-атак. Если вы не хотите, чтобы ваши данные были экранированы, вы можете использовать следующий синтаксис:
Hello, {!! $name !!}.
{note} Будьте очень осторожны при выводе содержимого, полученного от пользователей вашего приложения. Обычно следует использовать экранированный синтаксис двойных фигурных скобок для предотвращения атак XSS при отображении данных, предоставленных пользователем.
Поскольку во многих фреймворках JavaScript также используются «фигурные» скобки, чтобы указать, что данное выражение должно отобразиться в браузере, вы можете использовать символ @
, чтобы сообщить движку Blade, что выражение должно остаться нетронутым. Например:
<h1>Laravel</h1>
Hello, @{{ name }}.
В этом примере Blade удалит символ @
; однако выражение {{ name }}
останется нетронутым движком Blade, что позволит обработать его вашим фреймворком JavaScript.
Символ @
также используется для исключения из обработки директив Blade:
{{-- Шаблон Blade --}}
@@if()
<!-- Вывод HTML -->
@if()
Вы можете передать массив в ваш шаблон с намерением отобразить его как JSON для инициализации переменной JavaScript. Например:
<script>
var app = <?php echo json_encode($array); ?>;
</script>
Однако вместо ручного вызова json_encode
вы можете использовать метод Illuminate\Support\Js::from
. Метод from
принимает те же аргументы, что и функция json_encode
PHP; однако это гарантирует, что полученный JSON будет правильно экранирован кавычками HTML. Метод from
вернет строковое выражение JSON.parse
JavaScript, которое преобразует переданный объект или массив в допустимый объект JavaScript:
<script>
var app = {{ Illuminate\Support\Js::from($array) }};
</script>
Последние версии приложения Laravel включают фасад Js
, который обеспечивает удобный доступ к этому функционалу в ваших шаблонах Blade:
<script>
var app = {{ Js::from($array) }};
</script>
{note} Вы должны использовать метод
Js::from
только для отображения существующих переменных как JSON. Шаблонизатор Blade основан на регулярных выражениях, и попытки передать сложное выражение в метод могут вызвать неожиданные сбои.
Если вы отображаете переменные JavaScript в крупной части своего шаблона, вы можете заключить HTML в директиву @verbatim
, чтобы вам не приходилось добавлять префикс @
к каждому выражению вывода Blade:
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim
Помимо наследования шаблонов и отображения данных, Blade также содержит удобные псевдонимы для общих структур управления PHP, таких как условные операторы и циклы. Эти директивы обеспечивают очень чистый и лаконичный способ работы со структурами управления PHP, но при этом остаются схожими со своими аналогами PHP.
Вы можете создавать операторы if
, используя директивы @if
, @elseif
, @else
и @endif
. Эти директивы работают так же, как и их аналоги в PHP:
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
Для удобства Blade также содержит директиву @unless
:
@unless (Auth::check())
You are not signed in.
@endunless
В дополнение к уже обсужденным условным директивам, директивы @isset
и @empty
могут использоваться в качестве удобных ярлыков для соответствующих функций PHP:
@isset($records)
// Переменная $records определена и не равна `null` ...
@endisset
@empty($records)
// Переменная $records считается «пустой» ...
@endempty
Директивы @auth
и @guest
могут использоваться для быстрого определения, является ли текущий пользователь аутентифицированным или считается гостем:
@auth
// Пользователь аутентифицирован ...
@endauth
@guest
// Пользователь не аутентифицирован ...
@endguest
При необходимости вы можете указать охранника аутентификации для проверки при использовании директив @auth
и @guest
:
@auth('admin')
// Пользователь аутентифицирован ...
@endauth
@guest('admin')
// Пользователь не аутентифицирован ...
@endguest
Вы можете проверить, запущено ли приложение в эксплуатационном окружении, с помощью директивы @production
:
@production
// Содержимое, отображаемое только в эксплуатационном окружении ...
@endproduction
Или вы можете определить, работает ли приложение в конкретной среде, с помощью директивы @env
:
@env('staging')
// Приложение запущено в «переходном» окружении ...
@endenv
@env(['staging', 'production'])
// Приложение запущено в «переходном» или «рабочем» окружении ...
@endenv
Вы можете определить, есть ли в секции наследуемого шаблона содержимое, используя директиву @hasSection
:
@hasSection('navigation')
<div class="pull-right">
@yield('navigation')
</div>
<div class="clearfix"></div>
@endif
Вы можете использовать директиву sectionMissing
, чтобы определить, что в секции нет содержимого:
@sectionMissing('navigation')
<div class="pull-right">
@include('default-navigation')
</div>
@endif
Операторы Switch могут быть созданы с использованием директив @switch
, @case
, @break
, @default
и @endswitch
:
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch
В дополнение к условным операторам, Blade содержит простые директивы для работы со структурами циклов PHP. Опять же, каждая из этих директив работает так же, как и их аналоги в PHP:
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
{tip} При итерации с помощью
foreach
вы можете использовать переменную Loop, чтобы получить информацию о цикле, например, находитесь ли вы в первой или последней итерации цикла.
Вы также можете завершить цикл или пропустить текущую итерацию, используя директивы @continue
и @break
:
@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif
@endforeach
Вы также можете включить в объявление директивы условие продолжения или прерывания:
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach
При итерации с помощью foreach
внутри цикла доступна переменная $loop
. Она обеспечивает доступ к некоторой полезной информации, например, индекс текущего цикла, первая это или последняя итерация цикла:
@foreach ($users as $user)
@if ($loop->first)
This is the first iteration.
@endif
@if ($loop->last)
This is the last iteration.
@endif
<p>This is user {{ $user->id }}</p>
@endforeach
При нахождении во вложенном цикле, вы можете получить доступ к переменной $loop
родительского цикла через свойство parent
:
@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
This is the first iteration of the parent loop.
@endif
@endforeach
@endforeach
Переменная $loop
также содержит множество других полезных свойств:
Свойство | Описание |
---|---|
$loop->index |
Индекс текущей итерации цикла (начинается с 0). |
$loop->iteration |
Текущая итерация цикла (начинается с 1). |
$loop->remaining |
Итерации, оставшиеся в цикле. |
$loop->count |
Общее количество элементов в итерируемом массиве. |
$loop->first |
Первая ли это итерация цикла. |
$loop->last |
Последняя ли это итерация цикла. |
$loop->even |
Четная ли это итерация цикла. |
$loop->odd |
Нечетная ли это итерация цикла. |
$loop->depth |
Уровень вложенности текущего цикла. |
$loop->parent |
Переменная родительского цикла во вложенном цикле. |
Директива @class
условно компилирует строку класса CSS. Директива принимает массив классов, где ключ массива содержит класс или классы, которые вы хотите добавить, а значение является логическим выражением. Если элемент массива имеет числовой ключ, он всегда будет включен в отображаемый список классов:
@php
$isActive = false;
$hasError = true;
@endphp
<span @class([
'p-4',
'font-bold' => $isActive,
'text-gray-500' => ! $isActive,
'bg-red' => $hasError,
])></span>
<span class="p-4 text-gray-500 bg-red"></span>
Для удобства вы можете использовать директиву @checked
, чтобы указать, должен ли быть «отмечен» HTML-флажок. Эта директива выведет checked
, если переданное условие является истинным:
<input type="checkbox"
name="active"
value="active"
@checked(old('active', $user->active)) />
Аналогично, директива @selected
может использоваться для указания, следует ли «выбрать» указанный элемент выпадающего списка:
<select name="version">
@foreach ($product->versions as $version)
<option value="{{ $version }}" @selected(old('version') == $version)>
{{ $version }}
</option>
@endforeach
</select>
{tip} Хотя вы можете использовать директиву
@include
, компоненты Blade содержат аналогичный функционал и предлагают несколько преимуществ по сравнению с директивой@include
, например привязку данных и атрибутов.
Директива @include
Blade позволяет вам включать шаблоны из другого шаблона. Все переменные, доступные для родительского шаблона, будут доступны для включенного шаблона:
<div>
@include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>
Включенный шаблон унаследует все данные, доступные в родительском шаблоне, но вы также можете передать массив дополнительных данных, которые должны быть доступны для включенного шаблона:
@include('view.name', ['status' => 'complete'])
Если вы попытаетесь включить несуществующий шаблон, Laravel выдаст ошибку. Если вы хотите включить шаблон, который может присутствовать или отсутствовать, вам следует использовать директиву @includeIf
:
@includeIf('view.name', ['status' => 'complete'])
Если вы хотите включить шаблон в зависимости от результата логического выражения, возвращающего либо true
, либо false
, то используйте директивы @includeWhen
и @includeUnless
:
@includeWhen($boolean, 'view.name', ['status' => 'complete'])
@includeUnless($boolean, 'view.name', ['status' => 'complete'])
Чтобы включить первый существующий шаблон из переданного массива шаблонов, вы можете использовать директиву includeFirst
:
@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])
{note} Вам следует избегать использования в ваших шаблонах Blade констант
__DIR__
и__FILE__
, поскольку они будут ссылаться на расположение кешированного, скомпилированного шаблона.
Вы можете cкомбинировать циклы и подключение шаблона в одну строку с помощью директивы Blade @each
:
@each('view.name', $jobs, 'job')
Первый аргумент директивы @each
– это шаблон, отображаемый для каждого элемента в массиве или коллекции. Второй аргумент – это массив или коллекция, которую вы хотите перебрать, а третий аргумент – это имя переменной, которая будет присвоена текущей итерации в шаблоне. Так, например, если вы выполняете итерацию по массиву jobs
, обычно вам нужно обращаться к каждому элементу как к переменной job
в шаблоне. Ключ массива для текущей итерации будет доступен как переменная key
в шаблоне.
Вы можете передать четвертый аргумент директиве @each
. Этот аргумент определяет шаблон, который будет отображаться, если переданный массив пуст.
@each('view.name', $jobs, 'job', 'view.empty')
{note} Шаблоны, отображаемые с помощью
@each
, не наследуют переменные родительского шаблона. Если дочернему шаблону требуются эти переменные, вам следует использовать вместо них директивы@foreach
и@include
.
Директива @once
позволяет вам определить часть шаблона, которая будет проанализирована только один раз за цикл визуализации. Это может быть полезно для вставки переданного фрагмента JavaScript в подвал страницы с помощью стеков. Например, если вы отображаете переданный компонент в цикле, то бывает необходимо разместить JavaScript в подвале при визуализации компонента только единожды:
@once
@push('scripts')
<script>
// Ваш JavaScript...
</script>
@endpush
@endonce
Поскольку как директива @once
часто используется в сочетании с директивами @push
или @prepend
, то для удобства доступны директивы @pushOnce
и @prependOnce
:
@pushOnce('scripts')
<script>
// Ваш JavaScript...
</script>
@endPushOnce
В крайних ситуациях можно встроить PHP-код в ваши шаблоны. Вы можете использовать директиву @php
Blade для размещения блока простого PHP в вашем шаблоне:
@php
$counter = 1;
@endphp
Blade также позволяет вам определять комментарии в ваших шаблонах. Однако, в отличие от комментариев HTML, комментарии Blade не будут включены в результирующий HTML, возвращаемый вашим приложением:
{{-- Этот комментарий не будет присутствовать в отрисованном HTML --}}
Компоненты и слоты предоставляют те же преимущества, что и секции, макеты и включение шаблона из другого шаблона; однако, некоторым может быть легче понять мысленную модель компонентов и слотов. Есть два подхода к написанию компонентов: компоненты на основе классов и анонимные компоненты.
Чтобы создать компонент на основе класса, вы можете использовать команду make:component
Artisan. Чтобы проиллюстрировать, как использовать компоненты, мы создадим простой компонент Alert
. Команда make:component
поместит компонент в каталог app/View/Components
:
php artisan make:component Alert
Команда make: component
также создаст шаблон для компонента. Шаблон будет помещен в каталог resources/views/components
. При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components
и resources/views/components
, поэтому дополнительная регистрация компонентов обычно не требуется.
Вы также можете создавать компоненты в подкаталогах:
php artisan make:component Forms/Input
Приведенная выше команда создаст компонент Input
в каталоге App\View\Components\Forms
, а шаблон будет помещен в каталог resources/views/components/forms
.
Если вы хотите создать анонимный компонент (компонент только с шаблоном Blade и без класса), то вы можете использовать флаг --view
при вызове команды make:component
:
php artisan make:component forms.input --view
Приведенная выше команда создаст файл Blade в resources/views/components/forms/input.blade.php
, который можно использовать как компонент: <x-forms.input />
.
При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components
и resources/views/components
.
Однако, если вы создаете пакет, который использует компоненты Blade, вам необходимо вручную зарегистрировать класс компонента и его псевдоним HTML-тега. Вы должны зарегистрировать свои компоненты в методе boot
поставщика служб вашего пакета:
use Illuminate\Support\Facades\Blade;
/**
* Загрузка любых служб пакета.
*/
public function boot()
{
Blade::component('package-alert', Alert::class);
}
После того, как ваш компонент был зарегистрирован, он может быть отображен с использованием псевдонима тега:
<x-package-alert/>
Как вариант, вы можете использовать метод componentNamespace
для автоматической загрузки классов компонентов по соглашению. Например, пакет Nightshade
может иметь компоненты Calendar
и ColorPicker
, которые находятся в пространстве имен Package\Views\Components
:
use Illuminate\Support\Facades\Blade;
/**
* Загрузка любых служб пакета.
*
* @return void
*/
public function boot()
{
Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}
Это позволит использовать компоненты пакета в пространстве имен их поставщиков, используя синтаксис x-package-name::
:
<x-nightshade::calendar />
<x-nightshade::color-picker />
Blade автоматически обнаружит класс, связанный с этим компонентом, используя «верблюжий регистр» имени компонента. Подкаталоги также поддерживаются с использованием «точечной» нотации.
Для отображения компонента вы можете использовать тег компонента Blade в одном из ваших шаблонов Blade. Теги компонентов Blade начинаются со строки x-
, за которой следует имя в «шашлычном регистре» класса компонента:
<x-alert/>
<x-user-profile/>
Если класс компонента имеет вложенность в каталоге app/View/Components
, то вы можете использовать символ .
для обозначения вложенности каталогов. Например, если мы предполагаем, что компонент находится в App\View\Components\Inputs\Button.php
, то мы можем отобразить его так:
<x-inputs.button/>
Вы можете передавать данные в компоненты Blade, используя атрибуты HTML. Жестко запрограммированные примитивные значения могут быть переданы компоненту с помощью простых строк атрибутов HTML. Выражения и переменные PHP следует передавать компоненту через атрибуты, которые используют символ :
в качестве префикса:
<x-alert type="error" :message="$message"/>
Вы должны определить необходимые данные компонента в его конструкторе класса. Все общедоступные свойства компонента будут автоматически доступны в шаблоне компонента. Нет необходимости передавать данные в шаблон из метода render
компонента:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
/**
* Тип предупреждения.
*
* @var string
*/
public $type;
/**
* Предупреждающее сообщение.
*
* @var string
*/
public $message;
/**
* Создать экземпляр компонента.
*
* @param string $type
* @param string $message
* @return void
*/
public function __construct($type, $message)
{
$this->type = $type;
$this->message = $message;
}
/**
* Получить шаблон / содержимое, представляющее компонент.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return view('components.alert');
}
}
Когда ваш компонент визуализируется, вы можете отображать содержимое общедоступных переменных вашего компонента, выводя переменные по имени:
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
Аргументы конструктора компонентов следует указывать с помощью camelCase
, а при обращении к именам аргументов в ваших атрибутах HTML следует использовать kebab-case
. Например, учитывая следующий конструктор компонента:
/**
* Создать экземпляр компонента.
*
* @param string $alertType
* @return void
*/
public function __construct($alertType)
{
$this->alertType = $alertType;
}
Аргумент $alertType
может быть передан компоненту следующим образом:
<x-alert alert-type="danger" />
Поскольку некоторые фреймворки JavaScript, такие как Alpine.js, также используют атрибуты с префиксом двоеточия, вы можете использовать префикс с двойным двоеточием (::
), чтобы сообщить Blade, что атрибут не является выражением PHP. Например, учитывая следующий компонент:
<x-button ::class="{ danger: isDeleting }">
Submit
</x-button>
Blade отобразит следующий HTML-код:
<button :class="{ danger: isDeleting }">
Submit
</button>
В дополнение к общедоступным переменным, доступным для вашего шаблона компонента, могут быть вызваны любые общедоступные методы компонента. Например, представьте компонент, у которого есть метод isSelected
:
/**
* Определить, является ли переданная опция выбранной.
*
* @param string $option
* @return bool
*/
public function isSelected($option)
{
return $option === $this->selected;
}
Вы можете выполнить этот метод из своего шаблона компонента, вызвав переменную, соответствующую имени метода:
<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
{{ $label }}
</option>
Компоненты Blade также позволяют получить доступ к имени компонента, атрибутам и слоту внутри метода render
класса. Однако, чтобы получить доступ к этим данным, вы должны вернуть замыкание из метода render
вашего компонента. Замыкание получит массив $data
в качестве единственного аргумента. Этот массив будет содержать несколько элементов, предоставляющих информацию о компоненте:
/**
* Получить шаблон / содержимое, представляющее компонент.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return function (array $data) {
// $data['componentName'];
// $data['attributes'];
// $data['slot'];
return '<div>Components content</div>';
};
}
componentName
эквивалентно имени, используемому в HTML-теге после префикса x-
. Таким образом, componentName
компонента <x-alert />
будет alert
. Элемент attributes
будет содержать все атрибуты, которые присутствовали в HTML-теге. Элемент slot
– это экземпляр Illuminate\Support\HtmlString
с содержимым слота компонента.
Замыкание должно возвращать строку. Если возвращенная строка соответствует существующему шаблону, то этот шаблон будет отрисован; в противном случае возвращенная строка будет оцениваться как встроенный шаблон Blade.
Если вашему компоненту требуются зависимости из контейнера служб Laravel, то вы можете указать их перед любыми атрибутами данных компонента, и они будут автоматически внедрены контейнером:
use App\Services\AlertCreator;
/**
* Создать экземпляр компонента.
*
* @param \App\Services\AlertCreator $creator
* @param string $type
* @param string $message
* @return void
*/
public function __construct(AlertCreator $creator, $type, $message)
{
$this->creator = $creator;
$this->type = $type;
$this->message = $message;
}
Если вы хотите, чтобы некоторые публичные методы или свойства не использовались как переменные в шаблоне компонента, вы можете добавить их в свойство массива $except
в вашем компоненте:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
/**
* Тип предупреждения.
*
* @var string
*/
public $type;
/**
* Свойства / методы, которые не должны использоваться в шаблоне компонента.
*
* @var array
*/
protected $except = ['type'];
}
Мы уже рассмотрели, как передавать атрибуты данных в компонент; иногда требуется указать дополнительные атрибуты HTML, такие как class
, которые не являются частью данных, необходимых для функционирования компонента. Как правило, вы хотите передать эти дополнительные атрибуты корневому элементу шаблона компонента. Например, представьте, что мы хотим отобразить компонент alert
следующим образом:
<x-alert type="error" :message="$message" class="mt-4"/>
Все атрибуты, которые не являются частью конструктора компонента, будут автоматически добавлены в «коллекцию атрибутов» компонента. Эта коллекция атрибутов автоматически становится доступной для компонента через переменную $attributes
. Все атрибуты могут отображаться в компоненте путем вывода этой переменной:
<div {{ $attributes }}>
<!-- Содержимое компонента -->
</div>
{note} Использование таких директив, как
@env
в тегах компонентов в настоящее время не поддерживается. Например,<x-alert :live="@env('production')"/>
не будет компилироваться.
Иногда требуется указать значения по умолчанию для атрибутов или добавить дополнительные значения в некоторые атрибуты компонента. Для этого вы можете использовать метод merge
коллекции атрибутов. Этот метод особенно полезен для определения набора CSS-классов по умолчанию, которые всегда должны применяться к компоненту:
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
Если предположить,
<x-alert type="error" :message="$message" class="mb-4"/>
Окончательный обработанный HTML-код компонента будет выглядеть следующим образом:
<div class="alert alert-error mb-4">
<!-- Содержимое переменной $message -->
</div>
По желанию можно объединить классы, если указанное условие истинно. Вы можете сделать это с помощью метода class
, который принимает массив классов, где ключ массива содержит класс или классы, которые вы хотите добавить, а значение является логическим выражением. Если элемент массива имеет числовой ключ, то он всегда будет добавлен в конечный список классов:
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
{{ $message }}
</div>
Если вам нужно объединить другие атрибуты в свой компонент, вы можете связать метод merge
с методом class
:
<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
{{ $slot }}
</button>
{tip} Если вам нужно условно скомпилировать классы для других элементов HTML, которые не должны получать объединенные атрибуты, вы можете использовать директиву
@class
.
При слиянии атрибутов, которые не являются атрибутами класса, значения, предоставленные методу merge
, будут считаться значениями атрибута по умолчанию. Однако, в отличие от атрибута class
, эти атрибуты не будут объединены с указанными значениями атрибутов. Вместо этого они будут перезаписаны. Например, реализация компонента button
может выглядеть следующим образом:
<button {{ $attributes->merge(['type' => 'button']) }}>
{{ $slot }}
</button>
Чтобы отобразить компонент кнопки с настраиваемым type
, его можно указать при использовании компонента. Если тип не указан, будет использоваться тип button
, определенный по умолчанию:
<x-button type="submit">
Submit
</x-button>
Обработанный HTML-код компонента button
в этом примере будет:
<button type="submit">
Submit
</button>
Если вы хотите, чтобы атрибут, отличный от class
, имел значение по умолчанию и указанное значение, объединенные вместе, вы можете использовать метод prepends
. В этом примере атрибут data-controller
всегда будет начинаться с profile-controller
, а любые дополнительные указанные значения data-controller
будут помещены после этого значения по умолчанию:
<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
{{ $slot }}
</div>
Вы можете фильтровать атрибуты, используя метод filter
. Этот метод принимает замыкание, которое должно возвращать true
, если вы хотите сохранить атрибут в коллекции атрибутов:
{{ $attributes->filter(fn ($value, $key) => $key == 'foo') }}
Для удобства вы можете использовать метод whereStartsWith
для получения всех атрибутов, ключи которых начинаются с указанной строки:
{{ $attributes->whereStartsWith('wire:model') }}
И наоборот, метод whereDoesntStartWith
может использоваться для исключения всех атрибутов, ключи которых начинаются с указанной строки:
{{ $attributes->whereDoesntStartWith('wire:model') }}
Используя метод first
, вы можете отобразить первый атрибут в указанной коллекции атрибутов:
{{ $attributes->whereStartsWith('wire:model')->first() }}
Если вы хотите проверить, присутствует ли атрибут в компоненте, вы можете использовать метод has
. Этот метод принимает имя атрибута в качестве единственного аргумента и возвращает логическое значение, указывающее, присутствует ли атрибут:
@if ($attributes->has('class'))
<div>Class attribute is present</div>
@endif
Вы можете получить значение конкретного атрибута, используя метод get
:
{{ $attributes->get('class') }}
По умолчанию некоторые ключевые слова зарезервированы для внутреннего использования Blade при визуализации компонентов. Следующие ключевые слова не могут быть определены как публичные свойства или имена методов в ваших компонентах:
data
render
resolveView
shouldRender
view
withAttributes
withName
Вам часто потребуется передавать дополнительный контент вашему компоненту через «слоты». Слоты компонентов отображаются путем вывода переменной $slot
. Чтобы изучить эту концепцию, представим, что компонент alert
имеет следующую разметку:
<!-- /resources/views/components/alert.blade.php -->
<div class="alert alert-danger">
{{ $slot }}
</div>
Мы можем передавать контент в slot
, вставив контент в компонент:
<x-alert>
<strong>Whoops!</strong> Something went wrong!
</x-alert>
Иногда внутри компонента требуется отрисовать несколько разных слотов в разных местах. Давайте модифицируем наш компонент оповещения, чтобы учесть вставку слота title
:
<!-- /resources/views/components/alert.blade.php -->
<span class="alert-title">{{ $title }}</span>
<div class="alert alert-danger">
{{ $slot }}
</div>
Вы можете определить содержимое именованнго слота с помощью тега x-slot
. Любой контент, не указанный в явном теге x-slot
, будет передан компоненту в переменной $slot
:
<x-alert>
<x-slot:title>
Server Error
</x-slot>
<strong>Whoops!</strong> Something went wrong!
</x-alert>
Если вы использовали фреймворк JavaScript, такой как Vue, то вы, возможно, знакомы со «слотами с ограниченной областью видимости», которые позволяют получать доступ к данным или методам из компонента в вашем слоте. Вы можете добиться аналогичного поведения в Laravel, определив общедоступные методы или свойства в вашем компоненте и получив доступ к компоненту в вашем слоте через переменную $component
. В этом примере мы предположим, что компонент x-alert
имеет общедоступный метод formatAlert
, определенный в его классе компонента:
<x-alert>
<x-slot:title>
{{ $component->formatAlert('Server Error') }}
</x-slot>
<strong>Whoops!</strong> Something went wrong!
</x-alert>
Подобно компонентам Blade, вы можете назначить дополнительные атрибуты для слотов, такие как имена CSS-классов:
<x-card class="shadow-sm">
<x-slot:heading class="font-bold">
Heading
</x-slot>
Content
<x-slot:footer class="text-sm">
Footer
</x-slot>
</x-card>
Для взаимодействия с атрибутами слота вы можете получить доступ к свойству attributes
переменной слота. Для получения дополнительной информации о том, как взаимодействовать с атрибутами, обратитесь к документации по атрибутам компонента:
@props([
'heading',
'footer',
])
<div {{ $attributes->class(['border']) }}>
<h1 {{ $heading->attributes->class(['text-lg']) }}>
{{ $heading }}
</h1>
{{ $slot }}
<footer {{ $footer->attributes->class(['text-gray-700']) }}>
{{ $footer }}
</footer>
</div>
Для очень маленьких компонентов может показаться обременительным управлять как классом компонента, так и шаблоном компонента. По этой причине вы можете вернуть разметку компонента прямо из метода render
:
/**
* Получить шаблон / содержимое, представляющее компонент.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return <<<'blade'
<div class="alert alert-danger">
{{ $slot }}
</div>
blade;
}
Чтобы создать компонент, который использует встроенный шаблон, вы можете использовать параметр --inline
при выполнении команды make:component
:
php artisan make:component Alert --inline
Подобно встроенным компонентам, анонимные компоненты предоставляют механизм для управления компонентом через один файл. Однако анонимные компоненты используют один файл шаблона, но не имеют связанного с компонентом класса. Чтобы определить анонимный компонент, вам нужно только разместить шаблон Blade в вашем каталоге resources/views/components
. Например, если вы определили компонент в resources/views/components/alert.blade.php
, вы можете просто отобразить его так:
<x-alert/>
Вы можете использовать символ .
, чтобы указать, вложен ли компонент в каталоге components
. Например, если компонент определен в resources/views/components/inputs/button.blade.php
, вы можете отобразить его так:
<x-inputs.button/>
Если компонент состоит из множества шаблонов Blade, то вы можете сгруппировать шаблоны данного компонента в одном каталоге. Например, представьте себе компонент «аккордеон» со следующей структурой каталогов:
/resources/views/components/accordion.blade.php
/resources/views/components/accordion/item.blade.php
Эта структура каталогов позволяет отображать компонент аккордеона и его элементы следующим образом:
<x-accordion>
<x-accordion.item>
...
</x-accordion.item>
</x-accordion>
Однако для того, чтобы отобразить данный компонент через x-accordion
, мы были вынуждены поместить «индексный» шаблон компонента в каталог resources/views/components
вместо того, чтобы вкладывать его вместе с другими связанными шаблонами в каталог accordion
.
К счастью, Blade позволяет вам разместить файл index.blade.php
в каталоге шаблонов компонента. Когда для компонента существует шаблон index.blade.php
, он будет отображаться как «корневой» узел компонента. Итак, мы можем продолжать использовать тот же синтаксис Blade, что и в примере выше, но мы изменим структуру каталогов следующим образом:
/resources/views/components/accordion/index.blade.php
/resources/views/components/accordion/item.blade.php
Поскольку анонимные компоненты не имеют ассоциированного класса, вы можете задаться вопросом, как можно различить, какие данные должны быть переданы компоненту как переменные, а какие атрибуты должны быть помещены в коллекцию атрибутов компонента.
Вы можете указать, какие атрибуты следует рассматривать как переменные данных, используя директиву @props
в верхней части шаблона Blade вашего компонента. Все остальные атрибуты компонента будут доступны через коллекцию атрибутов компонента. Если вы хотите присвоить переменной данных значение по умолчанию, вы можете указать имя переменной в качестве ключа массива и значение по умолчанию в качестве значения массива:
<!-- /resources/views/components/alert.blade.php -->
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
Учитывая приведенное выше определение компонента, мы можем отобразить компонент следующим образом:
<x-alert type="error" :message="$message" class="mb-4"/>
Иногда внутри дочернего компонента требуется доступ к данным родительского компонента. В этих случаях вы можете использовать директиву @aware
. Например, представьте, что мы создаем сложный компонент меню, состоящий из родительского <x-menu>
и дочернего <x-menu.item>
:
<x-menu color="purple">
<x-menu.item>...</x-menu.item>
<x-menu.item>...</x-menu.item>
</x-menu>
Компонент <x-menu>
может иметь следующую реализацию:
<!-- /resources/views/components/menu/index.blade.php -->
@props(['color' => 'gray'])
<ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}>
{{ $slot }}
</ul>
Поскольку свойство color
было передано только родительскому элементу <x-menu>
, оно не будет доступно внутри <x-menu.item>
. Однако, если мы воспользуемся директивой @aware
, то мы можем сделать свойство доступным и внутри <x-menu.item>
:
<!-- /resources/views/components/menu/item.blade.php -->
@aware(['color' => 'gray'])
<li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}>
{{ $slot }}
</li>
Иногда требуется визуализировать компонент, но вы не знаете, какой компонент следует визуализировать до времени выполнения. В этой ситуации вы можете использовать встроенный в Laravel компонент dynamic-component
для отображения компонента на основе значения или переменной, полученной во время выполнения запроса:
<x-dynamic-component :component="$componentName" class="mt-4" />
{note} Следующая документация по самостоятельной регистрации компонентов в первую очередь полезна тем, кто пишет пакеты Laravel, которые включают компоненты. Если вы не пишете пакет, эта часть документации компонента может быть вам не нужна.
При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components
и resources/views/components
.
Однако, если вы создаете пакет, который использует компоненты Blade или размещаете компоненты в других каталогах, вам необходимо самостоятельно зарегистрировать класс компонента и его псевдоним HTML-тега, чтобы Laravel знал, где найти компонент. Вы должны зарегистрировать свои компоненты в методе boot
поставщика служб вашего пакета:
use Illuminate\Support\Facades\Blade;
use VendorPackage\View\Components\AlertComponent;
/**
* Загрузка любых служб пакета.
*
* @return void
*/
public function boot()
{
Blade::component('package-alert', AlertComponent::class);
}
После того, как ваш компонент был зарегистрирован, он может быть отображен с использованием псевдонима тега:
<x-package-alert/>
Как вариант, вы можете использовать метод componentNamespace
для автоматической загрузки классов компонентов по соглашению. Например, пакет Nightshade
может иметь компоненты Calendar
и ColorPicker
, которые находятся в пространстве имен Package\Views\Components
:
use Illuminate\Support\Facades\Blade;
/**
* Загрузка любых служб пакета.
*
* @return void
*/
public function boot()
{
Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}
Это позволит использовать компоненты пакета в пространстве имен их поставщиков, используя синтаксис x-package-name::
:
<x-nightshade::calendar />
<x-nightshade::color-picker />
Blade автоматически обнаружит класс, связанный с этим компонентом, используя «верблюжий регистр» имени компонента. Подкаталоги также поддерживаются с использованием «точечной» нотации.
Большинство веб-приложений поддерживают одинаковый общий макет на разных страницах. Было бы невероятно громоздко и сложно поддерживать наше приложение, если бы нам приходилось повторять весь HTML-макет в каждом создаваемом экране. К счастью, этот макет удобно определить как один компонент Blade, а затем использовать его во всем приложении.
Например, представьте, что мы создаем приложение со списком задач. Мы могли бы определить компонент layout
, который выглядит следующим образом:
<!-- resources/views/components/layout.blade.php -->
<html>
<head>
<title>{{ $title ?? 'Todo Manager' }}</title>
</head>
<body>
<h1>Todos</h1>
<hr/>
{{ $slot }}
</body>
</html>
Как только компонент layout
определен, мы можем создать шаблон Blade, который будет использовать этот компонент. В этом примере мы определим простой шаблон, который отображает наш список задач:
<!-- resources/views/tasks.blade.php -->
<x-layout>
@foreach ($tasks as $task)
{{ $task }}
@endforeach
</x-layout>
Помните, что содержимое, внедренное в компонент, по умолчанию будет передано переменной $slot
компонента layout
. Как вы могли заметить, наш layout
также учитывает слот $title
, если он предусмотрен; в противном случае отображается заголовок по умолчанию. Мы можем добавить другой заголовок из нашего шаблона списка задач, используя стандартный синтаксис слотов, описанный в документации по компонентам:
<!-- resources/views/tasks.blade.php -->
<x-layout>
<x-slot:title>
Custom Title
</x-slot>
@foreach ($tasks as $task)
{{ $task }}
@endforeach
</x-layout>
Теперь, когда мы определили наш макет и шаблоны списка задач, нам просто нужно вернуть представление task
из маршрута:
use App\Models\Task;
Route::get('/tasks', function () { return view('tasks', ['tasks' => Task::all()]); });
Макеты также могут быть созданы с помощью «наследования шаблонов». Это был основной способ создания приложений до появления компонентов.
Для начала рассмотрим простой пример. Сначала мы изучим макет страницы. Поскольку большинство веб-приложений поддерживают одинаковый общий макет на разных страницах, удобно определить этот макет как единый шаблон Blade:
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
Как видите, этот файл содержит типичную разметку HTML. Однако, обратите внимание на директивы @section
и @yield
. Директива @ section
, как следует из названия, определяет секцию содержимого, тогда как директива @yield
используется для отображения содержимого секции, предоставленного дочерним шаблоном.
Теперь, когда мы определили макет для нашего приложения, давайте определим дочернюю страницу, которая наследует макет.
При определении дочернего шаблона используйте директиву Blade @extends
, чтобы указать, какой макет дочерний шаблон должен «наследовать». Шаблоны, расширяющие макет Blade, могут добавлять содержимое в секции макета с помощью директив @section
. Помните, как видно из приведенного выше примера, содержимое этих секций будет отображаться в макете с помощью @yield
:
<!-- resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection
В этом примере секция sidebar
использует директиву @@parent
для добавления (а не перезаписи) содержимого к боковой панели макета. Директива @@parent
будет заменена содержимым макета при визуализации представления.
{tip} В отличие от предыдущего примера, нынешняя секция
sidebar
заканчивается@endsection
вместо@show
. Директива@endsection
будет только определять секцию, в то время как@show
будет определять и немедленно дополнять секцию.
Директива @yield
также принимает значение по умолчанию в качестве второго параметра. Это значение будет отображено, если дополняемый раздел не определен:
@yield('content', 'Default content')
Каждый раз, когда вы определяете HTML-форму в своем приложении, вы должны включать в форму скрытое поле токена CSRF, чтобы посредник защиты от CSRF мог провалидировать запрос. Вы можете использовать директиву @csrf
Blade для генерации поля токена:
<form method="POST" action="/profile">
@csrf
...
</form>
Поскольку HTML-формы не могут выполнять запросы PUT
, PATCH
или DELETE
, вам нужно будет добавить скрытое поле _method
, чтобы подменить эти HTTP-методы. Директива @method
Blade поможет создать для вас такое поле:
<form action="/foo/bar" method="POST">
@method('PUT')
...
</form>
Директива @error
используется для быстрой проверки наличия сообщений об ошибках валидации для конкретного атрибута. В директиве @error
вы можете вывести содержимое переменной $message
для отображения сообщения об ошибке:
<!-- /resources/views/post/create.blade.php -->
<label for="title">Post Title</label>
<input id="title"
type="text"
class="@error('title') is-invalid @enderror">
@error('title')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
Поскольку директива @error
компилируется в конструкцию if
, то вы можете использовать директиву @else
для отображения содержимого в случае отсутствия ошибки валидации атрибута:
<!-- /resources/views/auth.blade.php -->
<label for="email">Email address</label>
<input id="email"
type="email"
class="@error('email') is-invalid @else is-valid @enderror">
Вы можете передать имя конкретной коллекции ошибок в качестве второго параметра директивы @error
для получения сообщений об ошибках валидации на страницах, содержащих несколько форм:
<!-- /resources/views/auth.blade.php -->
<label for="email">Email address</label>
<input id="email"
type="email"
class="@error('email', 'login') is-invalid @enderror">
@error('email', 'login')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
Blade позволяет вам добавлять содержимое к именованным стекам, которые можно отобразить где-нибудь еще в другом шаблоне или макете. Это может быть особенно полезно для указания любых библиотек JavaScript, необходимых для ваших дочерних шаблонов:
@push('scripts')
<script src="/example.js"></script>
@endpush
Вы можете помещать в стек сколько угодно раз. Чтобы отобразить полное содержимое стека, передайте имя стека в директиву @stack
:
<head>
<!-- Head Contents -->
@stack('scripts')
</head>
Если вы хотите добавить содержимое в начало стека, вы должны использовать директиву @prepend
:
@push('scripts')
This will be second...
@endpush
// Later...
@prepend('scripts')
This will be first...
@endprepend
Директива @inject
используется для извлечения службы из контейнера служб Laravel. Первый аргумент, переданный в @inject
, – это имя переменной, в которую будет помещена служба, а второй аргумент – это имя класса или интерфейса службы, которую вы хотите извлечь:
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>
Иногда требуется преобразовать строку шаблона Blade в HTML. Вы можете сделать это, используя метод render
фасада Blade
. Метод render
принимает строку шаблона Blade и необязательный массив данных для шаблона:
use Illuminate\Support\Facades\Blade;
return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);
Laravel отображает встроенные шаблоны Blade, записывая их в каталог storage/framework/views
. Если вы хотите, чтобы Laravel удалял эти временные файлы после отрисовки шаблона Blade, то вы можете передать методу именованный аргумент deleteCachedView
:
return Blade::render(
'Hello, {{ $name }}',
['name' => 'Julian Bashir'],
deleteCachedView: true
);
Blade позволяет вам определять ваши собственные пользовательские директивы с помощью метода directive
. Когда компилятор Blade встречает вашу директиву, он вызывает указанное замыкание с выражением, содержащимся в директиве.
В следующем примере создается директива @datetime($var)
, которая форматирует переданный $var
, который должен быть экземпляром DateTime
:
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Регистрация любых служб приложения.
*
* @return void
*/
public function register()
{
//
}
/**
* Загрузка любых служб приложения.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
}
Как видите, мы привяжем метод format
к любому выражению, переданному в директиву. Итак, в этом примере окончательный PHP, сгенерированный этой директивой, будет:
<?php echo ($var)->format('m/d/Y H:i'); ?>
{note} После обновления логики директивы Blade вам нужно будет удалить все кешированные шаблоны Blade. Кешированные шаблоны Blade могут быть удалены с помощью команды
view:clear
Artisan.
Если вы попытаетесь «отобразить» объект с помощью Blade, будет вызван метод объекта __toString
. Метод __toString
является одним из встроенных в PHP «магических методов». Однако иногда у вас может не быть контроля над методом __toString
передаваемого класса, например, когда класс, с которым вы взаимодействуете, принадлежит сторонней библиотеке.
В этих случаях Blade позволяет вам зарегистрировать собственный обработчик вывода для конкретного типа объекта. Для этого вы должны вызвать метод stringable
Blade. Метод stringable
принимает замыкание. Это замыкание должно получит тип объекта, за отрисовку которого оно отвечает. Как правило, вызов метода stringable
осуществляется в методе boot
поставщика App\Providers\AppServiceProvider
:
use Illuminate\Support\Facades\Blade;
use Money\Money;
/**
* Загрузка любых служб приложения.
*
* @return void
*/
public function boot()
{
Blade::stringable(function (Money $money) {
return $money->formatTo('en_GB');
});
}
После того, как ваш обработчик был определен, вы можете просто вывести объект в своем шаблоне Blade:
Cost: {{ $money }}
Программирование пользовательской директивы иногда бывает более сложным, чем необходимо при определении простых пользовательских условных операторов. По этой причине Blade содержит метод Blade::if
, который позволяет быстро определять пользовательские условные директивы с помощью замыканий. Например, давайте определим условие, которое проверяет сконфигурированный по умолчанию «диск» приложения. Мы можем сделать это в методе boot
поставщика App\Providers\AppServiceProvider
:
use Illuminate\Support\Facades\Blade;
/**
* Загрузка любых служб приложения.
*
* @return void
*/
public function boot()
{
Blade::if('disk', function ($value) {
return config('filesystems.default') === $value;
});
}
После того, как пользовательское условие было определено, вы можете использовать его в своих шаблонах:
@disk('local')
<!-- The application is using the local disk... -->
@elsedisk('s3')
<!-- The application is using the s3 disk... -->
@else
<!-- The application is using some other disk... -->
@enddisk
@unlessdisk('local')
<!-- The application is not using the local disk... -->
@enddisk