Kategorien
Laravel

#Kapitel 4: Komponenten

Eine Webseite bzw. Webanwendung greift auf immer wiederkehrende Layout-Elemente zu. Beispielsweise ist die Hauptnavigation i. d. R. auf jeder einzelnen Seite zu finden. Im Prinzip kann man sagen, dass man einen Rahmen hat, der auf jeder Seite gleich ist und ggf. noch weitere Elemente wie beispielsweise die Navigation. Laut Dokumentation ist die neuste, beste Art dies per „Components“ zu realisieren. Deswegen werden ich auf das Konstrukt von Layouts nicht zu sprechen kommen.

Komponente

Das HTML-Grundgerüst wollen wir selbstverständlich in eine einzelne Datei einfügen:

<html>
    <head>
        <title>{{ $title ?? 'I am the master!' }}</title>
    </head>
    <body>
        <h1>A senseless headline</h1>
        <hr/>
        <ul>
        {{ $slot }}
        </ul>
    </body>
</html>

Anschließend wollen wir eine View definieren, die unsere „Master“-Komponente nutzt:

<x-master>
    <x-slot name="title">
        Custom Title
    </x-slot>
    @foreach ($tasks as $task)
        <li>{{ $task }}</li>
    @endforeach
</x-master>

Wir sehen auf den ersten Blick, dass der HTML-Tag „x-master“ unsere Master-Komponente anspricht.

Um etwas im Browser sehen zu können, definieren wir schnell mal noch eine passende Route:

Route::get('/tasks', function () {
  return view('tasks', ['tasks' => ['One', 'Two', 'Three']]);
});

Das ganze Konstrukt stellt sich folgendermaßen dar:

Die Komponenten selbst können verschachtelt werden und somit kann an sich jedes erdenkliche Konstrukt gebaut werden.

Artisan?

Ja, auch in der Konsole kann man relativ einfach eine leere Komponente erzeugen. Diese setzt sich dann aus zwei Dateien zusammen. Aber erst einmal den Befehl dazu:

php artisan make:component Alert

Folgende Dateien ohne nennenswerten Inhalt werden erzeugt:

Toll ist, dass man diese auch gleich verwenden kann. Dazu können wir unser Beispiel anpassen:

<x-master>
    <x-alert/>
    <x-slot name="title">
        Custom Title
    </x-slot>
    @foreach ($tasks as $task)
        <li>{{ $task }}</li>
    @endforeach
</x-master>

Damit was rauskommt muss man natürlich vorher in alert.blade.php etwas Inhalt reintippen 🙂

Im nächsten Kapitel werden wir die einzelnen Erkenntnisse zusammenbringen und eine Navigations-Komponente hinzufügen. Die Menüpunkte sollen dabei aus der Datenbank kommen.