Velká fotka

Dlaždice je malá. V tomto cvičení se vybraná fotka ukáže velká, přes celou stránku. V galeriích se tomu říká lightbox (anglický název, který se používá i u nás): stránka zůstane za ním, ztmavená, a tlačítko ho zavře.

Komponenta. Lightbox.vue je nová. Její šablona má tmavou vrstvu přes stránku (třída lightbox), v ní bílé okno (třída okno) a v okně zavírací tlačítko ✕ (třída zavrit). Styly jsou hotové. Lightbox nemá vlastní fotku: co ukazuje, mu přes sloty dává App.vue.

• Výchozí slot dostane samotnou fotku: emoji v prvku div s třídou velka a s barvou fotky jako pozadím. Třída velka je ve style.css, protože obsah slotu styluje rodič, ne lightbox.
• Slot se jménem popisek, v odstavci s třídou popisek pod fotkou, dostane popisek a místo, třeba Východ slunce, Pálava.

Zavírací tlačítko patří lightboxu. Samo nic neschová: vyšle událost zavrit a co se stane, rozhodne App.vue.

Úkol. Když je nějaká fotka vybraná, App.vue ji ukáže v lightboxu. Když lightbox vyšle zavrit, App.vue ho schová a žádná fotka už vybraná není.

Tip: lightbox ukazujte pomocí v-if. Dokud je schovaný, na stránce vůbec není, a když se ukáže, nějaká fotka vybraná je, takže ji jeho obsah může použít.