Is there a simple way to implement swipeable tabs using Polymer JS 2 in which navigation can be performed using tab selection or container swiping?
Ideally there's a component or combination of components already built for this. However, I haven't been able to find any that meet the need directly.
I found this answer for Polymer JS 1, however, I'm looking for a Polymer JS 2 solution.
If needed, I can write my own. I would think these elements would be the starting point but not sure:
paper-tabs
iron-swipeable-container
Any thoughts?
Related
New to Polymer BTW. I have polymer 1 app running. Wondering if I can use Polymer lit-elements in Polymer 1?
Trying to achieve: Ask is to embed another module which is written in JavaScript by another team in my company to my polymer1 app. Is there any better way to do this?
UPDATE: Alot of changes have been made since the below answer was given. It may be possible now. Not sure.
No, as far as mixing with other Polymer library iterations, lit-element is stand alone and a upgrade from Polymer 3.
From https://www.polymer-project.org/blog/2018-05-02-roadmap-faq
In summary:
No
Basically it is impossible.
You should consider upgrading to polymer 3 to use lit element
Polymer 1 is not even used in Classes, so it is practically impossible and polymer 1 is falling into disuse so the polymer team do not think it plans to support this new feature.
Is there any UI automation framework(like Selenium or Potractor) for web sites built using google's Polymer?
Well, I haven't tried but Selenium (maybe Protractor too) should work fine. After all Web Components is just DOM. With Shadow DOM however you'd need to prefix selectors with body /deep/. And I don't think XPaths will work.
And, there's also Web Component Tester although that's something different, not used to test entire pages AFAICT
Selenium does work with Polymer. However, there are some challenges with finding/working with elements within shadow doms. It seems that most buttons are exposed as are text fields. The challenge that I have run into and am still working on is testing date pickers, drop downs and lists. These element seem to be obfuscated behind a shadow dom or something similar, but the /deep/ method doesn't work to access them.
Selenium works with polymer. I tried finding solution online but failed. Experimented and found a way which helped my testers to completely automate our application built on polymer (E-E) with Selenium.Icludes ircular picker, dropdown, tabs, lists, buttons, links, time picker and other functionalities that are custom built but were possible over time.
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.
I am trying to replicate the slide-up and tile-cascade transitions seen here using this jist with the polymer designer tool
The difference here is I want to use custom elements instead of tags. I created custom elements for each page and placed them all within a core-animated-pages.
I want all a grid of cards inside one of the pages to tile-cascade down and the core-scroll-header to slide-up just like in the above jist but every way I try to nest the tags to put the transition attributes on the desired children, nothing works. The only thing that works is setting the core-animated-pages transitions attribute to "cross-fade-all." Very frustrating since documentation/examples on tile-cascade is scarce.
Example site: http://marissageoffroy.ored.net
Github repo: https://github.com/ocorso/marissageoffroy
Message from Arthur off the Polymer Google Group:
This puzzled me, too, until I cracked open the tile-cascade file:
https://github.com/Polymer/core-animated-pages/blob/master/transitions/tile-cascade.html
Look in there, and you'll see that the transitions require each tile to be a .
The quick solution here is just to wrap each of your core-cards in a .
There is an open issue about this: https://github.com/Polymer/core-animated-pages/issues/14
You might want to follow that issue for updates.
Thanks,
Arthur
There are a lot of presentation frameworks out there for html + js. What would be a good way to accomplish a similar presentation in polymer? Is there any polymer elements that would be candidates to present a new slide and friendly with polymers transitions? I'm doing more with polymer and prefer that to using the existing frameworks.
The core-pages and core-animated-pages can probably be used to make a deck.
Here's an example that Addy Osmani put together
There are also a few projects, here and here.