I was looking at the source code for the header on the Polymer website so I could build a similar one for my app.
They use iron-selector for the menu items.
But on their documentation page for responsive-navigation-pattern they use paper-tabs for the same kind of header implementation with tabs.
What is the difference between iron-selector and paper-tabs and which one should I use if I want a similar header for my app?
The <iron-selector> element manages item selection and has no template or styling (i.e., it doesn't look like the top nav on Polymer's site out of the box). If you want a barebones control, where you could fine-tune the styling of the selected items yourself, this element would be ideal.
The <paper-tabs> element also manages item selection, but includes its own styling (which follows material design) and navigation controls to access the tabs out of view. If you prefer a responsive control that uses material design and other customizable styles, this might be a better choice.
The <iron-selector> on the main page of the Polymer site is styled similarly to the <paper-tabs> element's default style, and since that's the look you're after, I recommend <paper-tabs> mainly because it achieves your goal with less effort required.
Related
In Slate, I want to be able to toggle and show/hide widgets on a page (i.e. Containers widgets full of widgets or specific widgets based on a user interaction like clicking a toggle).
It's unclear to me how to do this. Is it possible with CSS?
Also, can I do this based on which user views the page?
You can definitely do this with CSS. Slate widgets have an "Additional CSS Classes" section that can conditionally apply any CSS class that you've created.
To do this, you would need to create a CSS class that hides your widget appropriately (i.e. hidden), and conditionally apply it based off of the state of the toggle.
For example:
{{#if w_toggle.on}} hidden {{/if}}
To do this based off of which user is on the page would be similar. You would just need a way to determine if the specified user is okay to view the page or not, which can be done in a function or something similar.
NOTE: Hiding widgets based off of CSS is NOT SECURE. Anything that can be done with CSS can be undone with CSS. If you choose to hide widgets using CSS, please be advised that CSS-savvy users can un-hide the widget if they so choose.
For other patterns related to showing and hiding or conditionally styling widgets, check out the section on UX/UI Considerations in the Slate Development Best Practices guide in the Foundry documentation.
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
I need to integrate my web application inside another(main app). I don't use the bootstrap library but the main app does. I however don't want my already-styled controls to be affected by the bootstrap of the main app. How can I prevent bootstrap from applying its styles on my controls?
You can't really. If the CSS overwrites the styling of basic elements the only way for you to not be affected by them is to override the changes (each and every attribute) on your portion of the ui and below.
It is in my humble opinion, one of the weakest points of CSS today that you have no way to block the cascading when desired.
I am a fresh from XAML person. I am now building a HTML5 UI, where I need a dropdown box which will have items in a hierarchal view (need to have ul with li(s) inside dropdown). Each item also needs to have a check-box to its left. If this was XAML, I could've done it easily, because most elements are containers. But in HTML5, I've no idea what to do.
From my searching, what I've understood is that one way is to build a custom control using jQuery.
Is there a simpler way to achieve this in HTML5?
Thanks
I think the easiest way to do that is a jQuery (or any other JS UI Framework). You can also just use plain Javascript.
A combination of HTML and CSS is also possible. Just search "CSS Dropdown" and add some Checkboxes. I do not know a pure HTML5 solution.