@placeholder

@placeholder 指令用于在延迟或延期加载的组件和 islands 加载时显示自定义内容。

延迟组件的基本用法

对于单文件和多文件组件，使用 @placeholder 指定加载期间显示的内容：

<?php // resources/views/components/⚡revenue.blade.php

use Livewire\Component;
use App\Models\Transaction;

new class extends Component {
    public $amount;

    public function mount()
    {
        // 慢速数据库查询...
        $this->amount = Transaction::monthToDate()->sum('amount');
    }
};
?>

@placeholder
    <div>
        <!-- 加载动画 -->
        <svg class="animate-spin h-5 w-5">...</svg>
    </div>
@endplaceholder

<div>
    本月收入: {{ $amount }}
</div>

使用 <livewire:revenue lazy /> 渲染时，占位符会一直显示直到组件加载完成。

仅适用于基于视图的组件

@placeholder 指令适用于单文件和多文件组件。对于基于类的组件，请使用 placeholder() 方法代替。

匹配根元素类型

占位符和组件必须共享相同的根元素类型。如果占位符使用 <div>，组件也必须使用 <div>。

配合 Islands 使用

在延迟加载的 islands 中使用 @placeholder 自定义加载状态：

@island(lazy: true)
    @placeholder
        <div class="animate-pulse">
            <div class="h-32 bg-gray-200 rounded"></div>
        </div>
    @endplaceholder

    <div>
        收入: {{ $this->revenue }}

        <button type="button" wire:click="$refresh">刷新</button>
    </div>
@endisland

占位符会在 island 加载时显示，然后被实际内容替换。

骨架屏占位符

占位符非常适合用于创建与内容布局匹配的骨架加载器：

@placeholder
    <div class="space-y-4">
        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
        <div class="h-4 bg-gray-200 rounded"></div>
        <div class="h-4 bg-gray-200 rounded w-5/6"></div>
    </div>
@endplaceholder

<div>
    <!-- 实际内容 -->
    <h2>{{ $post->title }}</h2>
    <p>{{ $post->content }}</p>
</div>

了解更多

关于延迟组件加载，请参阅延迟加载文档。

关于 island 加载状态，请参阅 Islands 文档。