Horizon Dokumentation

Appearance

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:

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

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

Skapa en klass-baserad komponent ​

En klass-baserad komponent består av minst en klass som ligger i app/View/Components mappen, men har oftast en associerad vy i resources/views/components mappen.

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

wp dusk make:component Button
wp dusk make:component Button

I detta exempel skapas filerna app/View/Components/Button.php och resources/views/components/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.

Användning ​

Komponenten används som en vanlig HTML-tagg, men börjar alltid med x.

Argument och attribut ​

I en klass-baserad komponent kommer attributen först in som parametrar i konstruktorn. De måste sedan sedan manuellt definieras som attribut hos klassen för att bli tillgängliga i den tillhörande Blade-vyn.

php
// ... 
public function __construct(string $message = '')
{
  $this->message = $message;
}
// ...
// ... 
public function __construct(string $message = '')
{
  $this->message = $message;
}
// ...
blade
{{-- resources/views/my-template.blade.php --}}
<x-alert message="Something happened!" />
{{-- resources/views/my-template.blade.php --}}
<x-alert message="Something happened!" />

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.

blade
{{-- 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"] --}}
{{-- 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 är useless ett valfritt argument och definieras som null om inget skickas med.

Slå samman attribut ​

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

blade
<div {{ $attributes->merge(['id' => 'alert-' . $uuid]) }}>
    {{ $message }}
</div>
<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 ​

För att slippa använda echo syntaxen finns det en short hand för att evaluera komponent-attributen som php. Då används : framför attributet namn. Exempelvis:

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

Detta fungerar endast på komponenter.

Slots ​

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

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