I created a new polymer app using AppToolbox (polymer cli) and now I'm trying to add a theme that I download from Polymer Theme. I follow the instructions:
Add the following line inside your tag
AFTER the webcomponents-lite.min.js and other HTML imports.
<link rel="import" href="path/to/theme.html">
To use the theme within your custom element, add the following line
inside your tag:
<link rel="import" href="path/to/theme.css" type="css">
Of course I removed some css styles in the example components but I don't see the template applied to the project.
Could anyone give me some advice about this?
Instructions:
TL;DR The only method that seems to allow those themes to work properly with Polymer 1.5.0 is to link the provided stylesheet in index.html with:
<link rel="stylesheet" href="path/to/theme.css">
plunker
The instructions from https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of style modules.
However, even style modules don't allow full theming in my experiments.
Trials:
Importing the provided theme in the <dom-module> (deprecated):
<dom-module id="x-button">
<link rel="import" type="css" href="theme.css"> <!-- partial styling -->
...
</dom-module>
Result: Styles are restricted to the custom element, but no font styling. plunker
Converting the provided theme into a style module, and including it in the <dom-module>:
<link rel="import" href="theme.html">
<dom-module id="x-button">
<style is="custom-style" include="theme"></style> <!-- partial styling -->
...
</dom-module>
Result: (same effect as Trial 1) plunker
Linking the provided stylesheet in <dom-module>:
<dom-module id="x-button">
<link rel="stylesheet" href="theme.css"> <!-- full styling, leaks -->
...
</dom-module>
Result: x-button fully styled as intended, but styles leak into main page, modifying the background color and a paper-button of the main page. plunker
Linking the provided stylesheet only in index.html:
<head>
<link rel="stylesheet" href="theme.css"> <!-- full styling -->
...
</head>
<body>
<x-button></x-button>
</body>
Result: x-button fully styled as intended. plunker
Related
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
I'm using Polymer in one of my web projects. In the index.html page, I included the script and include tags in the following way:
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<script src="scripts/jquery.min.js"></script>
<link href="styles/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/mycss.css">
In the body tag, I'm using a paper-button the following way:
<paper-button class="blue-ripple" role="button" tabindex="0">Hello</paper-button>
It is rendering perfectly on Chrome (40.0.2214.111 m) but the ripple style is not working on Firefox (35.0.1). I've checked the console and there seem to be no conflicts or warnings or errors.
You need to load the polyfills:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
See https://www.polymer-project.org/docs/start/platform.html
In the third link tag your href point to styles/css.
This could be the problem.
I am trying to figure out if it is possible to inline external javascripts in my Polymer elements. I know if I have a link to a stylesheet then it gets merged (from http://www.polymer-project.org/docs/polymer/styling.html):
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
Polymer will automatically inline the my-element.css stylesheet using a :
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
I am looking for a way to do the same with external javascript files:
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js">
</polymer>
and get something like this:
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>.../* code from my-element.js */...</script>
</polymer>
I looked at vulcanize (https://github.com/Polymer/vulcanize) but it does not seem to be able to do it.
EDIT:
let me rephrase what I want to achieve:
I know that when vulcan processes a HTML page that contains elements, it merges the templates of these elements into the resulting output, and (given the --csp option) it also creates a javascript file where it puts all embedded scripts of the elements. I want to be able to merge into the resulting .js file not only embedded scripts but also scripts that are linked to from my elements.
It should work as you wrote it, except that <script> requires a closing tag. I.e.
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js"></script>
</polymer>
Fwiw, the script in either case is loaded and executed normally by the browser. In that sense, it's different from the stylesheet link which is a feature being simulated by Polymer.
For the same reason, you can load/run that script anywhere. The tag doesn't have to be inside the <polymer-element>.
Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src
How to use this ( https://github.com/silviomoreto/bootstrap-select ) twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc.)
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
});
</script>
From your comment you are including:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
On your site. This means you're including the whole of twitter bootstrap which adds some styles to normal html elements.
Instead of this, why not download just the files you linked to on github and use those instead, i.e. (if you host them yourself):
<link href="path/to/bootstrap-select.min.css" rel="stylesheet">
<script src="path/to/js/bootstrap-select.min.js">
If you needed other features from bootstrap you could also create a custom build using this resource.
In that case, you have two solutions.
Take the .less sources from github and rebuild bootstrap with only the things you need. In other words you'll have to remove most .less files from the build process and take only the things you need.
Since you only have one element, add the selector to a page with bootstrap and extract all the css related to this element. Put this css in a different file and link it in your html. Once you copied all the required css declarations everything should look as expected.
You can then rename classes if needed.
To copy css declaration used in the browser you can use dev toolbars from firefox/chrome and so on. There might be good plugins that makes the job easier.