So how can I make a slide button like in the picture below using ionic framework ?
Awesome question!!
In CSS or the web community in general it is called a Toggle button. According to ionic's official website, what you call it, will not get the results you are looking for.
Here is the official code snippet:
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
And here is the Official Codepen that goes with it
And if you have anymore of these related questions you should check out the official docs!
Happy developing!
Edit:
What you are wanting I think isn't completely possible with ionic, if I find a better solution I will share, but I seem to be stumped now :/
Edit2: I am starting to conclude as bad as it seems, that this isn't but only common to e.g. IOS, but not finding it in any examples, just standard toggle buttons. The animation is done as though it was a checkbox. So essentially you are checking it. It just looks different. You may have to engineer this yourself. Again I will add a better solution if I find one, but as for now, I don't think there is a way to get it exactly as you wish.
Related
I really like the getting started guide by Bootstrap (http://getbootstrap.com/css/), and I want to do something similar in my project. I've looked at highlight.js but it seems the color is a bit off to me. I don't know how to implement the copy to clipboard feature. Is this something I should be able to come up with on my own? I prefer third party solutions since this isn't the main crux of my project, but I thought this will be nice to my users.
I'd suggest giving highlight.js another look. There are multiple style themes you can choose from if you find the color to be off on a particular one. Or, you can do a little css to customize the colors yourself.
An alternative for syntax highlighting is prism.js.
For the copy to clipboard piece, take a look at ZeroClipboard.
thanks for reading this and helping out a complete stranger.
Essentially, I am trying to replicate what Google says in their material design document using polymer, recreating this effect http://material-design.storage.googleapis.com/images/materialdesign-goals-landingimage_large_mdpi.png
Sadly, I've had no success, I had originally though that such a feature would be built in Polymer (Please correct me if I'm wrong). Anyway, thanks for your help, and here is the source code https://github.com/Rijul-Ahuja/Rijul-Ahuja.github.io/tree/master/Enactus
i think you are looking for core-media-query
https://www.polymer-project.org/docs/elements/core-elements.html#core-media-query
edit: added a video on how to use it.
https://www.youtube.com/watch?v=svfu9iQ8cyg
One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.
How can I use Twitter kind of HTML prompt for my app?
You can see this prompt message while deleting your tweet.
I have seen this style of alert box in the new version of Wordpress and its also used in Gmail.
Kindly help to figure this out.
Thanks.
Take a look at this tutorial. Not far from what you are asking for. This is a simple confirm dialogue based on some images and CSS with JQuery. So should be very easy for you to customise.
http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
If you are looking for much more sophistication then look in to JQuery UI.
Well it's prompt style of Firefox 4. Every alert('some thing') become such kind of popup. I didn't know that.
Jotform.com uses a nice panel bar, the navigation system in the left side. It looks polished and is rich in functionality. The items have a highlight and have help '?' functionality which display a preview upon hovering.
I don't know if they built it themselves. I was wondering if there's a jQuery plugin or UI
Framework that helps me build something very similar. I already have Telerik's controls however this one looks cooler.
They probably did it with one of the JavaScript libraries they link to on the webpage. The probably did it with this one?
Edit: I was incorrect on closer inspection is is this file that is used when the side panel is used, but I cannot find the library that it came from.
Perhaps you could just contact them and ask?