How to make polymer grid item can be act as "a href" like in material design specification (primary action)? This is the link to material design spec: https://material.google.com/components/grid-lists.html#grid-lists-content.
Have you read the docs? You can use a div as container for a number of a links like so:
<dom-module id="grid-test">
<template>
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 100px;
}
div {
padding: 0;
list-style: none;
}
.item {
background-color: white;
border: 1px solid black;
}
</style>
<div class="app-grid">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
</div>
</template>
<script>
Polymer({
is: "grid-test"
});
</script>
</dom-module>
Related
I'm trying to achieve a simple 'media-query' behavior on my custom element using <iron-media-query> from the Polymer API.
Assume i have a container with some text on top the top, and below it is the main content..
My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles.
I just can't make it work.
Is there something i completely missed here ?
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<template is="dom-if" if="{{isMobilePhone}}">
<style>
#title {
color: #000000;
font-size: 1.8em;
}
</style>
</template>
<template>
<style>
:host {
background-color: gray;
flex-direction: column;
margin: auto;
margin-top: 40px;
display: flex;
width: 90%;
flex-grow: 1;
max-width: 1300px;
}
#title {
color: #7DB8C9;
font-size: 1.3em;
}
.content-wrapper {
height: 100%;
}
</style>
<p id="title">
[[title]]
</p>
<div class="content-wrapper">
<content select=".content"></content>
</div>
</template>
<script>
Polymer({
is: 'content-container',
properties: {
title: String,
isMobilePhone: Boolean
},
listeners: {
'tap': 'spit'
},
spit: function() {
console.log("BOOL: " + this.isMobilePhone);
}
});
</script> </dom-module>
I also tried copying the whole template ( with styles and markup ) inside the 'if' template and just modify the styles i want, but it doesn't work either.
(Everything is inside the same file, which is content-container.html)
One of the easiest ways to achieve this (which is the one used in the iron-media-query demo) is to use Polymer's annotated attribute bindings together with attribute selectors.
A simple example of an element's template would look like this
<template>
<style>
.content-wrapper ::content {
color: blue;
}
.content-wrapper[mobile-layout] ::content {
color: green;
}
</style>
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
<content></content>
</div>
</template>
Here's a fiddle showing it in action
<style> tags anywhere inside a <dom-module> (even dom-if) are applied to the element immediately (as seen in this demo), so putting <style> inside a dom-if would not give you conditional styles.
And if the only purpose of using <iron-media-query> was to add a conditional <style>, you don't need the element at all. Just use the media query normally in CSS:
<style>
...
#title {
color: #7DB8C9;
font-size: 1.3em;
}
#media (max-width:768px) {
#title {
color: #000000;
font-size: 1.8em;
}
}
</style>
codepen
UPDATE I was able to close the drawer with document.querySelector('paper-drawer-panel').forceNarrow = true;. I was going to delete this question but maybe I will leave this up to see if there is a way to do this proper with closeDrawer()
I wrote my own custom header, which doesn't use any of the paper header behaviors. It's just it's own custom element html styled header with no behavior or features.
I implemented paper-drawer-panel which worked great with my custom header. However, I can not get closeDrawer() to close the drawer. I see the function itself is function () { this.selected = 'main' }, but not sure how that applies to the inner code of paper-drawer-panel.
How can I make paper-drawer-panel's closeDrawer() to close the drawer?
index.html:
<template is="dom-bind" id="app">
<paper-drawer-panel>
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<header-custom></header-custom>
<video-selection data-route="home" tabindex="-1"></video-selection>
</div>
</paper-drawer-panel>
</template>
app/elements/drawer-custom.html:
<dom-module id="drawer-custom">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
background-color: var(--brown-color);
height: 1000px;
width: 100%;
overflow-x: hidden;
outline: none;
display: block;
padding-right: 1px;
--iron-icon-height: 42px;
--iron-icon-width: 42px;
}
.v-center {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
#close-drawer {
height: 130px;
width: 100%;
background-color: var(--pink-color);
padding-right: 1px;
}
#contact {
background-color: #a9483b;
height: 130px;
width: 100%;
padding-right: 1px;
}
</style>
<div on-click="_closeDrawer" id="close-drawer" class="v-center">
<iron-icon src='../images/menu-button-close.svg'></iron-icon>
</div>
<div id="contact">
contact
</div>
</template>
<script>
Polymer({
is: 'drawer-custom',
_closeDrawer: function() {
document.querySelector('paper-drawer-panel').closeDrawer();
}
})
</script>
</dom-module>
Solution:
when I added <paper-icon-button> as a child to paper-drawer-panel then the function closeDrawer() worked.
I created a custom element and I take html from its <content> and on created I use Polymer.dom(this.root).appendChild(paperItem) (paperItem was created via iteration on HTML I'd received from <content>) to insert that into local DOM. Well, I can't style <paper-item> from template's <style> tag no matter what I do. Even Polymer.updateStyles(); doesn't help. What am I getting wrongly?
Here explain how to apply styles to distributed children.
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
/* styling elements distributed to content (via ::content) requires */
/* selecting the parent of the <content> element for compatibility with */
/* shady DOM . This can be :host or a wrapper element. */
.content-wrapper > ::content .special {
background: orange;
}
</style>
<div id="child-element">In local DOM!</div>
<div class="content-wrapper"><content></content></div>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
<my-element>
<div class="special">Here will have a different css </div>
</my-element>
I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue:
Styles defined with :host are not applied. For testing purposes I took the example right from the documentation:
<dom-element id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-element>
When I render (latest chrome) it does have a yellow background but does NOT have a 1px red border, which it should have.
Any idea what's going on here? There are no js warnings or other clues...
You should be using dom-module instead of dom-element:
<dom-module id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
I want to add two core-icon buttons one right-top of a (custom) post-card polymer component and the other at the bottom-center. How do I do this? The current code applies to both the core-icon-buttons (below). Is there a way to qualify the styling of core-icon-button by the icon type?
<template>
<style>
....
core-icon-button {
content: '.icon clear';
position: absolute;
top: 3px;
right: 3px;
color: blue;
}
....
</style>
<core-icon-button icon="clear"></core-icon-button>
<core-icon-button icon="thumb-up"></core-icon-button>
</template>
You are free to use standard well-known HTML elements’ ids/classes for that:
<template>
<style>
.clearbtn { color: white }
#thumbupbtn { left: 100px }
</style>
<core-icon-button class="clearbtn" icon="clear"></core-icon-button>
<core-icon-button id="thumpupbtn" icon="thumb-up"></core-icon-button>
</template>
You might as well use CSS selectors for that:
<style>
core-icon-button[icon="clear"] { color: white }
core-icon-button[icon="thumb-up"] { left: 100px }
</style>
Hope it helps.