I am very very new to Polymer, Material and Web Components
I used Polymer CLI to create a polymer 2 application
polymer init
And then I chose polymer-2-starter-kit
I tried to add some paper buttons to my view1 file, but I found out that paper-button has not added to the bower dependencies, so I added it myself. My bower.json looks like this:
{
"name": "my-app",
"authors": [
"Ehsun"
],
"license": "",
"dependencies": {
"app-layout": "PolymerElements/app-layout#2.0-preview",
"app-route": "PolymerElements/app-route#2.0-preview",
"iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
"iron-icon": "PolymerElements/iron-icon#2.0-preview",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
"iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
"iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
"iron-pages": "PolymerElements/iron-pages#2.0-preview",
"iron-selector": "PolymerElements/iron-selector#2.0-preview",
"paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
"polymer": "Polymer/polymer#^2.0.0-rc.1",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
"paper-button": "PolymerElements/paper-button#1.0.14"
},
"devDependencies": {
"web-component-tester": "6.0.0-prerelease.5"
},
"private": true
}
and I added the markup to one of my views as this:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
s<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card pink" >
<h1>Start Now</h1>
<paper-button raised class="indigo">go</paper-button>
</div>
<paper-button class="pink">link</paper-button>
<paper-button raised class="indigo">raised</paper-button>
<paper-button toggles raised class="green">toggles</paper-button>
<paper-button disabled class="disabled">disabled</paper-button>
</template>
<script>
class MyView1 extends Polymer.Element {
static get is() {
return 'my-view1';
}
}
window.customElements.define(MyView1.is, MyView1);
</script>
</dom-module>
Now the buttons are text-less as this:
I can see that you are using 1.0.14 tag of paper-button. That should not be compatible with v2.x of Polymer as polymer V2.x is on v1 spec of web-components and paper-button v1.x on v0.
The specific reason why your text is not coming up should be deprecation of content tag in favour of slot tag in v1 spec.
You should try 2.0-preview branch/tag of paper-button.
Related
I'm facing an issue I want to know how can I import an external javascript "library/ file" to my polymer project.
I want to use the htmlToPdf.js library in polymer. but I can't call the functions on the htmlToPdf.js.
If you are going to reuse the library in different components, then it is better to create an import component
<!-- htmlToPdf-import.html -->
<script src="../htmlToPdf/htmlToPdf.js" charset="utf-8"></script>
<!-- my-component.html -->
<link rel="import" href="./htmlToPdf-import.html">
<dom-module id="my-component">
<template>
</template>
<script>
class MyComponent extends Polymer.Element {
static get is() {
return 'my-component';
}
}
window.customElements.define(MyComponent.is, MyComponent);
</script>
</dom-module>
You can import it in a Polymer component using a regular <script> tag.
I have a polymer 1.x element called input-header and it looks like this
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<iron-icon icon="image:transform"></iron-icon>
<div class="title">Left</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="title">Right</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
I have included it in my index.html as follows :
<body unresolved id="app">
<input-header label="Left"></input-header>
</body>
But for some reason, the paper-icon or iron-icons don't show up as seen here
Update : See this working demo
You have to import paper-icon-button, iron-icon and image-icons.html, either globally or in this particular element. Like this
<!-- import the iron-icon & paper-icon-button custom element -->
<link rel="import"
href="path/to/iron-icons/iron-icons.html">
<!----- this is required for iron-icon image:transform to work ----->
<link rel="import"
href="path/to/iron-icons/image-icons.html">
<!---------------------------------------------->
<link rel="import"
href="path/to/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="path/to/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="path/to/paper-menu-button/paper-menu-button.html">
I assume that you have installed/downloaded the iron-icon and other elements. If you are using bower do this
bower install --save PolymerElements/iron-icon
bower install --save PolymerElements/paper-icon-button
find bower install command for other elements from Polymer Element Catalog
The iron-icons bug is an artifact of the Polymer starter kit that includes a file called my-icons.html. This file is identically named as one of the low level iron-icons files. naturally it overrides the one we really want.
Renaming my-icons.html to anythingElse-icons.html or to my-icons.html.buggy will instantly make the iron-icons available. Woohoo.
It seems also, since Polymer 2.0.1,
paper-icon-button does not include a default icon set.
So, PolymerElements/iron-icons/iron-icons.html should be included separately.
Here is the full explanation:
paper-icon-button does not include a default icon set. To use icons
from the default set, include
PolymerElements/iron-icons/iron-icons.html, and use the icon attribute
to specify which icon from the icon set to use.
For More detailed information visit:
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
I need to share styles across multiple Polymer elements. Is it acceptable to create a "styles.html" file and then import that into my different elements or would this start to have performance implications as the app grows? I know for 0.5 there was a core-styles but it kind of seems unnecessary if imports will work just as well.
styles.html
<style>
button {
background: red;
}
</style>
my-button.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">
<dom-module id="my-button">
<template>
<button>{{text}}</button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-button',
behaviors: [ButtonBehavior]
})
</script>
As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:
say your common styles are in a file called
common-style.css
In your component have a style tag that is like this
#import url( '/common-style.css' );
This inverts the control : instead of broadcasting your styles for
anyone to use, style consumers must know which styles they want and
actively request them, which helps avoid conflicts. With browser
caching, there's essentially no penalty to so many imports, in fact it
is likely faster than cascading the styles through multiple shadow
trees using piercers.
You can create a style.css and import it in your components by putting a css #import in your template.
There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.
We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.
You can use Polymer's shared styles. Create a document with your styles:
<dom-module id="shared-styles">
<template>
<style>
/* Your styles */
</style>
</template>
</dom-module>
And then import this to your elements and in their definitions add include="shared-styles" to the <style> tag.
Share styles by creating a dom-module for them, just like other custom elements. To include the shared styles in a custom element, use <style include="style-module-name">. Full example below.
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
<template>
<style>
/* CSS goes here */
</style>
</template>
</dom-module>
some-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
<template>
<style include="shared-styles">
/* Element specific styles go here */
</style>
<!-- HTML goes here -->
</template>
<script>
Polymer({
is: 'some-element',
properties: {
}
});
</script>
</dom-module>
As of Polymer 1.1, the polymer project authors recommend creating and importing a style module to address this issue.
To share style declarations between elements, you can package a set of style declarations inside a element. In this section, a holding styles is called a style module for convenience.
A style module declares a named set of style rules that can be imported into an element definition, or into a custom-style element.
See more: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules
I want to create a Meteor app that implements the Meteoric package, enabling me to use Ionic UI features. Going off of this: https://github.com/meteoric/meteor-ionic/blob/master/GUIDE.md I'm trying to simply get it to use Ionic styling but it doesn't work. It Meteoric does render the HTML correctly, though.
router.js
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', {
name: 'timeLists'
});
layout.html
<template name="layout">
{{#ionBody}}
{{> ionNavBar}}
{{#ionNavView}}
{{> yield}}
{{/ionNavView}}
{{/ionBody}}
</template>
timeLists.html
<template name="timeLists">
{{#ionContent}}
Hello.
{{/ionContent}}
</template>
What am I missing here? Thanks!
Solution: I needed to include the Ionic styles in my app's stylesheet:
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';
As shown in this official example you really need to import styles
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';
How can I import core elements and paper elements in JSFiddle.
I'm importing polymer through those statements:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>
How can import for example core-input or paper-input?
Yes from the polymer project site or I guess your cloudflare cdn if you know the location
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
This is just for dev and not production.
If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.
Also you can get a link for all core or paper elements from here
A good alternative - still a work in progress - is https://ele.io/
Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.
To test a simple component written in Polymer 1.0 I use this snippet:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
//...
}
});
</script>
<proto-element></proto-element>
http://jsfiddle.net/MartyIX/84b5sabw/