Атрибут Title
Атрибут Title в Livewire используется для динамической установки заголовка страницы.
Он применяется к классу компонента и позволяет задать заголовок,
который будет отображаться в теге <title> при рендеринге компонента.
В значении атрибута передается строка с заголовком.
Синтаксис
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesTitle;
#[Title('Заголовок страницы')]
class ExampleComponent extends Component
{
public function render()
{
return view('livewire.example');
}
}
?>
Пример
Давайте установим заголовок для компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesTitle;
#[Title('Список пользователей')]
class UserList extends Component
{
public $users = ['user1', 'user2', 'user3'];
public function render()
{
return view('livewire.user-list');
}
}
?>
<div>
<h1>Список пользователей</h1>
<ul>
@foreach ($users as $user)
<li>{{ $user }}</li>
@endforeach
</ul>
</div>
Результат выполнения кода (заголовок страницы):
<title>Список пользователей</title>
Пример
Давайте динамически сформируем заголовок на основе свойства компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesTitle;
#[Title('Статья: {article}')]
class ArticlePage extends Component
{
public $article = 'Введение в Livewire';
public function render()
{
return view('livewire.article-page');
}
}
?>
<div>
<h1>{{ $article }}</h1>
<p>Текст статьи...</p>
</div>
Результат выполнения кода (заголовок страницы):
<title>Статья: Введение в Livewire</title>
Пример
Давайте обновим заголовок при изменении данных в компоненте:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesTitle;
class DynamicTitle extends Component
{
public $page = 1;
#[Title('Страница {page}')]
public function render()
{
return view('livewire.dynamic-title');
}
public function nextPage()
{
$this->page++;
}
}
?>
<div>
<h1>Страница {{ $page }}</h1>
<button wire:click="nextPage">Следующая страница</button>
</div>
Результат выполнения кода (заголовок страницы после нажатия кнопки):
<title>Страница 2</title>
