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

1	$ 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>

<ion-header>

<ion-navbar color="primary">

<ion-buttons end>

<ion-icon name="more"></ion-icon>

</button>

</ion-buttons>

<ion-title>

Ionic 3 Popover

</ion-title>

</ion-navbar>

</ion-header>

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

1	$ ionic generate page Popover

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>

<ion-header>

<ion-navbar color="primary">

<ion-buttons end>

<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
    });
  }

}

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

});

}

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>

<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);
  }

}

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:

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);
  }

}

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:

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);
      }
    });
}

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:

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);
      }
    });
  }

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%;
}

// 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:

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"
}

{

"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"

}

Kreiranje Ionic aplikacije

Zaključak

Objavio

Tomislav Stanković

Odgovori Otkaži odgovor