Aliaksei6
(Aliaksei Labotski)
October 25, 2018, 7:11am
1
How I can use differnet style for my own components?
For exmaple I have component MyVL extends VerticalLayout
And I want applay Paper-Card styles to it (border, shadow etc)
Something like
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<dom-module theme-for="vaadin-vertical-layout">
<template>
<style>
:host {
@apply(--paper-card);
}
</style>
</template>
</dom-module>
Jouni1
(Jouni Koivuviita)
October 26, 2018, 11:04am
2
You need to add some descriptive class="my-vl"
(or some other attribute) on the extended VerticalLayout, and then target that in the theme module with :host(.my-vl)
.
The <dom-module>
in your example is missing a unique id
attribute.
Aliaksei6
(Aliaksei Labotski)
October 29, 2018, 9:17am
3
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html">
<dom-module id="abstract-view" theme-for="vaadin-vertical-layout">
<template>
<style include="vaadin-vertical-layout">
:host(.abstract-view) {
text-align: center;
@apply --paper-card;
}
</style>
</template>
<script>
class AbstractView extends Polymer.Element {
static get is() {
return 'abstract-view';
}
}
window.customElements.define(AbstractView.is, AbstractView);
</script>
</dom-module>
Don’t work((
Jouni1
(Jouni Koivuviita)
October 29, 2018, 9:22pm
4
Here’s the simplest way to do it, as far as I know:
In Flow/Java:
class MyVL extends VerticalLayout {
public MyVL() {
this.getElement().getClassList().add('my-vl');
}
}
In HTML (in shared-styles.html
for example):
<link rel="import" href="../path/to/bower_components/paper-card/paper-card.html">
<link rel="import" href="../path/to/bower_components/shadycss/apply-shim.html">
<dom-module id="my-vl-styles" theme-for="vaadin-vertical-layout">
<template>
<style>
:host(.my-vl) {
@apply --paper-card;
}
</style>
</template>
</dom-module>