39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
|
|
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
|
|
@customElement('test-demoelement')
|
|
export class TestDemoelement extends DeesElement {
|
|
public static demo = () => html`<test-demoelement></test-demoelement>`;
|
|
|
|
public render() {
|
|
return html`
|
|
<style>
|
|
.maincontainer, .themeindicator {
|
|
display: block;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.maincontainer {
|
|
color: #fff;
|
|
background: #000;
|
|
}
|
|
.themeindicator {
|
|
color: ${this.goBright ? '#000' : '#fff'};
|
|
background: ${this.goBright ? '#fff' : '#000'};
|
|
}
|
|
${domtools.breakpoints.cssForPhablet(`
|
|
.maincontainer, .themeindicator {
|
|
border-radius: 50px;
|
|
}
|
|
`)}
|
|
</style>
|
|
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
|
<div class="themeindicator">
|
|
You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
|
|
</div>
|
|
`;
|
|
}
|
|
}
|