Filament 中文文档

主题

全部文档

Loading indicator Blade 组件 ​

简介 ​

loading indicator 是一个动画 SVG，可用于表示某项操作正在进行：

blade
<x-filament::loading-indicator class="h-5 w-5" />
加载指示器加载指示器

替换默认加载指示器 ​

Filament 通过 Filament\Support\Contracts\LoadingIndicator 契约渲染加载指示器，默认绑定到 Filament\Support\View\DefaultLoadingIndicator。你可以在服务提供者中绑定不同的类，用自己的实现替换它：

php
use App\Support\CustomLoadingIndicator;
use Filament\Support\Contracts\LoadingIndicator;

public function register(): void
{
    $this->app->bind(LoadingIndicator::class, CustomLoadingIndicator::class);
}

你的类必须实现 LoadingIndicator 契约；其 toHtml() 方法接收 ComponentAttributeBag 并返回指示器的 HTML：

php
namespace App\Support;

use Filament\Support\Contracts\LoadingIndicator;
use Illuminate\View\ComponentAttributeBag;

class CustomLoadingIndicator implements LoadingIndicator
{
    public function toHtml(ComponentAttributeBag $attributes): string
    {
        return <<<HTML
            <svg {$attributes->toHtml()}>
                <!-- ... -->
            </svg>
        HTML;
    }
}

属性中已包含 fi-icon fi-loading-indicator 以及尺寸相关的 hook 类，因此可以直接转发到根元素。

WARNING

解析得到的 LoadingIndicator 实例会在 PHP 进程生命周期内被缓存。在 Laravel Octane 下，这意味着绑定仅在 worker 启动时解析一次，请求之间不会重新解析。请在服务提供者中注册绑定，而不是在运行时重新绑定。