Fusionner les attributs - comment dois-je faire fonctionner correctement?

Question 1

j'ai le texte suivant dans un composant stocké dans resources/views/components/green-button.blade.php dans laravel 8.

<button {{ $attributes->merge(['type' => 'button', 'class' => 'px-4 inline-flex justify-center py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500']) }}>
    {{ $slot }}
</button>

Je l'utilise :

<x-green-button class="px-0"
                title="Click to show or hide data entry for {{$person->firstname}}."
                wire:click="toggleVisibility({{$person->id}})">
  <h3 class="my-1">{{$person->FullName_fh}}</h3>
</x-green-button>

Le composant a un axe x rembourrage de px-4. Je passe px-0, mais il n'y a pas d'effet. Ce que je fais mal?

rbd

Question 2

Vous pouvez utiliser @props() pour atteindre l'objectif.

// In your component

@props(['customClass' => ''])

<button {{ $attributes->merge([
    'type'  => 'button', 
    'class' => 'all-your-classes ' . $customClass
]) }}>
    {{ $slot }}
</button>

// In your blade file

<x-green-button customClass="px-0">
    {{ $person->FullName_fh }}
</x-green-button>

Samuel Ferdary · Answer 1 · 2021-11-18T22:15:11

Vous pouvez utiliser @props() pour atteindre l'objectif.

// In your component

@props(['customClass' => ''])

<button {{ $attributes->merge([
    'type'  => 'button', 
    'class' => 'all-your-classes ' . $customClass
]) }}>
    {{ $slot }}
</button>

// In your blade file

<x-green-button customClass="px-0">
    {{ $person->FullName_fh }}
</x-green-button>

salut, thx. si le "all-votre-classes' a 'px-4" et $customClass = "px-0', le px-4 prendre en priorité car il s'agit en premier?, ou la dernière contredire classe préséance? Thx S.
@RobertBryanDavis Cela dépend de la feuille de style, Voir: stackoverflow.com/a/3066365/13916713
Salut, merci pour le feedback. J'ai gagné de l'funcctionality j'ai été chercher en utilisant des accessoires() et en passant à des ajustements des styles de cette façon.

Fusionner les attributs - comment dois-je faire fonctionner correctement?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie