I am using something like this:
<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
<sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
<sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
<sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>
</neon-animated-pages>
That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.
for exmaple inside I have something like this:
dom-module id="sys-neonpage1">
<template>
<sys-elemento class="prueba"></sys-elemento>
</template>
And the element has his own animations that never started if i use it inside ...
is that posible?, thanks a lot.
What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes
In general, i recommend you read the whole "using neon-animations" guide as it is well written.
Related
Using Polymer 1 I'm trying to figure out a way to dinamically switch pages inside a paper-dialog and inside each page to have a paper-dialog-scrollable element.
Here's the short version of what I'm trying to do:
<paper-dialog with-backdrop>
<iron-pages selected="0">
<div>
<paper-dialog-scrollable>
Long content 1 goes in here...
</paper-dialog-scrollable>
</div>
<div>
<paper-dialog-scrollable>
Long content 2 goes in here...
</paper-dialog-scrollable>
</div>
</iron-pages>
</paper-dialog>
The issue is that the paper-dialog-scrollable, when the window is resized, goes over the paper-dialog edges and no scrollbars get shown.
I've looked a the code for paper-dialog-scrollable and it has a "dialogElement" property that is by default "this.parentNode". I've also tried to change that from the code with each page change but I cannot get it to work. Here's the "code":
this.querySelector('iron-pages').selectedItem.querySelector('paper-dialog-scrollable').dialogElement = this.querySelector('paper-dialog');
The last attempt I made was to trigger the refit and notifyResize on the dialog just under the above snippet of code, using the following:
this.querySelector('paper-dialog').notifyResize();
this.querySelector('paper-dialog').refit();
Maybe someone has ran into this issue and found a solution to this!?
Any hints or ideas would be appreciated!
I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.
<paper-menu selected="{{selected}}">
<paper-item on-tap="_onItemTap" role="menuitem">
<iron-icon icon="cloud-done"></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary class="second-item-line">Complete</div>
</paper-item-body>
</paper-item>
(... other items)
</paper-menu>
The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.
Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?
Update:
Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.
I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:
<paper-card>
<div class="card-content">
<iron-selector selected="{{selected}}">
<paper-icon-item on-tap="_onItemTap">
<iron-icon icon="cloud-done" item-icon></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary>Complete</div>
</paper-item-body>
</paper-icon-item>
<!-- other items -->
</iron-selector>
</div>
</paper-card>
I'm having some trouble migrating to Polymer 1.0
My main problem is that the classes "style-scope" and "my-element" are being applied to every child node in the element. This is not a problem when using something like this:
<paper-dialog modal class="vertical layout">
<div class="top">
<div class="green">{{format(inputtext)}}</div>
It just changes their classes to "top style-scope my-element" and "green style-scope my-element" respectively and everything works ok.
But right now on Polymer 1.0 I can't bind a classname to a property, so I have to compute it with something like this:
<template is="dom-repeat" items="{{ item-list }}" as="item">
<span class="{{setitemclass(item)}}" on-click="itemClicked" role="button" >{{item}}</span>
</template>
setitemclass: function (item) {
return 'itnumb' + item;
}
As the element is created every span created goes through the setitemclass function and it returns what it should (something like 'itnumb1', 'itnumb2' and so on), but when it finishes, the class appears as "style-scope my-element" for every span, with no sigh of the 'itnumb#' bit anywhere.
I just don't know how to approach this, since binding has changed quite a bit in my eyes.
Thanks!
In order to bind to an attribute that does not match to a respective JS property of that element (e.g. class, href, data-*), you should use $= rather than plain =.
<span class$="{{setitemclass(item)}}" on-click="itemClicked" role="button">{{item}}</span>
Source: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding
I try so solve the following problem. Please, see example:
custom-elements.html
<polymer-element name="ui-nav" class="_row _columned _cols-2 mobile_cols-12" noscript>
<template>
<content></content>
</template>
</polymer-element>
index.html
<ui-nav>
<div>Привет русским</div>
<div>Контакты</div>
<div>О себе</div>
</ui-nav>
main.css
._row {display: block;}
._row [class*="_cols-"] {float:left;}
._cols-2 > * {width: 20%;}
...
The example above works as expected: all the styles applied to ui-nav (using classes) inherited by all div child elements. However, what if I need to add additional classes to ui-nav in different case? For example
<ui-nav> <!-- case 1 -->
<div>Content</div>
...
</ui-nav>
<ui-nav class="border-green"> <!-- case 2 -->
<div>Another content</div>
...
</ui-nav>
In the example border-green will break the logic, because it overwrites predefined classes previously defined in class attribute of polymer-element. I tried to apply classes on content tag, but it doesn't work. As well as the following form doesn't work too:
<polymer-element name="ui-nav" noscript>
<template>
<div class="_row _columned _cols-2 mobile_cols-12">
<content></content>
</div>
</template>
</polymer-element>
So how can I apply already existing classes like _row _cols-2 to the elements of lightDOM without defining additional classes/styles using ::shadow, ::content etc?
The short answer is you can't.
You could include your stylesheet that contains these styles in your template, and use the last option where you wrap the content in a div with those classes, but that is likely to have some performance issues as the stylesheets will be inlined at runtime.
The only other option really is to use some shadow boundary piercing selector like ::shadow, /deep/, etc from your main stylesheet.
I should have specified that this is a polymer question and not native HTML.
I have a template like this
<template>
<a href="{{ href }}">
<content></content>
</a>
</template>
When I hover over the custom element my cursor iscursor:text and not cursor:pointer, this is an easy fix to apply cursor pointer, but I feel as if those kind of properties should be inherited. Is there any way to apply the content and inherit the a properties properly?
Example on jsfiddle here
Update: 1
An even bigger issue with this is that you can't right-click and select copy-link either.
Update: 2
I kind of think I get it now, <content> isn't being passed a height or width, so the outer most element (the custom one) is height 0, width 0. So the anchor has no room to expand. Hence the cursor isn't switching.
tried, no luck
::content * {
width:inherit;
height:inherit;
}
Update 3
This kinda worked.
I had to give the anchor a id=anchor and use jQuery.
$(this.$.anchor).append($(this).html());
This won't import font-awesome icons for some reason, where does.
Perhaps it's because it's not importing over the styles when I grab the HTML?
There's no error in the console either.
I dropped the to font-awesome within the polymer template and it worked, which is kind of crappy. Need a better solution.
This is a bug with Chrome's current implementation of Shadow DOM that will be fixed in Chrome 37.
You have nothing to make a link out of; you're "linkifying" an empty block.
If you give <content> some innards, you'll see the inherited style:
<template>
<a href="{{ href }}">
<content> Here is a link. </content>
</a>
</template>
Example Fiddle
I have no idea how you're actually using this element, but http://jsbin.com/qaqigizajuvi/1/edit is a simple example of how to make at least what I think you're trying to achieve, work.
If you're using {{ name }} macros, you'll need to declare attributes for each name that you use. There's also no point in a <content> block if you just want a linktext: use another attribute macro in your definition:
<polymer-element name="monkey-test" attributes="href label" noscript>
<template>
{{ label }}
</template>
</polymer-element>
and then instantiate it as either:
<monkey-test href="http://example.org" label="tadah"></monkey-test>
or set up a <monkey-test> element and then set its href and label attributes via JavaScript using e.href=... and e.label=... or e.setAttribute(name, value)
note that the noscript attribute is used here because there's no explicit script block with a new Polymer('monkey-test', { ... }) call. If we want a more complex element, we can't get away with noscript.