Пространство имён layouts::
Пространство имён layouts:: используется в Livewire
для указания макета компонента непосредственно в Blade-шаблоне.
Это альтернатива указанию макета через свойство $layout
в классе компонента. Синтаксис позволяет явно задать
макет для текущего компонента.
Синтаксис
@extends('layouts::app')
Пример
Давайте укажем макет layouts::app
для компонента в его Blade-шаблоне:
<?php
namespace AppLivewire;
use LivewireComponent;
class Page extends Component
{
public $title = 'Home Page';
public function render()
{
return view('livewire.page');
}
}
?>
@extends('layouts::app')
@section('content')
<h1>{{ $title }}</h1>
<p>Welcome to our website</p>
@endsection
<html>
<head>
<title>@yield('title', 'Default Title')</title>
</head>
<body>
<header>Site Header</header>
<main>
@yield('content')
</main>
<footer>Site Footer</footer>
</body>
</html>
Результат выполнения кода:
<html>
<head>
<title>Default Title</title>
</head>
<body>
<header>Site Header</header>
<main>
<h1>Home Page</h1>
<p>Welcome to our website</p>
</main>
<footer>Site Footer</footer>
</body>
</html>
Пример
Давайте передадим данные в секцию макета
с помощью метода with:
<?php
namespace AppLivewire;
use LivewireComponent;
class Article extends Component
{
public $articleTitle = 'Livewire Guide';
public $author = 'John Doe';
public function render()
{
return view('livewire.article')
->with('title', $this->articleTitle);
}
}
?>
@extends('layouts::app')
@section('title', $title)
@section('content')
<article>
<h1>{{ $articleTitle }}</h1>
<p>Author: {{ $author }}</p>
<p>Full article content here...</p>
</article>
@endsection
Результат выполнения кода:
<html>
<head>
<title>Livewire Guide</title>
</head>
<body>
<header>Site Header</header>
<main>
<article>
<h1>Livewire Guide</h1>
<p>Author: John Doe</p>
<p>Full article content here...</p>
</article>
</main>
<footer>Site Footer</footer>
</body>
</html>
Пример
Давайте используем множественное наследование макетов
с пространством имён layouts:::
<?php
namespace AppLivewire;
use LivewireComponent;
class Dashboard extends Component
{
public $stats = ['users' => 150, 'posts' => 320];
public function render()
{
return view('livewire.dashboard');
}
}
?>
@extends('layouts::admin')
@section('content')
<div class="dashboard">
<h2>Dashboard</h2>
<ul>
<li>Users: {{ $stats['users'] }}</li>
<li>Posts: {{ $stats['posts'] }}</li>
</ul>
</div>
@endsection
@extends('layouts::app')
@section('content')
<div class="admin-wrapper">
<nav>Admin Menu</nav>
<div class="admin-content">
@parent
</div>
</div>
@endsection
Результат выполнения кода:
<html>
<head>
<title>Default Title</title>
</head>
<body>
<header>Site Header</header>
<main>
<div class="admin-wrapper">
<nav>Admin Menu</nav>
<div class="admin-content">
<div class="dashboard">
<h2>Dashboard</h2>
<ul>
<li>Users: 150</li>
<li>Posts: 320</li>
</ul>
</div>
</div>
</div>
</main>
<footer>Site Footer</footer>
</body>
</html>
