加载指示器 Blade 组件

#简介

加载指示器(Loading indicator)是一个动画 SVG，可用于指示某事正在进行中：

<x-filament::loading-indicator class="h-5 w-5" />

#替换默认的加载指示器

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

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

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

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

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 类名，因此你可以直接将它们透传给根元素。

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion