Das große Foto

Eine Kachel ist klein. In dieser Übung wird das ausgewählte Foto groß gezeigt, über der ganzen Seite. In Galerien nennt man das eine Lightbox: Die Seite bleibt dahinter, abgedunkelt, und ein Button schließt sie.

Die Komponente. Lightbox.vue ist neu. Ihre Vorlage hat die dunkle Ebene über der Seite (die Klasse lightbox), darin ein weißes Fenster (fenster) und im Fenster den Button zum Schließen ✕ (die Klasse schliessen). Die Stile stehen fertig. Die Lightbox hat kein eigenes Foto: Was sie zeigt, bekommt sie von App.vue über Slots.

• Der Default-Slot bekommt das Foto selbst: das Emoji in einem div mit der Klasse gross, mit der Farbe des Fotos als Hintergrund. Die Klasse gross steht in style.css, weil der Inhalt eines Slots vom Elternteil gestaltet wird, nicht von der Lightbox.
• Ein Slot namens bildtext, in einem Absatz mit der Klasse bildtext unter dem Foto, bekommt die Bildunterschrift und den Ort, zum Beispiel Sonnenaufgang, Bodensee.

Der Button zum Schließen gehört der Lightbox. Er versteckt selbst nichts: Er sendet das Ereignis schliessen, und App.vue entscheidet, was passiert.

Die Aufgabe. Ist ein Foto ausgewählt, zeigt App.vue die Lightbox mit ihm. Sendet die Lightbox schliessen, versteckt App.vue sie, und es ist kein Foto mehr ausgewählt.

Ein Tipp: Zeige die Lightbox mit v-if. Solange sie versteckt ist, ist sie gar nicht auf der Seite, und wenn sie gezeigt wird, ist ein Foto ausgewählt, ihr Inhalt kann es also verwenden.