1import{S as wn,i as vn,s as yn,l,r as o,a as u,m as c,n as i,u as p,h as a,c as r,p as k,b as t,F as e,B as Fa}from"./index-7fbbe144.js";function bn(an){let h,Ms,ns,d,Ns,m,Ls,Ys,ts,A,Ds,es,G,Bs,os,E,nn=`<code class="language-sh">ionic start devdactic-frost blank 2cd devdactic-frost 3bower install ionic-ion-frost --save</code>`,ps,w,Ws,U,Zs,Js,ls,I,tn='<code class="language-undefined">angular.module('starter', ['ionic','ionic.contrib.frost'])</code>',cs,v,Us,z,zs,Ks,is,T,en=`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lib/ionic-ion-frost/ionic.contrib.frost.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 4<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lib/ionic-ion-frost/ionic.contrib.frost.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code>`,us,R,Qs,rs,$,Vs,ks,y,Xs,K,sa,aa,fs,P,on=`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-pane</span> <span class="token attr-name">ng-controller</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>AppCtrl<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myPane<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 5 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-header-bar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar-dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 6 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My App<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> 7 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-header-bar</span><span class="token punctuation">></span></span> 8 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-content</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>has-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 9 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button button-block button-balanced<span class="token punctuation">"</span></span> <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
9pushFrost()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Let it be frosty<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> 10 <span class="token comment"><!-- Your content --></span> 11 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-content</span><span class="token punctuation">></span></span> 12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-pane</span><span class="token punctuation">></span></span> 13 14<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-pane</span> <span class="token attr-name">ng-controller</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OverlayCtrl<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark-overlay<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showOverlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 15 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-header-bar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar-clear<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 16 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button button-block button-outline button-balanced<span class="token punctuation">"</span></span> <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hideFrost()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hide me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> 17 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-header-bar</span><span class="token punctuation">></span></span> 18 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-content</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>has-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 19 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-list</span><span class="token punctuation">></span></span> 20 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-item</span> <span class="token attr-name">ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 21 {{item.text}} 22 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-item</span><span class="token punctuation">></span></span> 23 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-list</span><span class="token punctuation">></span></span> 24 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-content</span><span class="token punctuation">></span></span> 25<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-pane</span><span class="token punctuation">></span></span></code>`,hs,H,na,ds,x,ta,ms,b,ea,Q,oa,pa,ws,S,pn=`<code class="language-css"><span class="token selector">.dark-overlay</span> <span class="token punctuation">{</span> 26 <span class="token property">background-color</span><span class="token punctuation">:</span> #222 <span class="token important">!important</span><span class="token punctuation">;</span> 27 <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> 28<span class="token punctuation">}</span> 29<span class="token selector">.dark-item</span> <span class="token punctuation">{</span> 30 <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span> 31 <span class="token property">color</span><span class="token punctuation">:</span> #fff <span class="token important">!important</span><span class="token punctuation">;</span> 32 <span class="token property">border-color</span><span class="token punctuation">:</span> #444 <span class="token important">!important</span><span class="token punctuation">;</span> 33<span class="token punctuation">}</span></code>`,vs,C,la,ys,M,ca,bs,j,ia,V,ua,gs,F,ln=`<code class="language-css"><span class="token selector">.controller('AppCtrl', function($scope, $rootScope, $compile)</span> <span class="token punctuation">{</span> 34 <span class="token selector">$scope.pushFrost = function()</span> <span class="token punctuation">{</span> 35 var el = angular.<span class="token function">element</span><span class="token punctuation">(</span>document.<span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myPane'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 36 el.<span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">
36'frost'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 37 el = $<span class="token function">compile</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">(</span>$scope<span class="token punctuation">)</span><span class="token punctuation">;</span> 38 $rootScope.showOverlay = true<span class="token punctuation">;</span> 39 <span class="token punctuation">}</span><span class="token punctuation">;</span> 40<span class="token punctuation">}</span><span class="token punctuation">)</span></code>`,_s,f,ra,X,ka,fa,ss,ha,da,Es,g,ma,as,wa,va,Is,O,cn=`<code class="language-css"><span class="token selector">.controller('OverlayCtrl', function($scope, $rootScope, $compile)</span> <span class="token punctuation">{</span> 41 $scope.items = []<span class="token punctuation">;</span> 42 <span class="token function">for</span><span class="token punctuation">(</span>var i = 0<span class="token punctuation">;</span> i < 5<span class="token punctuation">;</span> <span class="token selector">i++)</span> <span class="token punctuation">{</span> 43 <span class="token selector">$scope.items.push(</span><span class="token punctuation">{</span><span class="token property">text</span><span class="token punctuation">:</span> <span class="token string">'Whatever '</span> + <span class="token punctuation">(</span>i+1<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 44 <span class="token punctuation">}</span> 45 46 <span class="token selector">$scope.hideFrost = function()</span> <span class="token punctuation">{</span> 47 $rootScope.showOverlay = false<span class="token punctuation">;</span> 48 var el = angular.<span class="token function">element</span><span class="token punctuation">(</span>document.<span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myPane'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 49 50 // el.<span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Removes the complete object 51 52 // Another way<span class="token punctuation">,</span> still not working 53 // var safe = el.<span class="token function">children</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 54 // el.<span class="token function">empty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 55 // el.<span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'<ion-pane ng-controller="UnderCtrl" id="myPane">'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 56 // el.children = safe<span class="token punctuation">;</span> 57 // el = $<span class="token function">compile</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">(</span>$scope<span class="token punctuation">)</span><span class="token punctuation">;</span> 58 59 <span class="token punctuation">}</span><span class="token punctuation">;</span> 60<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`,Ts,N,ya,Ps,L,ba,Ss,Y,ga,js,D,_a,Fs,B,Ea,Os,W,q,Ia,_,Ta,Pa,qs,Z,Sa;return{c(){h=l("p"),Ms=o("The frosted glass effect is a smart way to have an overlay above your content while still seeing that there is something in the background. If you are an iOS user, you will have noticed this effect in places like when you pull down your notifications."),ns=u(),d=l("p"),Ns=o("Today I will show you how to add this cool effect to your Ionic App with the help of the "),m=l("a"),Ls=o("Ionic Frosted Glass Ion"),Ys=o("."),ts=u(),A=l("h3"),Ds=o("Setup a simple App"),es=u(),G=l("p"),Bs=o("As always we will start with a simple blank Ionic app. Then we install the custom ion with the help of bower, so run these commands:"),os=u(),E=l("pre"),ps=u(),w=l("p"),Ws=o("To use the Ion, we need to include it in our module so open your "),U=l("strong"),Zs=o("app.js"),Js=o(" and add it to our dependencies:"),ls=u(),I=l("pre"),cs=u(),v=l("p"),Us=o("Finally we have to load the needed files inside our "),z=l("strong"),zs=o("index.html"),Ks=o(" so open it and add the 2 lines after the cordova.js script:"),is=u(),T=l("pre"),us=u(),R=l("p"),Qs=o("Now everything is set up and we are ready to let our app get frosty!"),rs=u(),$=l("h3"),Vs=o("Adding the Frosted Glass ion to our view"),ks=u(),y=l("p"),Xs=o("First of all we need to create a view which can be frosted. For this tutorial we will just have a simple header bar and a button to apply the frost effect. Go to your "),K=l("strong"),sa=o("index.html"),aa=o(" and replace everything inside your body with this:"),fs=u(),P=l("pre"),hs=u(),H=l("p"),na=o("You might be wondering why there is no directive added anywhere which would indicate frosted glass. The reason is simple: we will add the effect on the fly later by clicking on the button! This will bring up a problem, but we will see that later."),ds=u(),x=l("p"),ta=o("For now, we just have one simple view with an id assigned so we can access it later from our controller, and another one which will act simply as the overlay or c
60ontent we want to display above the frosted glass."),ms=u(),b=l("p"),ea=o("To have a good-looking effect, we need to add some css so open the "),Q=l("strong"),oa=o("style.css"),pa=o(" and insert these lines:"),ws=u(),S=l("pre"),vs=u(),C=l("p"),la=o("The view is ready, now we just need to create our controller!"),ys=u(),M=l("h3"),ca=o("Adding the controller for our Frosted Glass"),bs=u(),j=l("p"),ia=o("Our controller is already assigned to our view, let\u2019s creat it by adding this to our "),V=l("strong"),ua=o("app.js"),gs=u(),F=l("pre"),_s=u(),f=l("p"),ra=o("In fact our controller has only one function, which is assigning the "),X=l("code"),ka=o("frost"),fa=o(" directive to our content pane. We do this by grabbing the object by his id and afterwards adding the frost directive and recompiling the object. Finally we set the "),ss=l("code"),ha=o("rootScope.showOverlay"),da=o(" to true so that our second created pane inside the view will be visible (which is our overlay)."),Es=u(),g=l("p"),ma=o("You might have seen that this pane also has a controller, so let\u2019s go ahead and create this controller also in our "),as=l("strong"),wa=o("app.js"),va=o(". This controller will only have some items which will be displayed, so just some dummy data."),Is=u(),O=l("pre"),Ts=u(),N=l("p"),ya=o("So here I am confronted with a big problem: How to remove a directive from an element? I am sorry, but I found no way to achieve this. I would be super happy if someone of you could leave a comment on how to do this!"),Ps=u(),L=l("p"),ba=o("The problem is, the demo from Ionic for this effect just has the directive always added, but I guess most of the time you want to pull the effect up when some action takes place. So we need to find a way to dynamically add and remove a directive. I read many possible solutions, but none of them worked the way we need it here."),Ss=u(),Y=l("p"),ga=o("Anyway, you can start your app now and should get a cool looking frosted glass effect when you press the button."),js=u(),D=l("h3"),_a=o("Conclusion"),Fs=u(),B=l("p"),Ea=o("If you know a completely different approach to this problem and I am just dumb at this point, please also leave me your thoughts here or on Twitter. I hope you still learned how to apply and use the custom Ion for frosted glass, and we will be able to solve this myth so I can update the post for later!"),Os=u(),W=l("p"),q=l("strong"),Ia=o("If this tutorial was helpful, follow me on twitter "),_=l("a"),Ta=o("@schlimmson"),Pa=o(" and leave a comment/ tweet it! Don\u2019t forget to subscribe to my newsletter to receive new posts and info via mail!"),qs=u(),Z=l("p"),Sa=o("So long, Saimon"),this.h()},l(s){h=c(s,"P",{});var n=i(h);Ms=p(n,"The frosted glass effect is a smart way to have an overlay above your content while still seeing that there is something in the background. If you are an iOS user, you will have noticed this effect in places like when you pull down your notifications."),n.forEach(a),ns=r(s),d=c(s,"P",{});var As=i(d);Ns=p(As,"Today I will show you how to add this cool effect to your Ionic App with the help of the "),m=c(As,"A",{href:!0,title:!0,rel:!0});var Oa=i(m);Ls=p(Oa,"Ionic Frosted Glass Ion"),Oa.forEach(a),Ys=p(As,"."),As.forEac
60h(a),ts=r(s),A=c(s,"H3",{});var qa=i(A);Ds=p(qa,"Setup a simple App"),qa.forEach(a),es=r(s),G=c(s,"P",{});var Aa=i(G);Bs=p(Aa,"As always we will start with a simple blank Ionic app. Then we install the custom ion with the help of bower, so run these commands:"),Aa.forEach(a),os=r(s),E=c(s,"PRE",{class:!0});var un=i(E);un.forEach(a),ps=r(s),w=c(s,"P",{});var Gs=i(w);Ws=p(Gs,"To use the Ion, we need to include it in our module so open your "),U=c(Gs,"STRONG",{});var Ga=i(U);Zs=p(Ga,"app.js"),Ga.forEach(a),Js=p(Gs," and add it to our dependencies:"),Gs.forEach(a),ls=r(s),I=c(s,"PRE",{class:!0});var rn=i(I);rn.forEach(a),cs=r(s),v=c(s,"P",{});var Rs=i(v);Us=p(Rs,"Finally we have to load the needed files inside our "),z=c(Rs,"STRONG",{});var Ra=i(z);zs=p(Ra,"index.html"),Ra.forEach(a),Ks=p(Rs," so open it and add the 2 lines after the cordova.js script:"),Rs.forEach(a),is=r(s),T=c(s,"PRE",{class:!0});var kn=i(T);kn.forEach(a),us=r(s),R=c(s,"P",{});var $a=i(R);Qs=p($a,"Now everything is set up and we are ready to let our app get frosty!"),$a.forEach(a),rs=r(s),$=c(s,"H3",{});var Ha=i($);Vs=p(Ha,"Adding the Frosted Glass ion to our view"),Ha.forEach(a),ks=r(s),y=c(s,"P",{});var $s=i(y);Xs=p($s,"First of all we need to create a view which can be frosted. For this tutorial we will just have a simple header bar and a button to apply the frost effect. Go to your "),K=c($s,"STRONG",{});var xa=i(K);sa=p(xa,"index.html"),xa.forEach(a),aa=p($s," and replace everything inside your body with this:"),$s.forEach(a),fs=r(s),P=c(s,"PRE",{class:!0});var fn=i(P);fn.forEach(a),hs=r(s),H=c(s,"P",{});var Ca=i(H);na=p(Ca,"You might be wondering why there is no directive added anywhere which would indicate frosted glass. The reason is simple: we will add the effect on the fly later by clicking on the button! This will bring up a problem, but we will see that later."),Ca.forEach(a),ds=r(s),x=c(s,"P",{});var Ma=i(x);ta=p(Ma,"For now, we just have one simple view with an id assigned so we can access it later from our controller, and another one which will act simply as the overlay or content we want to display above the frosted glass."),Ma.forEach(a),ms=r(s),b=c(s,"P",{});var Hs=i(b);ea=p(Hs,"To have a good-looking effect, we need to add some css so open the "),Q=c(Hs,"STRONG",{});var Na=i(Q);oa=p(Na,"style.css"),Na.forEach(a),pa=p(Hs," and insert these lines:"),Hs.forEach(a),ws=r(s),S=c(s,"PRE",{class:!0});var hn=i(S);hn.forEach(a),vs=r(s),C=c(s,"P",{});var La=i(C);la=p(La,"The view is ready, now we just need to create our controller!"),La.forEach(a),ys=r(s),M=c(s,"H3",{});var Ya=i(M);ca=p(Ya,"Adding the controller for our Frosted Glass"),Ya.forEach(a),bs=r(s),j=c(s,"P",{});var ja=i(j);ia=p(ja,"Our controller is already assigned to our view, let\u2019s creat it by adding this to our "),V=c(ja,"STRONG",{});var Da=i(V);ua=p(Da,"app.js"),Da.forEach(a),ja.forEach(a),gs=r(s),F=c(s,"PRE",{class:!0});var dn=i(F);dn.forEach(a),_s=r(s),f=c(s,"P",{});var J=i(f);ra=p(J,"In fact our controller has only one function, which is assigning the "),X=c(J,"CODE",{});var Ba=i(X);ka=p(Ba,"frost"),Ba.forEach(a),fa=p(J," directive to our content pane. We do this by grabbing the object by his id and afterwards adding the frost directive and recompiling the object. Finally we set the "),ss=c(J,"CODE",{});var Wa=i(ss);ha=p(Wa,"rootScope.showOverlay"),Wa.forEach(a),da=p(J," to true so that our second created pane inside the view will be visible (which is our overlay)."),J.forEach(a),Es=r(s),g=c(s,"P",{});var xs=i(g);ma=p(xs,"You might have seen that this pane also has a controller, so let\u2019s go ahead and create this controller also in our "),as=c(xs,"STRONG",{});var Za=i(as);
60wa=p(Za,"app.js"),Za.forEach(a),va=p(xs,". This controller will only have some items which will be displayed, so just some dummy data."),xs.forEach(a),Is=r(s),O=c(s,"PRE",{class:!0});var mn=i(O);mn.forEach(a),Ts=r(s),N=c(s,"P",{});var Ja=i(N);ya=p(Ja,"So here I am confronted with a big problem: How to remove a directive from an element? I am sorry, but I found no way to achieve this. I would be super happy if someone of you could leave a comment on how to do this!"),Ja.forEach(a),Ps=r(s),L=c(s,"P",{});var Ua=i(L);ba=p(Ua,"The problem is, the demo from Ionic for this effect just has the directive always added, but I guess most of the time you want to pull the effect up when some action takes place. So we need to find a way to dynamically add and remove a directive. I read many possible solutions, but none of them worked the way we need it here."),Ua.forEach(a),Ss=r(s),Y=c(s,"P",{});var za=i(Y);ga=p(za,"Anyway, you can start your app now and should get a cool looking frosted glass effect when you press the button."),za.forEach(a),js=r(s),D=c(s,"H3",{});var Ka=i(D);_a=p(Ka,"Conclusion"),Ka.forEach(a),Fs=r(s),B=c(s,"P",{});var Qa=i(B);Ea=p(Qa,"If you know a completely different approach to this problem and I am just dumb at this point, please also leave me your thoughts here or on Twitter. I hope you still learned how to apply and use the custom Ion for frosted glass, and we will be able to solve this myth so I can update the post for later!"),Qa.forEach(a),Os=r(s),W=c(s,"P",{});var Va=i(W);q=c(Va,"STRONG",{});var Cs=i(q);Ia=p(Cs,"If this tutorial was helpful, follow me on twitter "),_=c(Cs,"A",{href:!0,title:!0,rel:!0});var Xa=i(_);Ta=p(Xa,"@schlimmson"),Xa.forEach(a),Pa=p(Cs," and leave a comment/ tweet it! Don\u2019t forget to subscribe to my newsletter to receive new posts and info via mail!"),Cs.forEach(a),Va.forEach(a),qs=r(s),Z=c(s,"P",{});var sn=i(Z);Sa=p(sn,"So long, Saimon"),sn.forEach(a),this.h()},h(){k(m,"href","https://github.com/driftyco/ionic-contrib-frosted-glass"),k(m,"title","Ionic frosted glass ion"),k(m,"rel","nofollow"),k(E,"class","language-sh"),k(I,"class","language-undefined"),k(T,"class","language-html"),k(P,"class","language-html"),k(S,"class","language-css"),k(F,"class","language-css"),k(O,"class","language-css"),k(_,"href","https://twitter.com/schlimmson"),k(_,"title","@schlimmson"),k(_,"rel","nofollow")},m(s,n){t(s,h,n),e(h,Ms),t(s,ns,n),t(s,d,n),e(d,Ns),e(d,m),e(m,Ls),e(d,Ys),t(s,ts,n),t(s,A,n),e(A,Ds),t(s,es,n),t(s,G,n),e(G,Bs),t(s,os,n),t(s,E,n),E.innerHTML=nn,t(s,ps,n),t(s,w,n),e(w,Ws),e(w,U),e(U,Zs),e(w,Js),t(s,ls,n),t(s,I,n),I.innerHTML=tn,t(s,cs,n),t(s,v,n),e(v,Us),e(v,z),e(z,zs),e(v,Ks),t(s,is,n),t(s,T,n),T.innerHTML=en,t(s,us,n),t(s,R,n),e(R,Qs),t(s,rs,n),t(s,$,n),e($,Vs),t(s,ks,n),t(s,y,n),e(y,Xs),e(y,K),e(K,sa),e(y,aa),t(s,fs,n),t(s,P,n),P.innerHTML=on,t(s,hs,n),t(s,H,n),e(H,na),t(s,ds,n),t(s,x,n),e(x,ta),t(s,ms,n),t(s,b,n),e(b,ea),e(b,Q),e(Q,oa),e(b,pa),t(s,ws,n),t(s,S,n),S.innerHTML=pn,t(s,vs,n),t(s,C,n),e(C,la),t(s,ys,n),t(s,M,n),e(M,ca),t(s,bs,n),t(s,j,n),e(j,ia),e(j,V),e(V,ua),t(s,gs,n),t(s,F,n),F.innerHTML=ln,t(s,_s,n),t(s,f,n),e(f,ra),e(f,X),e(X,ka),e(f,fa),e(f,ss),e(ss,ha),e(f,da),t(s,Es,n),t(s,g,n),e(g,ma),e(g,as),e(as,wa),e(g,va),t(s,Is,n),t(s,O,n),O.innerHTML=cn,t(s,Ts,n),t(s,N,n),e(N,ya),t(s,Ps,n),t(s,L,n),e(L,ba),t(s,Ss,n),t(s,Y,n),e(Y,ga),t(s,js,n),t(s,D,n),e(D,_a),t(s,Fs,n),t(s,B,n),e(B,Ea),t(s,Os,n),t(s,W,n),e(W,q),e(q,Ia),e(q,_),e(_,Ta),e(q,Pa),t(s,qs,n),t(s,Z,n),e(Z,Sa)},p:Fa,i:Fa,o:Fa,d(s){s&&a(h),s&&a(ns),s&&a(d),s&&a(ts),s&&a(A),s&&a(es),s&&a(G),s&&a(os),s&&a(E),s&&a(ps),s&&a(w),s&&a(ls),s&&a(I),s&&a(cs),s&&a(v),s&&a(is),s&&a(T),s&&a(us),s&&a(R),s&&a(rs),s&&a($),s&&a(ks),s&&a(y),s&&a(fs),s&&a(P),s&&a(hs),s&&a(H),s&&a(ds),s&&a(x),s&&a(ms),s&&a(b),s&&a(ws),s&&a(S),s&&a(vs),s&&a(C),s&&a(ys),s&&a(M),s&&a(bs),s&&a(j),s&&a(gs),s&&a(F),s&&a(_s),s&&a(f),s&&a(Es),s&&a(g),s&&a(Is),s&&a(O),s&&a(Ts),s&&a(N),s&&a(Ps),s&&a(L),s&&a(Ss),s&&a(Y),s&&a(js),s&&a(D),s&&a(Fs),s&&a(B),s&&a(Os),s&&a(W),s&&a(qs),s&&a(Z)}}}const _n={title:"Adding Frosted Glass Effect to your Ionic Framework App",author:"Simon Grimm",author_id:1,twitter:"schlimmson",description:"The frosted glass effect is a smart way to have an overlay above your content while still seeing that there is something in the background. If you are an iOS user, you will have noticed this effect in places like when you pull down your notifications.",published:"2015-04-15T00:00:00.000Z",slug:"frosted-glass-ionic",updated:"2015-04-15T00:00:00.000Z",t
60imeToRead:5,wpId:943,tags:["angularJS","ionic","javascript","Mobile","Image"],hero:"/img/blog/wp-img/devdactic.com-wp-content-uploads-2015-03-frosted-glass-header.webp"};class En extends wn{constructor(h){super(),vn(this,h,null,bn,yn,{})}}export{En as default,_n as metadata};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.