Połączyć atrybuty - jak ich przekonać, żeby prawidłowo funkcjonować?

0

Pytanie

mam następujący w składniku, хранящемся w resources/views/components/green-button.blade.php w 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>

Używam go :

<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>

Komponent posiada wcięcie w osi x o wymiarach px-4. Przekazuję px-0, ale żadnego efektu nie ma. Co robię nie tak?

rbd

components laravel
2021-11-18 22:02:46
1

Najlepsza odpowiedź

1

Można użyć @props() aby osiągnąć cel.

// 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>

2021-11-18 22:15:11

witam, tx. jeśli w wszystkich klasach" jest "px-4" i $CustomClass = "px-0", czy px-4, priorytet, bo on pierwszy?, lub ostatni przeczący klasa ma pierwszeństwo? Thx S.
Robert Bryan Davis

@RobertBryanDavis To zależy od kolejności arkuszy stylów, patrz: stackoverflow.com/a/3066365/13916713
Samuel Ferdary

Witam, dziękuję za opinię. Dostałem funkcjonalność, której szukał, za pomocą props() i w ten sposób dokonywania korekt w style.
Robert Bryan Davis

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................