I have created one simple polymer custom element for menu.
I know, already polymer is having element for creating menu, but I am creating one component which will show menu on your website.
Now, here is my menu.html (custom element)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<polymer-element name="my-menu">
<template>
<style>
core-header-panel {
background: white;
}
core-toolbar {
background-color: #03A9F4;
}
#navheader {
background-color: #56BA89;
}
.content {
padding: 20px;
}
/* drawer is always visible on a wide screen
so menu button isn't required */
core-drawer-panel:not([narrow]) #navicon {
display: none;
}
</style>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" on-click="{{togglemenu}}"></paper-icon-button>
<span flex>Title</span>
</core-toolbar>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('my-menu', {
ready: function () {
// alert("hello");
},
togglemenu: function () {
var drawerPanel = document.getElementById('drawerPanel');
// drawerPanel.togglePanel();
console.log(drawerPanel);
}
});
</script>
</polymer-element>
Now,
As you can seen till now, that when togglemenu function is called, i want to togglepanel, but i am not able to do that.
anyway to achieve this ?
when you are working inside a custom element you can use the polymer selector to select the element in the shadow dom. that would make your togglemenu function look more like
togglemenu: function () {
var drawerPanel = this.$.drawerPanel;
drawerPanel.togglePanel();
}
in this function this.$.drawerPanel is selecting the same way as document.getElementById('drawerPanel') except getElementById is looking on the document level and not this elements shadow dom.
Related
I am trying to create some paper input in Polymer. When I click the "calculate" icon next to the item, it doesn't show the value or the result of paper input. It looks like it's getting the wrong in calling the value (?), and I'm not sure how to fix it? Thanks!
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<dom-module id="my-view2">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.form paper-icon-button{
left: 45%;
height: 120px;
width: 120px;
}
.form paper-input{
margin-left: 150px;
margin-right: 150px;
}
</style>
<div class="card">
<div class="form">
<paper-input type="number" name="satu" label="BLABLABLA1" value="{{todo.satu}}"></paper-input>
<paper-input type="number" name="dua"label="BLABLABLA2" value="{{todo.dua}}"></paper-input>
<paper-input type="number" name="tiga"label="BLABLABLA3" value="{{todo.tiga}}"></paper-input>
<paper-icon-button src="calculator.ico" on-tap="_addTodo"></paper-icon-button>
</div>
<vaadin-grid item="{todos}">
<table>
<colgroup>
<col name="satu">
<col name="dua">
<col name="tiga">
</colgroup>
</table>
</vaadin-grid>
</div>
</template>
<script>
Polymer({
is: 'my-view2',
properties: {
todo: {
type: Object,
value: function() {
return {};
}
},
todos: {
type: Array,
value: function() {
return [];
}
}
},
_addTodo: function() {
this.push('todos', this.todo);
this.todo = {};
}
});
</script>
</dom-module>
your binding to item property of vaadin grid is invalid. You are missing one more brackets {}, plus property should be called items not item (according to documentation).
I'am newbie in Polymer and Paper-Elements. I just make new blank polymer application, and try to run some example from paper-elements.
I created my blank polymer app using this.
Then I added paper-elements using bower - bower install --save PolymerElements/paper-elements
Then I copy paste this code:
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
So my whole element.html looks like this:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html" >
<link rel="import" href="/bower_components/paper-input/paper-input.html" >
<link rel="import" href="/bower_components/iron-icons/iron-icons.html" >
<dom-module id="allegro-combo-box">
<template>
<style>
:host {
display: block;
}
paper-input {
max-width: 400px;
margin: auto;
}
iron-icon, div[suffix] {
color: hsl(0, 0%, 50%);
margin-right: 12px;
}
</style>
<h2>Hello [[prop1]]!</h2>
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
</template>
<script>
/** #polymerElement */
class Mextends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-element'
}
};
}
}
window.customElements.define(MyElement.is, MyElement );
</script>
</dom-module>
Unfortunately this code won't work. Only <h2>Hello [[prop1]]!</h2> is working, the elements from paper doesn't.
How to fix it?
I tried to add "async" in imports but this doesn't helped.
Please help.
This are some errors in console:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
Uncaught TypeError: Cannot read property 'nativeMethods' of undefined
It looks like your import statements for the paper elements don't have the correct path. Try changing the path as follows:
<link rel="import" href="../../bower_components/paper-button/paper-button.html" >
<link rel="import" href="../../bower_components/paper-input/paper-input.html" >
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html" >
I'm working on a Polymer application that uses iron-form to submit a form to a back-end web-service. One of the elements in the form is a box where the user can select multiple elements.
Using the paper-dropdown-menu with a paper-listbox with multi set works, but the UX is horrible because the user can't see which elements are selected without opening the dropdown (and blocking other elements). Also - it requires more clicks to operate.
Ideally we'd just use the paper-listbox without the paper-dropdown-menu, as that is exactly the UI that we need - similar to HTML's classic <select multiple> but with a Material Design sheen. But without the paper-dropdown-menu wrapper, iron-form doesn't pick up on the paper-listbox selected values and will not submit those.
I've noticed that iron-form support classic HTML <select> (and even support the multiple behavior), but the UI for that is jarring in contrast with the rest of the form.
Is there something else that we can wrap around the paper-listbox to get the form to behave without modifying the original paper-listbox UI, or get paper-dropdown-menu to have an "always open" mode? If neither of those work (and I couldn't get either to work, BTW), what else can we do?
You could wrap the <paper-listbox> in a custom element that implements <iron-form-element-behavior>. The behavior exposes a value property, which could be bound to <paper-listbox>.selectedValues, allowing <iron-form> to submit the multiple listbox values:
<dom-module id="multi-listbox">
<template>
<paper-listbox multi selected-values="{{value}}">
<content></content>
</paper-listbox>
</template>
<script>
Polymer({
is: 'multi-listbox',
behaviors: [Polymer.IronFormElementBehavior]
});
</script>
</dom-module>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
this._response = JSON.stringify(e.detail.response, null, 2);
},
_submit: function() {
this._response = null;
this.$.form.submit();
}
});
Polymer({
is: 'multi-listbox',
behaviors: [
Polymer.IronFormElementBehavior
],
properties: {
value: {
type: Array,
value: () => [],
notify: true
},
invalid: {
type: Boolean,
reflectToAttribute: true
}
},
validate: function() {
const isValid = !this.required || !!(this.value && this.value.length > 0);
this.invalid = !isValid;
console.log('invalid', this.invalid);
return isValid;
},
_clearError: function() {
this.invalid = false;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="iron-validatable-behavior/iron-validatable-behavior.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
multi-listbox,
paper-checkbox,
paper-button {
margin: 0.5em;
}
</style>
<paper-checkbox active="{{_required}}">Required</paper-checkbox>
<form is="iron-form"
id="form"
action="//httpbin.org/get"
on-iron-form-response="_onResponse">
<multi-listbox name="listbox-values" required="[[_required]]">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
</multi-listbox>
<paper-button raised
on-tap="_submit">Submit</paper-button>
</form>
<pre>[[_response]]</pre>
</template>
</dom-module>
<dom-module id="multi-listbox">
<template>
<style>
:host {
display: block;
}
paper-listbox {
border: solid 2px lightgray;
}
:host([invalid]) paper-listbox {
border: solid 2px var(--error-color, red);
}
</style>
<paper-listbox multi
selected-values="{{value}}"
on-iron-activate="_clearError">
<content></content>
</paper-listbox>
</template>
</dom-module>
</body>
codepen
trying to style the paper-button inside the template, I've tried different sectors and only one is worked so how can i do the styling correctly.
so in the index.html i call iron-ajax element and one the last-response i call a dom-repeat template
<iron-ajax id="aj" auto
url="url"
handle-as="json"
last-response="{{ajaxResponse}}"
contentType="text/HTML"
debounce-duration="300"></iron-ajax>
<div class="video">
<template is="dom-repeat" items="[[ajaxResponse]]" >
<paper-card image="[[item.fields.image]]">
<feed-bdy items="[[item]]"></feed-bdy>
and in the feed-bdy.html :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module is="feed-bdy">
<style >
:host{
--paper-button-ink-color: var(--paper-pink-a200);
paper-button.custom:hover{ background-color: var(--paper-indigo-100) !import; }
}
:host paper-button.rea:hover{
--paper-button-ink-color: var(--paper-pink-a200);
color: red
}
--paper-button.custom:hover {
background-color: var(--paper-indigo-100) !import;
color: white !important;
}
paper-button:hover{
background-color:red !important;
}
</style>
<template id="repeater" is="dom-repeat" items="{{items}}">
<div class="card-content">
<div class="ar-header">
<h3> [[items.fields.title]]</h3>
</div>
<div class="content-bdy"></div>
</div>
[[_renderHTML(items)]]
<div class="card-actions">
<paper-button class="custom">إقراء المزيد !</paper-button>
<paper-button>
شارك
<iron-icon icon="reply"></iron-icon>
</paper-button>
</div>
</template>
<script>
Polymer({
is: 'feed-bdy',
properties: {
artId:{
type : String,
observer: '_renderHTML'
}
},
listeners :{
},
_renderHTML: function(items) {
// firstp to get only the first pargarph to put in the home page
var ss= items.fields.body;
//console.log(this.$$(".card-content"));
var firstp = ss.substring(0,ss.search("</p>")+4);
this.$$(".content-bdy").innerHTML += firstp;
},
_toggle : function(e){
var id = Polymer.dom(e).localTarget.title;
//console.log(id);
var moreInfo = document.getElementById(id);
// console.log(moreInfo);
var iconButton = Polymer.dom(e).localTarget;
iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
: 'hardware:keyboard-arrow-down';
moreInfo.toggle();
}
});
</script>
</dom-module>
There are a few issues with your CSS:
import! should be important!
Mixins and custom properties need to be defined within a selector:
INCORRECT
<style>
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
</style>
CORRECT
<style>
:host {
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
}
</style>
Mixins and custom properties are not selectors:
INCORRECT
<style>
--paper-button.special-css-class {
/** Some styles */
}
</style>
Instead, you can use the .special-css-class as your selector, and define your mixin/custom property for any element that matches:
CORRECT
<template>
<style>
.special-css-class {
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
}
</style>
<paper-button class="special-css-class"></paper-button>
<!-- This button won't have your custom styles! -->
<paper-button></paper-button>
</template>
At least for paper-button, you need not use custom properties/mixins if you just want to specify the color and background color:
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-button {
background-color: purple;
color: red;
}
</style>
<template is="dom-repeat" items="{{items}}">
<paper-button>Click Me</paper-button>
</template>
</template>
<script>
Polymer({
is: 'x-foo',
properties: {
items: {
value: [1, 2, 3, 4]
}
}
});
</script>
</dom-module>
Following the release of Polymer 1.0, I have tried to update an application I was working on. Despite the quite complete doc provided: https://www.polymer-project.org/1.0/docs/migration.html, I am still encountering some issues, in particular the following one.
I am using paper-menu element along side with the paper-menu-button one.
The goal is to have a standard menu with on each paper-item a paper-menu-button allowing me to customize the corresponding section.
As code is always clearer here an example of what I am trying to achieve (I simplified it by using basic demo from polymer site)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>paper-menu demo</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./bower_components/paper-item/paper-item.html">
<link rel="import" href="./bower_components/paper-menu/paper-menu.html">
<link rel="import" href="./bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="./bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./bower_components/paper-styles/demo-pages.html">
<style is="custom-style">
paper-item {
--paper-item: {
cursor: pointer;
}
;
}
paper-icon-button{
height: 20px;
width: 20px;
background-color: black;
}
.sublist {
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body unresolved>
<template id="Demo" is="dom-bind">
<h4>Sub-menu</h4>
<div class="horizontal-section">
<paper-menu>
<paper-submenu>
<paper-item class="menu-trigger">
Topics
<span class="flex layout horizontal end-justified">
<paper-menu-button on-tap="test">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="[[letters]]" as="letter">
<paper-item>[[letter]]</paper-item>
</template>
</paper-menu>
</paper-menu-button>
</span>
</paper-item>
<paper-menu class="menu-content sublist">
<paper-item>Topic 1</paper-item>
<paper-item>Topic 2</paper-item>
<paper-item>Topic 3</paper-item>
</paper-menu>
</paper-submenu><paper-item class="menu-trigger">
Faves
<span class="flex layout horizontal end-justified">
<paper-menu-button on-tap="test">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="[[letters]]" as="letter">
<paper-item>[[letter]]</paper-item>
</template>
</paper-menu>
</paper-menu-button>
</span>
</paper-item>
</paper-menu>
</div>
</template>
</body>
<script>
Demo.letters = [
'alpha',
'beta',
'gamma',
'delta',
'epsilon'
];
Demo.test = function(event){
event.stopPropagation();
}
</script>
</html>
Here goes the problem: paper-menu-button does not react anymore as soon as the corresponding paper-item is focused (appears in gray).
I do not understand why the fact to be focused affect the inner paper-menu-button.
I have tried to stop the event bubbling but it does not change anything.
I am not even sure where the problem comes from, paper-menu behavior? Javascript event handling?
If anyone as a clue about what is the problem I could be great! Hoping to have been clear enough.
Finally found the answer: on focus a pseudo element after is displayed on the top of the item.
Once disabled through the --paper-menu-focused-item-after mixin, I can interact normally with my paper-menu-button