Метод placeholder
Метод placeholder класса Component позволяет задать содержимое, которое будет показываться в компоненте до того, как будет выполнен его основной код и отрисован шаблон. Это полезно для улучшения пользовательского опыта, особенно когда компонент загружает данные из внешнего источника или выполняет тяжелые вычисления. Метод возвращает строку или HTML-разметку, которая временно заменяет основной контент компонента.
Синтаксис
Метод placeholder объявляется в классе компонента и должен возвращать строку с текстом или HTML-кодом.
<?php
namespace AppLivewire;
use LivewireComponent;
class SomeComponent extends Component
{
public function placeholder()
{
return 'Loading...';
}
public function render()
{
return view('livewire.some-component');
}
}
?>
Пример
Давайте создадим компонент, который загружает данные с задержкой, и покажем текст-заглушку во время загрузки:
<?php
namespace AppLivewire;
use LivewireComponent;
class DataLoader extends Component
{
public $data = [];
public function mount()
{
sleep(2);
$this->data = ['item1', 'item2', 'item3'];
}
public function placeholder()
{
return '<div style="color: gray;">Loading data...</div>';
}
public function render()
{
return view('livewire.data-loader');
}
}
?>
<div>
<ul>
@foreach ($data as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
</div>
Результат выполнения кода:
<div style="color: gray;">Loading data...</div>
Через 2 секунды после загрузки компонента placeholder сменится основным содержимым:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
Пример
Метод placeholder может возвращать не только простой текст, но и полноценный HTML с CSS-стилями. Давайте покажем анимированный индикатор загрузки:
<?php
namespace AppLivewire;
use LivewireComponent;
class UserProfile extends Component
{
public $user = null;
public function mount()
{
sleep(3);
$this->user = [
'name' => 'John Doe',
'email' => 'john@example.com'
];
}
public function placeholder()
{
return '
<div style="text-align: center; padding: 20px;">
<div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
<p>Loading profile...</p>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</div>
';
}
public function render()
{
return view('livewire.user-profile');
}
}
?>
<div>
<h2>{{ $user['name'] }}</h2>
<p>{{ $user['email'] }}</p>
</div>
Результат выполнения кода:
<div style="text-align: center; padding: 20px;">
<div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
<p>Loading profile...</p>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</div>
