Ionic 3 Popover

Ionic 3 Popover

Popover je dijaloški okvir koji se pojavljuje na vrhu trenutne stranice. Može se koristiti za bilo što, ali većinom sadržava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu.

U ovom ću blog postu pokazati kako se kreira popover dijaloški okvir, kako mu proslijediti parametre tj. podatke i kako dohvaćati podatke iz njega.

Kreiranje Ionic aplikacije

Kao i svaki put do sada, prvo kreiram novu Ionic aplikaciju.

Popover gumb će se nalaziti u gornjem desnom kutu HomePage komponente.

Ionic 3 Popover

Trenutno taj gumb ne radi ništa i prvo što moram napraviti je kreirati posebnu komponentu koja će sadržavati logiku koju će popover izvršavati.

Ionic 3 Popover Page

Sada, prema službenoj dokumentaciji na adresi https://ionicframework.com/docs/api/components/popover/PopoverController/, mogu pozvati metodu koja će mi na osnovu PopoverPage stranice kreirati popover dijaloški okvir.

Prikaz popovera vrši se funkcijom presentPopover($event). Tu je jako bitno da proslijedim parametar $event jer će se popover inače umjesto u gornjem desnom kutu prikazati na sredini stranice, a to u ovom slučaju ne želim.

U nastavku se može vidjeti kako sam proslijedio niz sa popisom gradova. Taj ću niz prikazati unutar popover okvira.

Ionic 3 Popover prozori

Prikaz popover okvira temelji se na sljedećem:

Primanje parametara u popover okvir može se vidjeti u nastavku, a temelji se na NavParams objektu.

U praksi to izgleda ovako:

Ionic 3 Popover animacija

Iz gornjeg se primjera može vidjeti da se proslijeđeni podaci uspješno prikazuju i da ih je moguće odabrati kao checkbox polja. Također, odabirom vrijednosti popover okvir se automatski ne zatvara, nego je potrebno kliknuti pa bilo koji dio ekrana kako bi se okvir zatvorio, niti su u HomePage komponentu proslijeđeni podaci koje sam odabrao.

Automatsko zatvaranje popover okvira odabirom vrijednosti postižem korištenjem ViewControllera.

U praksi to izgleda ovako:

Ionic ViewController

Prosljeđivanje odabranog podatka iz popover okvira natrag u HomePage komponentu postižem koristeći onDidDismiss.

U praksi to izgleda ovako:

Ionic onDidDismiss

Popover je moguće i dodatno prilagođavati CSS-om. U ovom slučaju klasom 'custom-popover' želim postići da se popover prikazuje ispod navbara.

Klasa je definirana unutar app.scss

U praksi to izgleda ovako:

Popover CSS

Zaključak

Struktura projekta prema package.json. Za ovu funkcionalnost nisu mi trebali nikakvi dodatni pluginovi tako da je struktura defaultna.

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, ExpressJS, Ionic Framework

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *