I'm begin play with Polymer and I am building an element with this structure:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="e-card" attributes="background" contructor="eCard" noscript>
<template>
<style>
h1
{
color: #123;
font-size: 3em;
text-align: center;
}
p
{
color: #333;
}
</style>
</template>
</polymer-element>
In my index.html file I call the element like this:
...
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/e-card.html">
</head>
<body>
<e-card>
<h1>This is my card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</e-card>
</body>
...
But when I open the file in the browser nothing is show. What did I do wrong?
Add the content tag to your element, then add some styling for the desired element/tag.
**Example**
<template>
<style>
<!-- add styling to the p tag. -->
polyfill-next-selector { content: ':host > p' }::content > p {
color: black;
}
<!-- add styling to all content. -->
polyfill-next-selector { content: ':host > *' }::content > * {
color: green;
}
</style>
<content></content>
</template>
Hope this helped !
Use the <content> </content> tags inside the template. This should render your contents inside the polymer element.
Please refer to the documentation to learn more about how the content tags work.
You can use tag to bring your 's content into your tag
Source: https://www.polymer-project.org/docs/start/tutorial/step-2.html
The way you have it set up right now, there is nothing for e-card to display. To make the template display something, simply write usual html inside it's root <template> tag.
The reason your template doesn't display h and p is that it doesn't know how to display them. For that, use the <content> tag.
index.html
<e-card>
<h1>This is my card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</e-card>
e-card.html
...
</style>
<template>
<content select="h1"></content
<content select="p"></content>
</template>
It's somewhat similar to how one would give a function some parameters. Here, the "function" is e-card and the "parameters" would be h1 and p.
Related
HTML & CSS newbie can't work out why div container isn't being applied - I put the color as red to test it on the font - but it's not updating. I've named the container class as home.hero
I want to use a container for it, as I want to make text changes max width etc only affecting the text and not the background.
I am very bad at explaining this atm!
Thanks in advance (sorry for being a newb/noob/n00b)
P
section#home {
background: url('images/test.png') no-repeat center center/cover;;
color: white;
justify-content: left !important;
padding: 8%;
max-width: 60%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.home-hero {
color: #E83C3C;
}
<section id="home">
<div class="home-hero">
<h2 class="text-dark">Hello we are,</h2>
<img src="images/test.png" alt="">
<h2>Test <h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, augue vitae interdum rutrum, quam.</p>
</div>
</section>
Your code does work for me, therefore I would suggest to you that makes sure that your css-link is correct.
You can in a lot of developer tools ctrl+click the css-link in the HTML file, and then you should be directed to the css-file. If you're directed to an undefined file or gets asked to create said css file, you know for sure that the file path in your html-document is wrong.
Note: css-link are in the head of the html-document and looks like this:
<link rel="stylesheet" href="aFolderHere/yourpage.css" type="text/css" />
or if your css is in the same directory/folder as your html is would look more like this:
<link rel="stylesheet" href="yourCSS.css" type="text/css" />
You have double semi-colons behind the first line in your css - this probably makes the browser stop reading past this point as it produces an error, so none of the remaining css is read:
section#home {
background: url('images/test.png') no-repeat center center/cover;;
change to
section#home {
background: url('images/test.png') no-repeat center center/cover;
I am newbie for polymer. I just tried to add but getting blank screen. Did I missed any script or something?
Head
<script src="bower_components/polymer/polymer.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
body
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main></section>
</core-drawer-panel>
<script>
Polymer({
});
</script>
Actually, this is exactly how it should be.
Look in your inspector and you will see that there is a core-drawer-panel element with two section's. The core-drawer-panel doesn't have any visual and is just a container that holds your sub components.
Basically you need to put something in the sections to see something in the browser :)
Add the following to your code:
<style>
core-drawer-panel /deep/ section {
border:1px solid red;
}
</style>
This will visually highlight the sections.
I'm using Polymer for a new version on my website. I'm currently experimenting with the hero-transition of the core-animated-pages. Some examples are provided in the core-animated-pages examples and especially this one.
With these examples I've got to understand the examples and I've gotten to this example: jsbin. It's not entirely polished, but it works.
Now, I want to have the card show in this example to be a custom element. Of this custom element I would need the to have two hero-id's, one for the image and one for an album title. I tried simulating it in this example. Here's the code:
album-card custom element
<polymer-element name="album-card">
<template>
<style>
:host{
display: block;
position: relative;
background-color: grey;
width: 200px;
}
.description{
padding: 0px 10px;
color: white;
}
.cube{
width: 200px;
height: 200px;
}
</style>
<div vertical layout>
<div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer("album-card", {});
</script>
</polymer-element>
The main element with where the transition appears
<polymer-element name="my-app">
<template>
<style>
</style>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<section>
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
</section>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
albumTapped: function(){
this.photopage++;
}
});
</script>
</polymer-element>
Now I know this is due to the shadow dom in which the hero-id and hero attributes of the fields are set, thus not being accessible by other elements on the page, but is there a way around this in this particular case?
It's actually not about the shadow dom. the animated goes for hero "1 shadow-dom of depth" and cross-fade any shadow-dom deep. The thing is that your custom album-card was getting all "bindy" before ready callback and trampling stuff. Also, the way you choose the selected album is kinda messed up (at least that's what i figure) so with your code (and i gotta leave office now I'm home having fun editing my answer and striking stuff) i made it work in reverse back and forth as such: your fixed code (updated 2)
I'm sorry i wouldn't fiddle more with it because I really gotta leave. Maybe later i'll comeback and explain it better but at least the "TLDR" answer is here: you shouldn't bind stuff before the ready callback (actually you can but it is specific and should be declared explicitly on the element prototype). i'll probably get back here later(here i am). hope it helps.
ADDENDUM: oh and i didn't noticed at the time (i was in a hurry) you were nesting your element in a section, with custom elements, that's not needed (nor expected by the component in this case).
the full code just for copy/paste easiness:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src='http://www.polymer-project.org/webcomponents.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/core-animated-pages/core-animated-pages.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head>
<body>
<!-- your album card element -->
<polymer-element name="album-card" noscript>
<template>
<style>
#thumbAlbum{
display: block;
background-color: grey;
width: 200px;
}
#albumDesc{
padding: 0px 10px;
color: white;
}
#albumCover{
width: 200px;
height: 200px;
}
</style>
<div id="thumbAlbum" vertical layout>
<div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div id="albumDesc" class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
</polymer-element>
<!-- your app alement -->
<polymer-element name="my-app">
<template>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
ready:function(){
},
albumTapped: function(){
this.photopage = this.photopage > 0 ? 0 : 1;
},
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>
Oh, and on an important sidenote: always use the webcomponents.js as platform.js is deprecated and not really friendly to find out problems. plus import the polymer.html.
Actually it seems to work if you just remove album-card element from section element: http://jsbin.com/botoxaneju/1/edit?html,output
I am not really sure why is that, because I am experiencing the same problem.
like this
<polymer-element name="ele-polyrow" extends="div">
</polymer-element>
is it possible to add style of ele-polyrow element.
Sure. Use the :host pseudo-class from inside the element's template. There are a couple of things to note, though:
If you extend a built-in element like div, to use the element you need to use
<div is="ele-polyrow"> rather than just <ele-polyrow>.
If the element doesn't include a constructor, you need to add the noscript
attribute, and Polymer will automatically register it for you.
Put these things together and you get:
<polymer-element name="ele-polyrow" extends="div" noscript>
<template>
<!-- shadow DOM for the element -->
<style>
:host {
outline: 2px solid red;
}
</style>
<!-- display any children -->
<content></content>
</template>
</polymer-element>
<div is="ele-polyrow">Hey there polyrow!</div>
Styling guide: http://www.polymer-project.org/articles/styling-elements.html
Styling reference: http://www.polymer-project.org/docs/polymer/styling.html
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.