I've got a question related to styling in Polymer. I have a responsive element which has different stylings depending on the width of the screen. If the width is 720 or greater, it should have the styling that is marked with "--specific styling 2--". If it isn't, it should have the "--specific styling 2--". It should always have the "--common styling--".
<dom-module>
<template>
<style>
:host {
--common styling--
}
</style>
<iron-media-query query="min-width: 720px" query-matches="{{isWide}}"></iron-media-query>
<template is="dom-if" if="{{!isWide}}">
<style>
:host {
--specific styling 1--
}
</style>
</template>
<template is="dom-if" if="{{isWide}}">
<style>
:host {
--specific styling 2--
}
</style>
</template>
</template>
</dom-module>
If I have the code as above, it always uses the "--specific styling 2--". Is there some way to change this to the wanted behaviour?
Bart
Related
I have 2 different components in my Vuejs/Nuxtjs application: pages/Create.vue and pages/Design.vue. I have the stylesheet assets/css/styles.css.
Within the stylesheet styles.css I have a style: overflow:hidden;. This style sheet has been added only to my Design.vue component and not to my Create.vue component. However, I see that this style is impacting my Create.vue without even including it.
If I modify to overflow:auto; then everything works perfectly in Create.vue but Design.vue gets messed up.
I tried following things but still had no luck in making both components work perfectly:
Tried adding <style scoped> to both my Create.vue & Design.vue then also styles in Design.vue is getting messed up.
Tried adding overflow:hidden; to my Create.vue but that's not working either.
Tried adding scoped to both components then also its not working perfectly for me.
Following is the code I have from both components:
styles.css
html,
body {
overflow: hidden;
}
Create.vue:
<template>
<div>
<!-- My code with overflowing the page-->
</div>
</template>
<script>
export default {
}
</script>
<style>
/* OTHER STYLES */
</style>
Design.vue:
<template>
<div>
<!-- My code with overflowing the page-->
</div>
</template>
<script>
export default {
}
</script>
<style>
#import "~/assets/css/styles.css";
/* OTHER STYLES */
</style>
I am trying to figure out how I can define a dynamic class in a parent element, then set the name of the class on a property of a client element and then have the client element use the style for something.
So what options do I have?
Cheers
The example I am trying to beat into shape is here:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body unresolved>
<dom-module id='my-element'>
<style>
/* Here is where I would like to dynamically add this
.somerandomname {
#apply(--the-class);
}
where 'somerandomname' is just some name tying to together with the div below
*/
.somerandomname {
#apply(--the-class);
}
</style>
<template>
<!--
Below the class will actually be class$ allowing data binding to the somerandomname
A note here is that there will be many tags that needs mixins and I do not know in advance
what they are called, but the data provided to the custom element includes the class that should
be used for the tag
-->
<div class='somerandomname'>Show me the color</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
properties: {
myclass: {
type: String,
value: ''
}
}
});
</script>
<dom-module id='base-page'>
<style>
my-element {
--the-class: {
background-color: red;
};
}
</style>
<template>
<my-element myclass='--the-class'></my-element>
</template>
</dom-module>
<script>
Polymer({
is: 'base-page'
});
</script>
<base-page></base-page>
</body>
It seems you're a bit confused about how mixins and custom css properties, I hope this helps with that.
First of all, you don't really need any Polymer properties to make this thing work, so, the myclass property in my-element's definition isn't really needed for this.
Considering that, you naturally don't need the myclass="--the-class" bit either, everything should work fine without those two things.
Then again, bear in mind that since you defined in base-page's style that all my-element children will have that mixin applied to them it
Here's a slightly modified version of your code which should illustrate how the mixins are applied (and here's a working fiddle for it)
<dom-module id="my-element">
<template>
<style>
.customized {
#apply(--customized-div);
}
</style>
<div class="customized">
This div is customized
</div>
<div>
This div isn't customized
</div>
</template>
</dom-module>
<dom-module id="base-page">
<template>
<style>
my-element { /*This applies to all my-element children*/
--customized-div: {
color: red;
};
}
my-element.green { /*This only applies to those with the green class*/
--customized-div: {
color: green;
};
}
</style>
Child 1
<my-element></my-element>
<br>
Child 2
<my-element class="green"></my-element>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element'
});
Polymer({
is: 'base-page'
});
</script>
<base-page></base-page>
Code sample
http://jsbin.com/vudulonaka/1/edit?html,output
Click the menu button on this JSBin. Notice how the text wraps. I want to:
eliminate the text wrapping and
make the menu items expand their widths to match the width of the text inside.
This might necessitate forcing the menu to expand from right to left since the button is right justified in the toolbar.
How would I do that? Please provide working JSBin code example.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>
<span class="flex"></span>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>This is a long label for the paper menu and button to show</paper-item>
<paper-item>This is another long label for the paper menu and button</paper-item>
<paper-item>This is still yet another long label for the paper menu</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="fit">Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
This isn't exactly perfect but it should give you an idea of the kind of css properties you should change and how to do it: http://jsbin.com/xaladokimu/1/edit?html,output
What changed is the style:
<style>
paper-menu-button{
--paper-menu-button-dropdown:{
max-width: 100%;
right:70vw;
};
}
paper-item{
--paper-item:{
white-space: nowrap;
width: 100%;
};
}
</style>
Basically, you have to add the white-space: nowrap to the items so that their text is displayed in a single line and then play around with the items' width and the dropdown menu's horizontal position and width (trying to change the dropdown's position to fixed or something else could help too)
Then again, you should set this css properties outside of the element in some custom style (unless you want your element to only work on a set position)
I have core-animated-pages element in my polymer-element:
<link rel="import" href="../public/components/core-animated-pages/core-animated-pages.html">
<polymer-element name="welcom-arrow" attributes="counter">
<template>
<style>
</style>
<core-animated-pages transitions="cross-fade-all" selected="{{welcomPage}}">
<section>
<div class="blueBackground">
<h1>asd</h1>
<h3>asdasdasdn</h3>
<paper-button on-tap="{{Foward}}">
Keep Going
<core-icon icon="forward"></core-icon>
</paper-button>
</div>
</section>
<section>
<div class="blueBackground">
welcom 2
</div>
</section>
</core-animated-pages>
</template>
<script>
Polymer({
welcomPage: 0,
Foward: function() {
this.welcomPage++;
},
Backward: function() {
this.welcomPage--;
}
});
</script>
</polymer-element>
my cross-fade-all transition works perfectly but when I want to change it to a slide effect by swapping the cross-fade-all attribute to slide-from-right the effect is not working. How can I fix this?
You just need to import the transition itself.
<link rel="import" href="../public/components/core-animated-pages/transitions/slide-from-right.html">
And now you can change your transition
<core-animated-pages transitions="slide-from-right" selected="{{welcomPage}}">
The reason why the previous transition worked, is because core-animated-pages already import it.
Hope it helped !
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