Hi I am creating my polymer element in which i am using < paper-card >. I want to change the height & width of my paper-card so that it occupies the entire space. Also i want to make few more changes but I am finding it difficult. I can do it with inline styling like this :
<template>
<div >
<paper-card heading="OTS Task" animatedShadow="true" style="width: 100%">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
If you see here i have done style="width : 100%" to make it span the entire width. Can anyone tell me how can i write the same in < style > tag. I read few docs on this but found it very difficult * New to polymer *. Thanks in advance :)
Don't think that setting the paper-card element to 100% will work.
I believe that the correct way would be to use mixing as this is the way you style Polymer elements.
The correct way in this case would be:
paper-card {
--paper-card: {
width: 100%;
};
}
The alignment of the text would be in this case handled with:
paper-card {
--paper-card-header-text: {
text-align: center;
};
}
paper-card {
--paper-card-content: {
text-align: center;
};
}
A full list of the different selectors can be found in the element description here.
The equivalent CSS for <paper-card style="width: 100%"> would be:
<style>
paper-card {
width: 100%;
}
</style>
Here's a working demo:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
paper-card {
width: 100%;
}
</style>
<template>
<div>
<paper-card heading="OTS Task" animated-shadow="true">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
You can use is="custom-style" in your style tag and then use paper-card properties as described on elements page or standard CSS properties
Related
I have using Nuxt.js and Vuetify.js in my project.
I need to adjust v-divider width, so I tried to write css in my code.
But it didn't work.
Does anyone teach me how to change v-divider width in Vuetify components?
<template>
<divider class="test"/>
</template>
<style lang="scss" scoped>
.test{ width:100px}
</style>
vuetify <v-divider> uses border properties. So instead of width you should specify borders.
const opts = {}
Vue.use(Vuetify)
new Vue ({
el: '#app',
vuetify: new Vuetify(opts),
})
.test {
border-width: 4px !important;
border-color: black !important;
height: 100%;
}
body, .container, html {
width:100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app" class="container">
<v-app>
<v-divider class="test" vertical></v-divider>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
Just a typo of <divider/> instead of <v-divider/>.
Alternatively (and not really recommended), you can set the width by specifying the width attribute of <v-divider/> since it uses <hr/> element. However, this approach seems to be deprecated and the best approach is to style it using css.
<v-divider width="100"/>
I am trying to use PrimeNg and bootstrap together. Maybe this inherently bad? Just seems that PrimeNg alone is not sufficient.
I'm trying to have a button centered in a column as shown in their documentation: https://www.primefaces.org/primeng/#/datatable/templating
For me however, it is always left aligned.
index.html
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />
foo.component.html
<p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</ng-template>
</p-column>
</p-dataTable>
foo.component.ts
#Component({
selector: 'qtyPane',
templateUrl: './app/register/foo.component.html',
styleUrls: ['./app/register/foo.component.css'],
providers: []
})
In my foo.component.css, it seems like no selector for the td with the button has any effect. Other styles work on other elements in foo.component.html so I know the css is being reached but does not work at all on the table.
foo.component.css, I tried all of these:
#deleteColumn td {
text-align: center;
}
table > tbody > td.col-button {
text-align: center;
}
.col-button {
width: 10%;
text-align: center;
}
td.col-button {
text-align: center;
}
I'm not positive what styleClass="col-button" does, so I might be wrong, but looking at the documentation I don't think it puts that class on the td.
Here's what I would try first:
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<div class="my-center-text">
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</div>
</ng-template>
</p-column>
The CSS:
.my-center-text {
text-align: center;
width: 100%;
}
If that doesn't work you might need to do some kind of deep selecting. I know Angular is in a state of flux but something like this might work for now:
#deleteColumn /deep/ td {
text-align: center;
}
Because Angular prevents styles in one component from affected another, you can't directly get access to the td inside of the p-component by default. By adding the /deep/ to the selector path it will apply the styles to nested components as well
If you target the hosting element context, it should also work. Let's say your datatable is hosted by tag 'app-datatabledemo' and you attached the class name 'demo' to it.
<app-datatabledemo class="demo"></app-datatabledemo>
If you write following css style to 'foo.component.css' file, it should align text to center.
:host-context(.demo) >>> .ui-datatable-data{
text-align: center;
}
I am trying to style my child components. Isit wrong to put the style in a parent component? It appears that does not work.
I put the style for .card-page in the top level element (containing expenses-module where I use it)
<dom-module id="expenses-app">
<template>
<style>
...
.card-page {
display: block;
width: 100%;
}
</style>
<app-drawer-layout>
<app-header-layout>
...
<iron-pages selected="{{routeData.view}}" attr-for-selected="name">
<dashboard-module name="dashboard" route="{{subroute}}"></dashboard-module>
<expenses-module name="expenses" route="{{subroute}}"></expenses-module>
<settings-module name="settings" route="{{subroute}}"></settings-module>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
In expenses module,
<paper-card heading="Expenses" class="card-page">...
</paper-card>
Seems like if I move the styles into expenses-module it works.
You cannot directly style elements inside custom element from their parents like that, because Polymer processes the style within <dom-module> and will apply styles only to direct child members. It will not descend into child custom elements.
In other words, standard CSS selectors will only work within the scope of the declaring component. Both in Shadow and Shady DOM.
For your styles to work with nested elements, you should use CSS mixins and properties. All PolymerElements and many 3rd party elements will come with such styling extension points. The naming usually follow the convention, where the main mixin is called same as the element itself. Additionally, there may be more specific mixins and properties, which style only parts of the element. <paper-card> docs for example lists --paper-card mixin, --paper-card-content mixin, --paper-card-header-color and more.
If you want to better control the styling of elements you use, you would want to create your own CSS mixins/properties and #apply() them to selected elements. See how in the example below --my-elem-card-page applies only to one of the two paper cards.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-card/paper-card.html" rel="import"/>
</head>
<body>
<my-wrapper></my-wrapper>
<dom-module id="my-elem">
<template>
<style>
.card-page {
#apply(--my-elem-card-page);
}
</style>
<paper-card heading="my-elem specific style" class="card-page">
<div class="card-content">
Content here
</div>
</paper-card>
<paper-card heading="Default style" class="unstyled-page">
<div class="card-content">
Content here
</div>
</paper-card>
</template>
</dom-module>
<dom-module id="my-wrapper">
<template>
<style>
# will be ignored
paper-card {
width: 200px;
}
my-elem{
--paper-card: {
color: blue;
display: block;
}
}
my-elem {
--my-elem-card-page: {
color: red;
}
}
</style>
<my-elem></my-elem>
</template>
</dom-module>
<script>
Polymer({
is: 'my-elem'
});
Polymer({
is: 'my-wrapper'
});
</script>
</body>
</html>
I am trying to mix the template repeater and the paper-card tutorial in the Polymer Starter Kit.
My aim is to copy that kind of grid :
(source: instantshift.com)
I created two custom elements :
A list of employees
An employee
Employee List:
<style is="custom-style">
#board {
#apply(--layout-vertical); <<= HERE ARE DEFINED THE LAYOUT OF THE GRID
#apply(--layout-wrap);
height: 344px;
width: 384px;
}
#board > paper-card {
box-sizing: border-box;
max-width: 184px;
margin: 4px;
flex: 0 0 auto;
}
</style>
<template>
<div id="board">
<template is="dom-repeat" items="{{employeesArray}}">
<employee-element name="{{item.title}}"
preview="{{item.preview}}"
width={{item.width}} height={{item.height}}>
</employee-element>
</template>
</div>
</template>
Employee :
<paper-card
heading="{{name}}"
image="{{preview}}"
style="max-width:{{width}}px;
max-height:{{height}}px;"
>
<div class="card-actions">
<paper-icon-button class="favorite" icon="favorite"></paper-icon-button>
<paper-icon-button class="bookmark" icon="bookmark"></paper-icon-button>
<paper-icon-button class="share" icon="social:share"></paper-icon-button>
</div>
</paper-card>
Here is what I get :
How can I approach the result expected ? Is there a setting making the card arranging themselves automatically ?
How can I get a "carriage return"-like behaviour ?
Answer results (thanks to #Snekw) :
Steps :
Add the following line where you import your elements (elements/elements.html in my case)
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
My Employee list element now looks like :
<style is="custom-style" include="iron-flex">
.flex-wrap {
#apply(--layout-horizontal);
#apply(--layout-wrap);
}
</style>
<template>
<div class="container flex-wrap">
<template is="dom-repeat" items="{{employeesArray}}">
<employee-element name="{{item.title}}"
preview="{{item.preview}}"
width={{item.width}} height={{item.height}}>
</employee-element>
</template>
</div>
</template>
And I get this result :
I still have to fix the problem with the paper-card action panel.
You need to include the iron-flex class on your style tag.
<style is="custom-style" include="iron-flex">
//your styling
</style>
You will need to load the iron-flex-layout-classes.html element. Iron-flex-layout element contains the --layout-vertical and --layout-wrap properties.
More on iron-flex-layout here: iron-flex-layout-classes GitHub
I have a custom Polymer element, which contians a paper-dialog and a paper-item.
I cannot style the paper-item when the dialog's layered property is set to true.
<polymer-element name="myElement">
<template>
<style>
paper-item.myClass {
background: #B7AAFA;
}
html /deep/ paper-item.myClass {
background: #B7AAFA;
}
</style>
<paper-dialog id="myDialog" layered="true">
<paper-item class="myClass">
Some Words
</paper-item>
</paper-dialog>
</template>
<script>
Polymer(
...
);
</script>
</polymer-element>
I have tried just referencing it by ID, using /deep/, and variations of ::shadow, with the style block in and outside of the template.
Can you see anything wrong with my set up?
Thanks
Ok, i see the issue. paper-dialog moves the entire element into a core-overlay. So just move the class definitions into the paper-dialog, e.g.
<paper-dialog id="myDialog" layered="true">
<style>
.myClass {
background:red;
}
</style>
<paper-item class="myClass">
Some Words
</paper-item>
</paper-dialog>
That guarantees that your custom styles will be moved as well.
Here is a codepen example on how to solve this. example
document.querySelector('a').addEventListener('click', function(e){
e.preventDefault();
var deepTest = document.querySelector('deep-selector-test')
, dialogSetting = deepTest.getAttribute('layer') === 'false' ? 'true' : 'false';
deepTest.setAttribute('layer', dialogSetting );
});
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150311"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link type="import" href="https://www.polymer-project.org/0.5/components/paper-item/paper-item.html">
<link type="import" href="https://www.polymer-project.org/0.5/components/paper-dialog/paper-dialog.html">
<polymer-element name="deep-selector-test"
attributes="layer">
<template>
<style>
.myClass {
background: #B7AAFA;
}
paper-dialog[layered=true] .myClass {
background: red;
}
</style>
<paper-dialog id="myDialog" layered="true">
<paper-item class="myClass">Some Words</paper-item>
</paper-dialog>
</template>
<script>
Polymer('deep-selector-test', {
layer: false,
layerChanged: function(oldVal, newVal){
this.shadowRoot.querySelector('paper-dialog').setAttribute('layered', newVal);
}
});
</script>
</polymer-element>
<h4>
Change layered property
</h4>
<deep-selector-test layer="false"></deep-selector-test>