ionic-team / ionic-contrib-frosted-glass Goto Github PK
View Code? Open in Web Editor NEWAn optional frosted-glass effect for iOS 7 styled Ionic apps.
License: MIT License
An optional frosted-glass effect for iOS 7 styled Ionic apps.
License: MIT License
Hi,
I have urgent requirement , I want to add chat bubble start from bottom to top like given on slack website and its app , is there any thing that ca do it as soon as possible or have to add some css.
Regards
Shivam
Demo is not working.
We can now use -webkit-backdrop-filter in current iOS 9
So I think there is no need for javascript anymore.
.bar-frosted {
background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid #dddddd;
}
Similar issues had been addressed before. Once the keyboard appears
There have been issues with ionic keyboard and inputs
I followed the instructions from the above but was not able to get it working with ionic-frosted-glass. Any pointers to fix this up ?
I am using the cordova ionic keyboard plugin.
Plugin "com.ionic.keyboard" already installed on ios.
if you use the add message button several times so some of the new messages manages to reach the top of the view, it is not blurred correctly, instead it is completely hidden when under the header
Hi.
I'm trying to put the effect in a nav-bar tag, but this doesn't works....
<ion-header-bar frosted-bar class="bar-positive" title="'Blurred...man!'" type="bar-frosted">
</ion-header-bar>
<ion-nav-view name="mainContent">
</ion-nav-view>
This code works, but this not:
<ion-nav-bar frosted-bar class="bar-positive" type="bar-frosted">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Atrás</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="mainContent">
</ion-nav-view>
Anybody can help me? Thanks
Hi, I managed to get this working... kind of :) and it's not working always, which is weird.
I use ion-nav-bar and the first thing is that the bar isn't grey, it stays white. Sometimes I get it to work, especially in a new browser session. When it does work, the bar's title is lost.
I also get this error, I think it might be related:
TypeError: Object [object global] has no method 'rAF'
at http://127.0.0.1:9000/vendor/ionic.contrib.frostedGlass.js:64:16
I run ionic through connect, but when I just open local files, i get the same error.
I load ionic 0.9.25 through bower, angular is version 1.2.12
The ionic-contrib-blur
div is appended on top of any buttons appearing in the ion-header-bar
, resulting in the buttons being unaccessible.
Adding pointer-events: none;
to the ionic-contrib-blur
class fixes this problem for me, but I'm sure I'm not the only one who expects this to just work out of the box.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.