Kacheln mit Fotos

Zeit für ein weiteres Projekt! Dieser Checkpoint setzt die letzten drei Lektionen ein: Komponenten mit Props, Ereignissen und Slots. Wie in den vorherigen Checkpoints sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, ist dir überlassen. Jede Übung setzt dort fort, wo die vorherige aufgehört hat.

Das Projekt. Eine Galerie mit Fotos von einer Reise durch Deutschland. Die Fotos sind Kacheln in einem Raster, und ein Klick auf eine zeigt sie groß, über der ganzen Seite, mit ihrer Bildunterschrift, bis du sie schließt. In drei Übungen machst du die Kacheln, dann die große Ansicht und schließlich Buttons, die zum nächsten und vorherigen Foto gehen. Statt echter Fotos hat die Galerie große Emojis auf farbigen Kacheln und braucht deshalb keine Bilddateien. Eine echte Galerie hätte dort ein <img :src="foto.src">.

Die Daten. Die Fotos stehen in fotos.json, ein Objekt für jedes Foto:

{ "id": 1, "emoji": "🏔️", "bildtext": "Über den Wolken", "ort": "Zugspitze", "farbe": "#cfe3f5" }

App.vue hat sie schon: import fotos from "./fotos.json"; gibt ihr das Array, das in der Datei steht. (Ein mit Vite erstelltes Projekt kann JSON-Dateien so importieren.)

Die Aufgabe. Schreibe die Komponente Fotokachel.vue, die ein Foto zeigt, das sie in der Prop foto bekommt. Ihre Vorlage hat einen button mit der Klasse kachel: Eine Kachel ist zum Anklicken da, und einen Button kann man auch mit der Tastatur anklicken. Zeige im Button das Emoji in einem span mit der Klasse emoji und darunter die Bildunterschrift. Der Hintergrund der Kachel ist die Farbe des Fotos. Die Stile stehen fertig im <style scoped> der Komponente. Zeige in App.vue in dem div mit der Klasse raster für jedes Foto eine Kachel.

Dann wählt ein Klick auf eine Kachel ihr Foto aus: Die Kachel sendet das Ereignis auswaehlen, und App.vue merkt sich, welches Foto ausgewählt ist. Die Kachel des ausgewählten Fotos hat die Klasse ausgewaehlt, die ihr einen grünen Rand gibt. Es ist immer nur ein Foto ausgewählt. In der nächsten Übung wird das ausgewählte Foto groß gezeigt.

Ein Tipp: Die Kachel weiß nicht, welches Foto ausgewählt ist; App.vue weiß es. Die Kachel bekommt es also von App.vue in einer zweiten Prop, zum Beispiel ausgewaehlt, die true oder false ist. Und App.vue kann sich die Position des Fotos im Array merken, die v-for dir gibt: (foto, index) in fotos. In der letzten Übung kommt sie dir gelegen.