Polymer has a paper-icon-button:
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
Polymer also has a paper-fab:
https://www.webcomponents.org/element/PolymerElements/paper-fab/elements/paper-fab
I understand the design difference; that the material design spec recommends using these differently (e.g. "Only one floating action button is recommended per screen"), but is there really any difference as far as the components go? Or is a paper-fab just a paper-icon-button with a pink background, a border radius, and a box shadow (three lines of css?). Basically, I don't understand why I should bother importing both.
As you commented, it is because of its behavior following Material Design spec. <paper-fab> is intended to represent the primary action of the app while <paper-icon-button> provide additional functionality.
Let's use Twitter mobile app as an example. In Android, it has a "paper fab" to post new tweets, and we can all agree that the main purpose of Twitter app is to post tweets so it makes sense to place a floating button for that action, while it has additional buttons represented as icons to add functionality, for example the find contacts button that you can find next to the search bar.
Note: Take into account the date this answer was posted as Twitter UI could have been changed since then. If example description is not clear, please comment it and I will try to post a screenshot.
Concerning the implementation in Polymer of these components, both uses <iron-icon> and we could consider the code "pretty close", you can check them here: <paper-icon-button> and <paper-fab>
So, in conclusion, despite thinking they are pretty much the same, it is good to use them as different components as they represent different things.
Related
Started working on a new web application recently and noticed they insert images into their pages by using css pseudo-elements. What is the point of this? Why not just use a normal img tag?
Hi Chopper Draw Lion4,
That's a great question which has several possible answers.
Its an older site and they were doing the old image replacement technique
This was popular circa 2000 - 2010 when people believed that using text was more beneficial to SEM/SEO than using an image with an alt tag. It was "all the rage"
It could be useful in responsive markup. Depending on what kind of image/size. It may be that image only shows at certain response points. (yet one would still wonder why not hide them image rather than use a pseudo element)
Unskilled developer who just discovered pseudo-elements. This doesn't need much explanation.
The application may have been written in a way which did not give the ui developer access to the core html code which is injected.
I suspect this is the most likely reason. And the one I have come across most often.
Situation: the ui developer needs to make something happen. But they have been forbidden from touching the actual coding.
Example:
"Dear ui developer, please insert smiley faces or frowny faces depending on whether this is a positive comment or a negative one."
<custom-directive data-grade="bad">{{Our Data is Great and You Stink}}<custom-directive>
<custom-directive data-grade="good">{{Your Data can Enjoy New Life}}<custom-directive>
What would you do if this is all you were given and there were no interior elements to which you could insert the smiley/frowny face?
Well, if it were me, I'd probably have to , at that point use a css pseudo element.
See this as an example to answer:
http://codepen.io/Acts7/pen/MJRrwa
Or this spiffy solution for a "star rating system"
https://codepen.io/Acts7/pen/BpEJRg
Hope this answers your question.
I am making a social networking site and would like emoticons to be available to users to click, and view a whole range of standard emoticons. I have seen around the web, and have not come up with any concrete information whether this can be done, and how.
The way I imagine the emoticons to be is similar to what WhatsApp have adopted. An emoticon icon, which, on click, displays a whole range of icons. Just wondering whether it is possible and if so, how?
It can be done, you would need a java-script widget for it though and depending on the rest of your framework it could be fully integrated or it would require some additional files.
Here is one example of such a widget, not sure if it is precisely what you need but you can get the idea there:
https://www.npmjs.com/package/emoticons-js
Umm, you can have a set of icons what you can display?
Or use the unicode entry points for the emojis?
http://apps.timwhitlock.info/emoji/tables/unicode
Then you need one element with some onclick handler in Javascript which opens up a floating div showing a selection of emojis.
This is using MVC 4 with Visual Studio 2013:
I am wondering on how I would approach changing the text of my website dynamically through the click of a button. This is also the same for contrast. I am wondering if there's any plug ins or approaches I can take to do this?
Heres an example of it being implemented correctly : http://www.bbc.co.uk/accessibility/guides/change_colours/#
Giving different text sizes and contrasts etc. How would I approach this?
My idea was to have a button that calls the same CSS sheet with the new colour /contracts. But that would mean I would need about 4-5 CSS sheets that are exactly the same with just the text/contrast changing. Is there a better approach to this?
May be Observables and data-binding is your best solution here.
Basically, you can bind your html with observables (your data model). When your data model's state changes, your UI updates automatically and vice-versa. It follows the MVVM pattern.
One of the most popular libraries out their for MVVM is Knockout.js (Here: http://knockoutjs.com/) This will make your life much easier! It made mine. :-)
Hope this helps!
I have this textarea element, and i want each line in the box to be clickable and respond to javascript events, is that possible or am i looking for a different type of element?
That is not possible. In order for you do produce such behavior, you would need to design your own "textbox". Google Docs has done this for example, where the entire "textarea" is a complex and highly functional set of divs etc.
A much less intensive version of the multi-div selectable layout could be accomplished with Data Tables. See the tutorial here
They also offer tutorials on edit-in-place as well as select and delete. If you're not already using a grid to present data, it's a great tool for UI.
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.