Další a předchozí

Abyste viděli jinou fotku, musíte teď lightbox zavřít a kliknout na jinou dlaždici. Rychlejší to bude se dvěma dalšími tlačítky v lightboxu: jedno přejde na předchozí fotku, druhé na další.

Úkol. Přidejte do lightboxu dvě tlačítka, třeba pod popisek: jedno s třídou predchozi a druhé s třídou dalsi. Jejich text může být ← a →, nebo Předchozí a Další. Stejně jako zavírací tlačítko patří lightboxu a sama nic nemění: vyšlou události ukazat-predchozi a ukazat-dalsi a App.vue vybere jinou fotku. Lightbox ani nemusí vědět, kterou fotku ukazuje.

Za poslední fotkou ukáže tlačítko dalsi první fotku a před první fotkou ukáže tlačítko predchozi poslední, takže jde galerii procházet pořád dokola. Dlaždice ukázané fotky je vybraná, stejně jako předtím.

Tip: když si App.vue pamatuje pozici vybrané fotky v poli, je další fotka na pozici o jedna vyšší a poslední pozice je fotky.length - 1.

A to je celý projekt. Vaše galerie se skládá ze tří komponent a každá má svou práci. Dlazdice ukáže fotku, kterou dostane v props, a událostí řekne, že se na ni kliklo. Lightbox je rám: ukáže, co mu App.vue dá do slotů, a jeho tlačítka jen vysílají události. Data a rozhodnutí jsou v App.vue: jaké fotky jsou a která je vybraná. Stejně se staví i větší aplikace ve Vue, jen mají víc komponent. V další lekci, Životní cyklus a data, budou vaše komponenty načítat data ze serveru, když se objeví na stránce, a zastavovat své časovače, když z ní zmizí.