Komponenter

En Blade komponent är som en vanlig Blade vy som kan användas som en HTML-tagg. Du har kontroll över attributen som komponenten ska ta emot.

En komponent kan se ut så här:

<x-example-component title="Example Component" :image-id="$image"/>

Det finns två olika typer av komponenter: klass-baserade komponenter och anonyma komponenter.

• Klass-baserade komponenter består av minst en klass som ligger i app/View/Components mappen, men har oftast en associerad vy i resources/views/components mappen.
• Anonyma komponenter består av endas en Blade fil i resources/view/components mappen.

Komponenter bör namnges i singular på engelska i PascalCase^[1] form.

Skapa en klass-baserad komponent

Det enklaste sättet att skapa en klass-baserad komponent är med följande kommando:

wp dusk make:component Button

I detta exempel skapas filerna app/View/Components/Button.php och resources/views/components/button.blade.php.

Det går även att lägga komponenter i undermappar:

wp dusk make:component Forms/Button

I detta exempel skapas filern app/View/Components/Forms/Button.php och resources/views/components/forms/button.blade.php.

Skapa en anonym komponent

För att skapa en anonym komponent behövs bara en Blade fil i resources/view/components mappen.

Det går även att köra make:component kommandot med parametern --view:

wp dusk make:component button --view

Notera

Namnet på komponenten bör inte innehålla versaler.

Använd dot-notation för att skapa komponenter i undermappar:

wp dusk make:component forms.button --view

Användning

Komponenten används som en vanlig HTML-tagg, men börjar alltid med x-, exempelvis <x-button />.

Komponentens namn använder kebab-case,

Komponentnamn använder dot-notation, vilket betyder att komponenter som ligger i en undermapp, ex. forms/button.blade.php, blir <x-forms.button />.

Organisering

Komponenter behöver inte ligga direkt i resources/views/components, det går att lägga dem i undermappar för att organisera komponenter.

Ett exempel kan vara formulärkomponenter som knappar, inmatnings- och textrutor som ligger i mappen resources/views/forms.

Argument och attribut

I en klass-baserad komponent kommer attributen först in som parametrar i konstruktorn. Fält som definieras som public kommer automatiskt vara tillgängliga i den tillhörande Blade-vyn.

public function __construct(public string $message = '')
{
  // ...
}

Ovanstående är funktionellt identiskt med det nedanstående (som kan vara mer bekant).

public string $message;

public function __construct(string $message = '')
{
  $this->message = $message;
}

Sedan skickas dessa parametrar in som attribut i Blade:

{{-- resources/views/my-template.blade.php --}}
<x-alert message="Something happened!" />

Parametrar i PHP klassen ska använda camelCase^[2] medan attributen i Blade ska använda kebab-case^[3].

Som exempel har vi komponenten EntryList, som tar emot en post type för att lista inlägg i den post typen.

// ...
public function __construct(public string $postType) {}
// ...

Denna komponent används sedan på detta viset:

<x-entry-list post-type="post" />

Anonyma komponenter kan ta emot parametrar med hjälp av @props direktivet. Attributet blir på så sätt definierad som en variabel i vyn.

Attribut som inte har definieras hamnar i variabeln $attributes.

{{-- resources/views/some-file.blade.php --}}
<x-button useful="yes" helpful="no" />

{{-- resources/views/components/button.blade.php --}}
@props(['useful', 'useless' => null])

<button {{ $attributes }}>
  {{ $useful }} {{-- 'yes' --}}
  {{ $useless }} {{-- null --}}
</button>

{{ $attributes }} {{-- ['helpful' => 'no'] --}}

I exemplet ovan måste useful skickas med, medan useless får värdet null om det inte skickas med.

Slå samman attribut

Det går att slå samman attribut med metoden $attributes->merge(['defaults' => 'example']).

<div {{ $attributes->merge(['id' => 'alert-' . $uuid]) }}>
    {{ $message }}
</div>

I exemplet ovan slås alla skickade attribut samman med id.

Övriga metoder för $attributes

• ->class('hidden') - slår samman skickade css-klasser med angiven sträng
  • ->class(['text-pink-200', 'hidden' => !$visible]) - den accepterar även en array där den endast tar med nycklar vars värden är true.
• ->filter(fn ($value, $key) => $key === 'src') - filtrera på skickade attribut
• ->whereStartsWith('data') - filtrera på attribut-namn som börjar med angiven sträng
• ->whereDoesntStartWith('data') - filtrera på attribut-namn som inte börjar med angiven sträng
• ->first() - returnerar första attribut-värdet
• ->has('message') - returnerar true om attributet är skickat
• ->only('message') - returnerar endast angivet attribut
• ->get('message') - returnerar endast angivet attribut-värde

Attribut som PHP

Om man vill skicka in en variabel till en komponent kan man lägga till ett : före attributet istället för att använda echo. Attributets värde kommer då evalueras som PHP.

Notera

Att evaluera attributvärden på det här sättet är inte en generell Blade grej och fungerar endast med komponenter.

Som exempel har vi variabeln $button_type som vi vill skicka in i attributet type:

<x-button :type="$button_type" />

Notera

I det här fallet går det att använda både camelCase^[2:1] och kebab-case^[3:1] formerna.

Om variabeln har samma namn som attributet kan man lägga till :$ före attributets namn och skippa värdet:

<x-button :$type />

Notera

I det här fallet kan man inte använda kebab-case^[3:2] eftersom PHP inte stödjer bindestreck i variabelnamn. Använd camelCase^[2:2] formen.

Slots

Allt som komponenten omsluter hamnar i variabeln $slot. Det går även att ha namngivna slots. Se följande exempel:

{{-- resources/views/components/button.blade.php --}}
<button>
  <span class="some-icon">$icon</span>
  {{ $slot }}
</button>

{{-- resources/views/my-template.blade.php --}}
<x-button>
  <x-slot name="icon">💥</x-slot>
  Don't press
</x-button>

---

1. PascalCase innebär att varje ord börjar med en versal, ex. ExampleComponent. ↩︎

2. camelCase innebär att varje ord efter det första börjar med en versal, ex. exampleComponent. ↩︎ ↩︎ ↩︎

3. kebab-case innebär att inga ord innehåller versaler och separeras med bindestreck, ex. example-component. ↩︎ ↩︎ ↩︎