Komponenten-Laravel

Links

• Laravel

Zielsetzung

Hier werden die Komponenten (benutzerdefinierte HTML-ähnliche Elemente) vorgestellt.

Anonyme Komponenten

Anonyme Komponenten werden als Dateien in /resources/views/components definiert.

• Name: in Kebab-Schreibweise (mit Bindestrichen), endet immer mit ".blade.php"

Komponentendefinition

• /resources/views/components/button.blade.php:

@props(['name', 'label' => 'OK', 'width1' => 2, 'width2' => 4])
@if($width1 > 0)
<x-laraknife.col-empty width="{{$width1}}"/>
@endif
<div class="col-md-{{ $width2 }}">
    <button class="bg-primary white expand100" name="btnSubmit" value="{{$name}}">{{$label}}</button>
</div>

• Mit @props wird eine assoziative Liste von Parametern, eventuell mit Vorbelegung, definiert.
• Auf den Wert des Parameters kann mit $<name> zugegriffen werden, jeweils innerhalb einer {{ }} Klammerung.
• Es gibt weitere Programmierkonstrukte, jeweils mit '@' beginnend:
• @if (<bedingung>) <then-block> @elsif (<bedingung>) <else-block1> @else <else-block2> @endif
• @for (<initialisierung>; <bedingung> <fortschaltung>) <block> @endfor
• @foreach (<liste> as <variable>) <block> @endforeach
• @php <php-statements> @endphp

Komponente mit Klammerstruktur

• Wenn die Komponente Klammercharakter hat <x-my-component> <block> </x-my-component>, dann wird <block> mit der Variablen $slot referenziert:
• Datei ok-panel.blade.php:

@prop(['buttonOk' => 'buttonOk', buttonCancel=''])
<div class="my-panel">
  {{ $slot }}
  <p><button name="{buttonOk}">
@if (! empty($buttonCancel)) 
  <button name="{buttonCancel}">@endif
  </p>
</div>

Aufruf der Komponente in einer Blade-Datei

• Wenn die Komponentendefinitionsdatei my-component.blade.php heißt, wird sie mit <x-my-component> referenziert.
• Wenn die Komponentendefinitionsdatei group/input/my-component.blade.php heißt, wird sie mit <x-group.input.my-component> referenziert.
• Die Parameter werden in der Attributschreibweise von HTML übergeben (Parameatername ist Attributname): buttonOK="<name>"

<x-button name="btnOK" label="OK" width1="4" 'width2="3" />
<x-ok-panel buttonOk="btnOk">
  <p>Alles ist gut</p>
</x-ok-panel>

PHP-Variablen als Parameter

Man kann nicht nur Stringwerte als Parameaterwerte übergeben, sondern auch PHP-Parameter. In diesem Fall muss der Aufruf mit ':'<name> erfolgen:

• Definition in username.blade.php:

@prop("user")
<p>Der Benutzer heißt {{ $user->name }}.</p>

• Die Anwendung in index.blade.php:

<x-username :user="{{ $user }}" />