Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire

Question

Je souhaite ajouter le squelette de mon composant Laravel dans l'espace réservé Livewire 3 Ce que j'ai essayé jusqu'à présent :

Implémentez la classe Livewire en incluant le composant Laravel :

public function placeholder()
{
    return <<<'HTML'
        <x-skeleton />
    HTML;
}

La méthode ci-dessus ne rend rien,

Mais quand j'essaie d'utiliser du HTML pur comme ceci :

public function placeholder()

    {
        return <<<'HTML'
            <div class="card" aria-hidden="true">
                <div class="card-body">
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                </div>
            </div>
        HTML;
    }

L'effet est très bon, Je préfère utiliser les composants Laravel en raison de leur réutilisabilité Alors comment résoudre ce problème

Answer 1

J'essaie juste de garder les choses simples. La vue du composant Livewire peut-elle être rendue de manière conditionnelle ?

Exemple :

Dans votre composant Livewire

public $show_skeleton = true;

Dans la vue du composant Livewire

    @if ($show_skeleton)
        
    @endif

Dans votre classe de composants Livewire

public function showSkeleton()
{
    $this->show_skeleton = true;
}

public function hideSkeleton()
{
    $this->show_skeleton = false;
}

Utilisez maintenant la méthode ci-dessus pour afficher et masquer votre squelette.

Answer 2

Selon la Documentation, vous pouvez le faire dans votre configuration. Vous créez donc une vue qui restitue le composant, puis vous le définissez dans la configuration. Cela vous évite également d'avoir à définir le même espace réservé sur chaque composant.

Mais, à première vue, vous pouvez transmettre n'importe quelle chaîne, vous pouvez donc également simplement renvoyer la vue rendue : view('view')->render(). De plus, comme auparavant, vous pouvez simplement définir une vue dans laquelle restituer le composant.