{"id":8761,"date":"2018-12-08T20:32:19","date_gmt":"2018-12-08T18:32:19","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=8761"},"modified":"2019-01-05T19:45:07","modified_gmt":"2019-01-05T17:45:07","slug":"ionic3-popover","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/","title":{"rendered":"Ionic 3 Popover"},"content":{"rendered":"

Popover<\/a> je dijalo\u0161ki okvir koji se pojavljuje na vrhu trenutne stranice<\/strong>. Mo\u017ee se koristiti za bilo \u0161to, ali ve\u0107inom sadr\u017eava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu.<\/p>\n

U ovom \u0107u blog postu pokazati kako se kreira popover<\/em> dijalo\u0161ki okvir, kako mu proslijediti parametre tj. podatke i kako dohva\u0107ati podatke iz njega. <\/p>\n

Kreiranje Ionic<\/em> aplikacije<\/h2>\n

Kao i svaki put do sada, prvo kreiram novu Ionic<\/em> aplikaciju<\/a>. <\/p>\n

$ ionic start IonicPopover blank<\/pre>\n
Popover<\/em> gumb \u0107e se nalaziti u gornjem desnom kutu HomePage<\/span> komponente. <\/p>\n
<ion-header>\r\n  <ion-navbar color=\"primary\">\r\n    <ion-buttons end>\r\n      <button ion-button icon-only>\r\n        <ion-icon name=\"more\"><\/ion-icon>\r\n      <\/button>\r\n    <\/ion-buttons>\r\n    <ion-title>\r\n        Ionic 3 Popover\r\n      <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header><\/pre>\n
\"Ionic<\/a><\/p>\n
Trenutno taj gumb ne radi ni\u0161ta i prvo \u0161to moram napraviti je kreirati posebnu komponentu koja \u0107e sadr\u017eavati logiku koju \u0107e popover<\/em> izvr\u0161avati.<\/p>\n
$ ionic generate page Popover<\/pre>\n
\"Ionic<\/a><\/p>\n
Sada, prema slu\u017ebenoj dokumentaciji na adresi https:\/\/ionicframework.com\/docs\/api\/components\/popover\/PopoverController\/<\/a>, mogu pozvati metodu koja \u0107e mi na osnovu PopoverPage<\/span> stranice kreirati popover<\/em> dijalo\u0161ki okvir.<\/p>\n
Prikaz popovera<\/em> vr\u0161i se funkcijom presentPopover($event)<\/span>. Tu je jako bitno da proslijedim parametar $event<\/span> jer \u0107e se popover<\/em> ina\u010de umjesto u gornjem desnom kutu prikazati na sredini stranice, a to u ovom slu\u010daju ne \u017eelim.<\/p>\n
<ion-header>\r\n  <ion-navbar color=\"primary\">\r\n    <ion-buttons end>\r\n      <button ion-button icon-only (click)=\"presentPopover($event)\">\r\n        <ion-icon name=\"more\"><\/ion-icon>\r\n      <\/button>\r\n    <\/ion-buttons>\r\n    <ion-title>\r\n        Ionic 3 Popover\r\n      <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header><\/pre>\n
U nastavku se mo\u017ee vidjeti kako sam proslijedio niz sa popisom gradova. Taj \u0107u niz prikazati unutar popover<\/em> okvira.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController, PopoverController } from 'ionic-angular';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  podaci = [{'naziv': 'Vinkovci', 'stanje': false},\r\n            {'naziv': 'Osijek', 'stanje': false},\r\n            {'naziv': 'Zagreb', 'stanje': false},\r\n            {'naziv': '\u010cakovec', 'stanje': false},\r\n            {'naziv': 'Split', 'stanje': false}];\r\n\r\n  constructor(public _navCtrl: NavController,\r\n              public _popoverCtrl: PopoverController) {\r\n\r\n  }\r\n\r\n  presentPopover(myEvent) {\r\n    let popover = this._popoverCtrl.create('PopoverPage', this.podaci);\r\n    popover.present({\r\n      ev: myEvent\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
\"Ionic<\/a><\/p>\n
Prikaz popover<\/em> okvira temelji se na sljede\u0107em:<\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>Popover okvir<\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content>\r\n    <ion-list>\r\n         <ion-item *ngFor=\"let p of podaci; let i = index\" ion-item>\r\n            <ion-label>{{p.naziv}}<\/ion-label>\r\n            <ion-checkbox [(ngModel)]=\"p.stanje\" checked=\"p.stanje\" (click)=\"dohvatiVrijednost(p)\"><\/ion-checkbox>\r\n         <\/ion-item>\r\n      <\/ion-list>\r\n<\/ion-content><\/pre>\n
Primanje parametara u popover<\/em> okvir mo\u017ee se vidjeti u nastavku, a temelji se na NavParams<\/a><\/em> objektu.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { IonicPage, NavController, NavParams } from 'ionic-angular';\r\n\r\n@IonicPage()\r\n@Component({\r\n  selector: 'page-popover',\r\n  templateUrl: 'popover.html',\r\n})\r\nexport class PopoverPage {\r\n\r\n  podaci = [];\r\n\r\n  constructor(public _navCtrl: NavController, \r\n              public _navParams: NavParams) {\r\n  }\r\n\r\n  ionViewDidEnter() {\r\n    console.log(this._navParams.data);\r\n    this.podaci = this._navParams.data;\r\n  }\r\n\r\n  dohvatiVrijednost(p){\r\n    console.log(p);\r\n  }\r\n\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Iz gornjeg se primjera mo\u017ee vidjeti da se proslije\u0111eni podaci uspje\u0161no prikazuju i da ih je mogu\u0107e odabrati kao checkbox<\/a><\/em> polja. Tako\u0111er, odabirom vrijednosti popover<\/em> okvir se automatski ne zatvara, nego je potrebno kliknuti pa bilo koji dio ekrana kako bi se okvir zatvorio, niti su u HomePage<\/span> komponentu proslije\u0111eni podaci koje sam odabrao.<\/p>\n
Automatsko zatvaranje popover<\/em> okvira<\/strong> odabirom vrijednosti posti\u017eem kori\u0161tenjem ViewControllera<\/a><\/em>.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';\r\n\r\n@IonicPage()\r\n@Component({\r\n  selector: 'page-popover',\r\n  templateUrl: 'popover.html',\r\n})\r\nexport class PopoverPage {\r\n\r\n  podaci = [];\r\n\r\n  constructor(public _navCtrl: NavController, \r\n              public _navParams: NavParams,\r\n              public _viewCtrl: ViewController) {\r\n  }\r\n\r\n  ionViewDidEnter() {\r\n    console.log(this._navParams.data);\r\n    this.podaci = this._navParams.data;\r\n  }\r\n  dohvatiVrijednost(p){\r\n    console.log(p);\r\n    this._viewCtrl.dismiss(p);\r\n  }\r\n\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Proslje\u0111ivanje odabranog podatka iz popover<\/em> okvira natrag u HomePage<\/span> komponentu posti\u017eem koriste\u0107i onDidDismiss<\/a><\/em>.<\/p>\n
presentPopover(myEvent) {\r\n    let popover = this._popoverCtrl.create('PopoverPage', this.podaci);\r\n    popover.present({\r\n      ev: myEvent\r\n    });\r\n    popover.onDidDismiss(data => {\r\n      if(data!=null){\r\n        console.log(data);\r\n      }\r\n    });\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Popover<\/em> je mogu\u0107e i dodatno prilago\u0111avati CSS-om. U ovom slu\u010daju klasom ‘custom-popover’<\/span> \u017eelim posti\u0107i da se popover<\/em> prikazuje ispod navbara<\/em>.<\/p>\n
presentPopover(myEvent) {\r\n    let popover = this._popoverCtrl.create('PopoverPage', this.podaci, {cssClass: 'custom-popover'});\r\n    popover.present({\r\n      ev: myEvent\r\n    });\r\n    popover.onDidDismiss(data => {\r\n      if(data!=null){\r\n        console.log(data);\r\n      }\r\n    });\r\n  }<\/pre>\n
Klasa je definirana unutar app.scss<\/strong><\/p>\n
\/\/ http:\/\/ionicframework.com\/docs\/theming\/\r\n\r\n\/\/ App Global Sass\r\n\/\/ --------------------------------------------------\r\n\/\/ Put style rules here that you want to apply globally. These\r\n\/\/ styles are for the entire app and not just one component.\r\n\/\/ Additionally, this file can be also used as an entry point\r\n\/\/ to import other Sass files to be included in the output CSS.\r\n\/\/\r\n\/\/ Shared Sass variables, which can be used to adjust Ionic's\r\n\/\/ default Sass variables, belong in \"theme\/variables.scss\".\r\n\/\/\r\n\/\/ To declare rules for a specific mode, create a child rule\r\n\/\/ for the .md, .ios, or .wp mode classes. The mode class is\r\n\/\/ automatically applied to the <body> element in the app.\r\n\r\n.custom-popover {\r\n    top: 7%;\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Popover<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Struktura projekta prema package.json<\/strong>. Za ovu funkcionalnost nisu mi trebali nikakvi dodatni pluginovi<\/a><\/em> tako da je struktura defaultna<\/em>.<\/p>\n
{\r\n  \"name\": \"IonicPopover\",\r\n  \"version\": \"0.0.1\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"private\": true,\r\n  \"scripts\": {\r\n    \"start\": \"ionic-app-scripts serve\",\r\n    \"clean\": \"ionic-app-scripts clean\",\r\n    \"build\": \"ionic-app-scripts build\",\r\n    \"lint\": \"ionic-app-scripts lint\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@angular\/animations\": \"5.2.11\",\r\n    \"@angular\/common\": \"5.2.11\",\r\n    \"@angular\/compiler\": \"5.2.11\",\r\n    \"@angular\/compiler-cli\": \"5.2.11\",\r\n    \"@angular\/core\": \"5.2.11\",\r\n    \"@angular\/forms\": \"5.2.11\",\r\n    \"@angular\/http\": \"5.2.11\",\r\n    \"@angular\/platform-browser\": \"5.2.11\",\r\n    \"@angular\/platform-browser-dynamic\": \"5.2.11\",\r\n    \"@ionic-native\/core\": \"~4.17.0\",\r\n    \"@ionic-native\/splash-screen\": \"~4.17.0\",\r\n    \"@ionic-native\/status-bar\": \"~4.17.0\",\r\n    \"@ionic\/storage\": \"2.2.0\",\r\n    \"ionic-angular\": \"3.9.2\",\r\n    \"ionicons\": \"3.0.0\",\r\n    \"rxjs\": \"5.5.11\",\r\n    \"sw-toolbox\": \"3.6.0\",\r\n    \"zone.js\": \"0.8.26\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@ionic\/app-scripts\": \"3.2.1\",\r\n    \"typescript\": \"~2.6.2\"\r\n  },\r\n  \"description\": \"An Ionic Popover project\"\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Popover je dijalo\u0161ki okvir koji se pojavljuje na vrhu trenutne stranice. Mo\u017ee se koristiti za bilo \u0161to, ali ve\u0107inom sadr\u017eava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu. U ovom \u0107u blog postu pokazati kako se kreira popover dijalo\u0161ki okvir, kako mu proslijediti parametre tj. podatke i kako dohva\u0107ati podatke iz njega. … Nastavi \u010ditati Ionic 3 Popover<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":8800,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[564,351],"tags":[348,561],"class_list":["post-8761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-ionic-framework","tag-popover"],"yoast_head":"\nIonic 3 Popover - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 3 Popover - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"Popover je dijalo\u0161ki okvir koji se pojavljuje na vrhu trenutne stranice. Mo\u017ee se koristiti za bilo \u0161to, ali ve\u0107inom sadr\u017eava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu. U ovom \u0107u blog postu pokazati kako se kreira popover dijalo\u0161ki okvir, kako mu proslijediti parametre tj. podatke i kako dohva\u0107ati podatke iz njega. … Nastavi \u010ditati Ionic 3 Popover\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-08T18:32:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-05T17:45:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic 3 Popover\",\"datePublished\":\"2018-12-08T18:32:19+00:00\",\"dateModified\":\"2019-01-05T17:45:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/\"},\"wordCount\":386,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ionic3-popover-min.jpg\",\"keywords\":[\"Ionic Framework\",\"Popover\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/\",\"name\":\"Ionic 3 Popover - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ionic3-popover-min.jpg\",\"datePublished\":\"2018-12-08T18:32:19+00:00\",\"dateModified\":\"2019-01-05T17:45:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ionic3-popover-min.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ionic3-popover-min.jpg\",\"width\":825,\"height\":510,\"caption\":\"Ionic 3 Popover\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-popover\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 3 Popover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic 3 Popover - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic 3 Popover - Tomislav Stankovi\u0107","og_description":"Popover je dijalo\u0161ki okvir koji se pojavljuje na vrhu trenutne stranice. Mo\u017ee se koristiti za bilo \u0161to, ali ve\u0107inom sadr\u017eava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu. U ovom \u0107u blog postu pokazati kako se kreira popover dijalo\u0161ki okvir, kako mu proslijediti parametre tj. podatke i kako dohva\u0107ati podatke iz njega. … Nastavi \u010ditati Ionic 3 Popover","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2018-12-08T18:32:19+00:00","article_modified_time":"2019-01-05T17:45:07+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg","type":"image\/jpeg"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"5 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic 3 Popover","datePublished":"2018-12-08T18:32:19+00:00","dateModified":"2019-01-05T17:45:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/"},"wordCount":386,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg","keywords":["Ionic Framework","Popover"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/","name":"Ionic 3 Popover - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg","datePublished":"2018-12-08T18:32:19+00:00","dateModified":"2019-01-05T17:45:07+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/12\/ionic3-popover-min.jpg","width":825,"height":510,"caption":"Ionic 3 Popover"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-popover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic 3 Popover"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=8761"}],"version-history":[{"count":36,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8761\/revisions"}],"predecessor-version":[{"id":8805,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8761\/revisions\/8805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/8800"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=8761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=8761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=8761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}