Атрибут Layout

Атрибут #[Layout] в Livewire используется для указания основного макета (layout), в который будет рендериться компонент. Атрибут применяется к классу компонента и принимает имя шаблона макета в качестве параметра. По умолчанию Livewire использует макет, указанный в конфигурации, но с помощью этого атрибута можно переопределить его для конкретного компонента.

Синтаксис

<?php
	use Livewire\Attributes\Layout;
	use Livewire\Component;
	
	#[Layout('layouts.app')]
	class UserProfile extends Component
	{
		// ...
	}
?>

Пример

Давайте создадим компонент, который будет использовать собственный макет вместо стандартного:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Layout;
	use Livewire\Component;
	
	#[Layout('layouts.admin')]
	class UserProfile extends Component
	{
		public $name = 'John Doe';
		public $email = 'john@example.com';
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<!DOCTYPE html>
<html>
	<head>
		<title>Admin Panel</title>
	</head>
	<body>
		<div id="admin-menu">
			<!-- Admin navigation -->
		</div>
		<div id="content">
			{{ $slot }}
		</div>
	</body>
</html>

<div>
	<h1>User Profile</h1>
	<p>Name: {{ $name }}</p>
	<p>Email: {{ $email }}</p>
</div>

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

<div id="admin-menu">
	<!-- Admin navigation -->
</div>
<div id="content">
	<div>
		<h1>User Profile</h1>
		<p>Name: John Doe</p>
		<p>Email: john@example.com</p>
	</div>
</div>

Пример

В макет можно передавать дополнительные данные через метод render компонента:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Layout;
	use Livewire\Component;
	
	#[Layout('layouts.dashboard')]
	class Dashboard extends Component
	{
		public $stats = [
			'users' => 150,
			'orders' => 45,
			'revenue' => 12000
		];
		
		public function render()
		{
			return view('livewire.dashboard')
				->with('pageTitle', 'Dashboard');
		}
	}
?>

<!DOCTYPE html>
<html>
	<head>
		<title>{{ $pageTitle ?? 'Default Title' }}</title>
	</head>
	<body>
		<header>
			<h1>Dashboard</h1>
		</header>
		<main>
			{{ $slot }}
		</main>
	</body>
</html>

<div>
	@foreach ($stats as $key => $value)
		<div>
			<strong>{{ ucfirst($key) }}:</strong> {{ $value }}
		</div>
	@endforeach
</div>

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

<div>
	<div>
		<strong>Users:</strong> 150
	</div>
	<div>
		<strong>Orders:</strong> 45
	</div>
	<div>
		<strong>Revenue:</strong> 12000
	</div>
</div>

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

атрибут #[Title],
который устанавливает заголовок страницы для компонента
атрибут #[Url],
который синхронизирует свойство компонента с параметрами URL
атрибут #[Session],
который сохраняет свойство компонента в сессии
атрибут #[Computed],
который кеширует результат выполнения метода компонента