Атрибут slot

Атрибут slot класса Component позволяет определить именованные слоты в Blade-компонентах. Слоты - это участки шаблона, которые можно заполнять произвольным содержимым при использовании компонента. По умолчанию существует основной слот, но с помощью атрибута slot можно создавать дополнительные именованные слоты для более гибкой компоновки.

Атрибут slot принимает имя слота в качестве значения и используется внутри компонента для вывода переданного содержимого. В Blade-шаблоне компонента слоты отображаются через директиву slot с соответствующим именем.

Синтаксис

Определение слота в классе компонента:

<?php
	namespace App\View\Components;
	
	use Illuminate\View\Component;
	use Illuminate\View\ComponentSlot;
	
	class Alert extends Component
	{
		public function __construct(
			public string $type = 'info'
		) {}
		
		public function render()
		{
			return view('components.alert');
		}
	}
?>

Использование атрибута slot в Blade-шаблоне компонента:

<div {{ $attributes->merge(['class' => 'alert-' . $type]) }}>
	{{ $slot }}
	
	@if (isset($footer))
		<div class="alert-footer">
			{{ $footer }}
		</div>
	@endif
</div>

Пример

Рассмотрим базовый пример использования основного слота и именованного слота footer. Создадим компонент для отображения уведомлений:

<?php
	namespace App\View\Components;
	
	use Illuminate\View\Component;
	
	class Alert extends Component
	{
		public function __construct(
			public string $type = 'info'
		) {}
		
		public function render()
		{
			return view('components.alert');
		}
	}
?>

<div class="alert alert-{{ $type }}" {{ $attributes }}>
	{{ $slot }}
	
	@isset($footer)
		<div class="alert-footer">
			{{ $footer }}
		</div>
	@endisset
</div>

Теперь используем компонент в представлении:

<x-alert type="success">
	<p>Your profile has been updated successfully.</p>
	
	<x-slot:footer>
		<small>You can undo this action within 5 minutes.</small>
	</x-slot:footer>
</x-alert>

Результат выполнения кода:

<div class="alert alert-success">
	<p>Your profile has been updated successfully.</p>
	<div class="alert-footer">
		<small>You can undo this action within 5 minutes.</small>
	</div>
</div>

Пример

Использование атрибута slot с компонентами динамического контента. Создадим компонент карточки с заголовком, телом и подвалом:

<?php
	namespace App\View\Components;
	
	use Illuminate\View\Component;
	
	class Card extends Component
	{
		public function render()
		{
			return view('components.card');
		}
	}
?>

<div {{ $attributes->merge(['class' => 'card']) }}>
	@if (isset($header))
		<div class="card-header">
			{{ $header }}
		</div>
	@endif
	
	<div class="card-body">
		{{ $slot }}
	</div>
	
	@if (isset($footer))
		<div class="card-footer">
			{{ $footer }}
		</div>
	@endif
</div>

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

<x-card class="mb-4">
	<x-slot:header>
		<h2>Recent Orders</h2>
	</x-slot:header>
	
	<p>You have 3 pending orders.</p>
	<p>Total revenue: $1,245.00</p>
	
	<x-slot:footer>
		<a href="/orders">View all orders →</a>
	</x-slot:footer>
</x-card>

Результат выполнения кода:

<div class="card mb-4">
	<div class="card-header">
		<h2>Recent Orders</h2>
	</div>
	<div class="card-body">
		<p>You have 3 pending orders.</p>
		<p>Total revenue: $1,245.00</p>
	</div>
	<div class="card-footer">
		<a href="/orders">View all orders →</a>
	</div>
</div>

Пример

Передача переменных в слоты через атрибут slot. Можно динамически определять содержимое слотов, передавая данные из родительского компонента:

<?php
	namespace App\View\Components;
	
	use Illuminate\View\Component;
	
	class ProfileCard extends Component
	{
		public function __construct(
			public string $name,
			public string $email
		) {}
		
		public function render()
		{
			return view('components.profile-card');
		}
	}
?>

<div class="profile-card">
	<div class="profile-header">
		{{ $header ?? 'User Profile' }}
	</div>
	
	<div class="profile-body">
		<p><strong>Name:</strong> {{ $name }}</p>
		<p><strong>Email:</strong> {{ $email }}</p>
		{{ $slot }}
	</div>
	
	<div class="profile-footer">
		{{ $footer ?? 'Profile details' }}
	</div>
</div>

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

<x-profile-card name="John Doe" email="john@example.com">
	<x-slot:header>
		<h3>Welcome back, {{ $name }}!</h3>
	</x-slot:header>
	
	<p>Member since: 2024</p>
	<p>Last login: Today at 2:30 PM</p>
	
	<x-slot:footer>
		<button class="btn btn-primary">Edit Profile</button>
	</x-slot:footer>
</x-profile-card>

Результат выполнения кода:

<div class="profile-card">
	<div class="profile-header">
		<h3>Welcome back, John Doe!</h3>
	</div>
	<div class="profile-body">
		<p><strong>Name:</strong> John Doe</p>
		<p><strong>Email:</strong> john@example.com</p>
		<p>Member since: 2024</p>
		<p>Last login: Today at 2:30 PM</p>
	</div>
	<div class="profile-footer">
		<button class="btn btn-primary">Edit Profile</button>
	</div>
</div>

Смотрите также

класс Component,
базовый класс для создания Blade-компонентов
метод render,
который возвращает представление компонента
атрибут attributes,
который управляет HTML-атрибутами компонента
директива slot,
которая используется для вывода содержимого слотов в Blade