Dlaždice s fotkami

Čas na další projekt! Tento miniprojekt využije poslední tři lekce: komponenty s props, událostmi a sloty. Stejně jako v předchozích miniprojektech pokyny říkají, co má stránka dělat, a jak to napíšete, je na vás. Každé cvičení pokračuje tam, kde skončilo to předchozí.

Projekt. Galerie fotek z letního výletu po Česku. Fotky jsou dlaždice v mřížce a kliknutí na jednu ji ukáže velkou přes celou stránku i s popiskem, dokud ji nezavřete. Ve třech cvičeních uděláte dlaždice, potom velké zobrazení a nakonec tlačítka, která přejdou na další a předchozí fotku. Místo skutečných fotek má galerie velké emoji na barevných dlaždicích, takže nepotřebuje žádné obrázky. Skutečná galerie by tam měla <img :src="fotka.src">.

Data. Fotky jsou v souboru fotky.json, pro každou fotku jeden objekt:

{ "id": 1, "emoji": "🏔️", "popisek": "Nad mraky", "misto": "Sněžka", "barva": "#cfe3f5" }

App.vue už je má: import fotky from "./fotky.json"; mu dá pole, které je v souboru. (Projekt s Vite umí soubory JSON takhle importovat.)

Úkol. Napište komponentu Dlazdice.vue. Ukáže jednu fotku, kterou dostane v props fotka. Její šablona má tlačítko (button) s třídou dlazdice: na dlaždici se kliká a na tlačítko jde kliknout i klávesnicí. Do tlačítka dejte emoji v prvku span s třídou emoji a pod něj popisek. Pozadí dlaždice má barvu fotky. Styly jsou hotové v <style scoped> komponenty. V App.vue ukažte v prvku div s třídou mrizka dlaždici pro každou fotku.

Potom kliknutí na dlaždici vybere její fotku: dlaždice vyšle událost vybrat a App.vue si zapamatuje, která fotka je vybraná. Dlaždice vybrané fotky má třídu vybrana, která jí dá zelený okraj. Vybraná je vždy nejvýš jedna fotka. V dalším cvičení se vybraná fotka ukáže velká.

Tip: dlaždice neví, která fotka je vybraná, to ví App.vue. Dlaždice se to tedy dozví od App.vue v druhé props, třeba vybrana, která je true, nebo false. A App.vue si může pamatovat pozici fotky v poli, kterou vám dá v-for: (fotka, index) in fotky. V posledním cvičení se vám bude hodit.