I'm trying to make paper-tabs on my application.
Tab 1 and Page 1 Have to be selected when page load , unfortunately when I'm trying to make attribute selected=0 page loads with tab1 active , but I cant change to any other tab , I always see only Tab 1 with Page 1
Can somebody please tell me what to do to fix that problem ??
Best Regards
I'm writing below what I've tried.
My import extensions
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
And Code:
<paper-tabs selected="0">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<core-pages selected="0">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</core-pages>
Second Option
<paper-tabs selected="{{0}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<core-pages selected="{{0}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</core-pages>
This is method I solved problem:
Polymer('progress-page', {
ready: function () {
// make global values available on instance.
this.selected = 0;
}
});
Try selected="{{activeTabId}}" and in JavaScript set default value: activeTabId: 0
You could make a custom element that wraps the tabs with the pages then use the two-way binding {{selected}} to automatically keep tabs and pages in sync.
Here is a gist for easy-paper-tabs
Related
In my index.html I have a paper-scroll-header-panel with a paper-toolbar and a custom element serving as the page content:
<body unresolved>
<template is="dom-bind" id="app">
<paper-scroll-header-panel>
<paper-toolbar class="medium-tall">
...
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<x-content></x-content>
</div>
</paper-scroll-header-panel>
</template>
</body>
In x-content, I have a firebase-collection which I am looping over to show data:
<dom-module id="x-content">
<template>
<firebase-collection
limit-to-first="30"
location="myFirebaseURL"
data="{{items}}"></firebase-collection>
<template is="dom-repeat" items="{{items}}">
<x-item item="{{item}}"></x-item>
</template>
</template>
<script>
Polymer({
is: "x-content",
_loadMoreData: function (e) {
// load more
}
});
</script>
</dom-module>
I want to be able to load more data when the user scrolls. I have tried implementing the iron-scroll-threshold but it is not working. I expect I need to use the scrollTarget attribute to link it to an element which will fire the scroll event but I'm not sure which element I should use.
I have tried setting it to body, document and the paper-scroll-header-panel but none of these are working when I scroll - some are even firing on page load when no scrolling is happening!
Has anyone tried this?
You could try to link to paperScrollHeaderPanel.scroller
and make sure when loading the data function to clear the triggers:
scrollThreshold.clearTriggers();
see this
Question
It is not possible to use <paper-tabs> inside a custom element to [[select]] <neon-animated-pages> right now. Correct?
The comment by #FelixEdlemann:
But I still didn't find a solution for using neon-animated-pages in combination with paper-tabs.
on this Youtube video by #RobDodson seems to support my experience that using <paper-tabs> (inside a custom element) breaks <neon-animated-pages> right now.
Please provide working example.
If I'm wrong. And if it is possible to use <paper-tabs> to [[select]] <neon-animated-pages>, could somebody please post a working example?
My proof of this theory is that simply changing only the <iron-pages> element to <neon-animated-pages> causes the following code to go from "working" to "not working."
What happens is, when trying to use <neon-animated-pages>, all the pages appear on <my-view> at the same time. As it would if there were no <neon-animated-pages> element tag at all.
Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<iron-pages class="flex" selected="[[selected]]">
<!--Changing only the above line to <neon-animated-pages breaks it-->
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</iron-pages>
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Not Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<!-- The below tag is what seems to break it / stop it from working -->
<neon-animated-pages
class="flex"
selected="[[selected]]"
entry-animation="slide-from-left-animation"
exit-animation="fade-out-animation"
>
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</neon-animated-pages
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Working JsBins per #zerodevx:
At top level index.html | http://jsbin.com/vudinaziwe/edit?html,output
Inside custom element | http://jsbin.com/bejahumeru/edit?html,output
I don't see why not - unless <neon-animation>'s API has changed, your page elements need to implement Polymer.NeonAnimatableBehavior. The <neon-animatable> element is a convenience element for that. You also need to import the specific animations you are using.
In your example, your imports should should look something like:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
While your body might look something like:
<template is="dom-bind">
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
Working jsbin: http://jsbin.com/vudinaziwe/edit?html,output
UPDATE 1:
Applying this inside a custom element,
x-test.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
<dom-module id="x-test">
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
<script>
Polymer({
is: "x-test",
properties: {
selected: { type: Number, value: 0 }
}
});
</script>
</dom-module>
Jsbin: http://jsbin.com/bejahumeru/edit?html,output
My problem was with my imports.
I was using:
<link rel="import" href="bower_components/neon-animated-pages/neon-animated-pages.html">
instead of:
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
Whatever I do, I can't seem to be able to style paper-elements using custom properties inside a custom element:
<dom-module id="ts-dashboard">
<style>
:host {
display: block;
--paper-tabs-selection-bar-color : #ED1C23;
}
paper-tabs {
background-color : #962E33;
}
</style>
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>Choice 1</paper-tab>
<paper-tab>Choice 2</paper-tab>
</paper-tabs>
<!-- some more elements... -->
</template>
</dom-module>
<script>
//Module definition here
</script>
But the --paper-tabs-selection-bar-color is not taken into account, and I end up with the default yellow instead of bright red.
Notably, I use shadow-dom instead of shady-dom, but switching back to the shady implementation hasn't changed anything. I also use a theme file, as an html import, to set --default-primary-color and other custom properties of the sort. These seem to work though, inside the :root{ } css property, but even if I put --paper-tabs-selection-bar-color : #ED1C23; there it doesn't work either.
I have tried with paper-input-controller but the styles don't get applied either. Any idea what I'm doing wrong here?
I use import an external style sheet like:
<dom-module id="ts-dashboard">
<link rel="import" type="css" href="ts-dashboard.css">
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>Choice 1</paper-tab>
<paper-tab>Choice 2</paper-tab>
</paper-tabs>
<!-- some more elements... -->
</template>
</dom-module>
<script>
//Module definition here
</script>
Then this should work:
paper-tabs {
--paper-tabs-selection-bar-color: #ED1C23;
}
(Update: Just realized I pasted that wrong. Fixed to what is in my external CSS file)
Is something like this posible outside a Polymer element?
I want to be able to get data from a json and insert it as menu items, but what works fine inside a polymer element won't work here. Is there something I'm missing or this is impossible?
<html>
<head>
[...]
</head>
<body>
<core-toolbar>
<paper-menu-button id="dropDownMenu">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item>Escritorio</paper-item>
<template is="auto-binding">
<custom-item-list id="list" items={{items}} jsonurl="postsESTADO CIVIL.json"></custom-item-list>
<hr />
<template is="auto-binding" repeat="{{item in items}}">
<paper-item>
{{item.name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
</template>
<paper-item>Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
</body>
</html>
EDIT
I'm trying a new approach, as seen in the Polymer Single Page Application.
So far I'm still stuck. This is how my code looks right now:
<paper-menu-button id="dropDownMenu" style="display:none;">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item onclick="menuBackClick()">Escritorio</paper-item>
<hr />
<template repeat="{{menuit, i in menuits}}">
<paper-item>
{{menuit.Name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
<paper-item onclick="panercontrol()">Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
And this is the script I'm using, it gets the json from a file, extracts the data from it and then uses it.
<script>
$.getJSON('api/mainmenu.json', function (data) {
var template = document.querySelector('#fulltemplate');
var itemsstring = JSON.stringify(data);
template.menuits = itemsstring;
});
</script>
At the moment it doesn't do anything, inspecting it returns plain <template repeat="{{menuit, i in menuits}}"></template> with nothing in it.
The #fulltemplate Template wraps all the content inside the body.
I begin using Polymer. It is great thing. Thanks to all conributors.
I have core-menu and core-pages elements.
<polymer-element name="my-element">
<template>
<style>
</style>
<core-menu selected="0" id="core_menu">
<core-item on-tap="{{sel_brosh}}" label="Broshura"></core-item>
<core-item on-tap="{{sel_list}}" label="Listovka"></core-item>
</core-menu>
<core-pages selected="0" id="sec_pages">
<section id="sec_brosh">Page One</section>
<section id="sec_list">Page Two</section>
</core-pages>
</template>
<script>
Polymer('my-element', {
sel_brosh: function () { this.$.sec_pages.selected = "0"; },
sel_list: function () { this.$.sec_pages.selected = "1"; },
});
</script>
</polymer-element>
It work as i want, but i think it is not 'best practice'. How can i make it with one function? I try to get value this.$.core_menu.selected, but i get only old value.
May be i chose a wrong way. I want get a few "pages" with simple menu which switching pages.
Try this:
<polymer-element name="my-element">
<template>
<core-menu selected="{{selected}}">
<core-item label="Broshura"></core-item>
<core-item label="Listovka"></core-item>
</core-menu>
<core-pages selected="{{selected}}">
<section>Page One</section>
<section>Page Two</section>
</core-pages>
</template>
<script>
Polymer({
selected: 0
});
</script>
</polymer-element>
ProTip: the MVC concept of Polymer is that the my-element has a data-model that informs it's children. I mention this because it's easy to look at this and say oh, core-menu and core-pages are data-bound, but the better description is that core-menu and core-pages are data-bound to my-element. The host, my-element, is in control (hence controller [or maybe more precisely presenter in an MVP pattern]) and the children don't interact with each other directly.