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.

$ ionic start IonicPopover blank

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

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
        Ionic 3 Popover
      </ion-title>
  </ion-navbar>
</ion-header>

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 generate page Popover

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.

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons end>
      <button ion-button icon-only (click)="presentPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
        Ionic 3 Popover
      </ion-title>
  </ion-navbar>
</ion-header>

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

import { Component } from '@angular/core';
import { NavController, PopoverController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  podaci = [{'naziv': 'Vinkovci', 'stanje': false},
            {'naziv': 'Osijek', 'stanje': false},
            {'naziv': 'Zagreb', 'stanje': false},
            {'naziv': 'Čakovec', 'stanje': false},
            {'naziv': 'Split', 'stanje': false}];

  constructor(public _navCtrl: NavController,
              public _popoverCtrl: PopoverController) {

  }

  presentPopover(myEvent) {
    let popover = this._popoverCtrl.create('PopoverPage', this.podaci);
    popover.present({
      ev: myEvent
    });
  }

}

Ionic 3 Popover prozori

Prikaz popover okvira temelji se na sljedećem:

<ion-header>
  <ion-navbar>
    <ion-title>Popover okvir</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
         <ion-item *ngFor="let p of podaci; let i = index" ion-item>
            <ion-label>{{p.naziv}}</ion-label>
            <ion-checkbox [(ngModel)]="p.stanje" checked="p.stanje" (click)="dohvatiVrijednost(p)"></ion-checkbox>
         </ion-item>
      </ion-list>
</ion-content>

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

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {

  podaci = [];

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams) {
  }

  ionViewDidEnter() {
    console.log(this._navParams.data);
    this.podaci = this._navParams.data;
  }

  dohvatiVrijednost(p){
    console.log(p);
  }

}

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.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {

  podaci = [];

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams,
              public _viewCtrl: ViewController) {
  }

  ionViewDidEnter() {
    console.log(this._navParams.data);
    this.podaci = this._navParams.data;
  }
  dohvatiVrijednost(p){
    console.log(p);
    this._viewCtrl.dismiss(p);
  }

}

U praksi to izgleda ovako:

Ionic ViewController

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

presentPopover(myEvent) {
    let popover = this._popoverCtrl.create('PopoverPage', this.podaci);
    popover.present({
      ev: myEvent
    });
    popover.onDidDismiss(data => {
      if(data!=null){
        console.log(data);
      }
    });
}

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.

presentPopover(myEvent) {
    let popover = this._popoverCtrl.create('PopoverPage', this.podaci, {cssClass: 'custom-popover'});
    popover.present({
      ev: myEvent
    });
    popover.onDidDismiss(data => {
      if(data!=null){
        console.log(data);
      }
    });
  }

Klasa je definirana unutar app.scss

// http://ionicframework.com/docs/theming/

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

.custom-popover {
    top: 7%;
}

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.

{
  "name": "IonicPopover",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",
    "@ionic/storage": "2.2.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic Popover project"
}

Objavio

Tomislav Stanković

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

Odgovori

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