94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
|
|
|
@customElement('deap-mainselector')
|
|
export class DeapMainselector extends DeesElement {
|
|
public static demo = () => html`<deap-mainselector></deap-mainselector>`;
|
|
|
|
// INSTANCE
|
|
@property()
|
|
public selectionOptions: {key: string; action: () => void}[] = [
|
|
{key: 'option 1', action: () => {alert('hello')}},
|
|
{key: 'option 2', action: () => {}},
|
|
{key: 'option 3', action: () => {}},
|
|
{key: 'option 4', action: () => {}}
|
|
];
|
|
|
|
public render (): TemplateResult {
|
|
return html`
|
|
<style>
|
|
:host {
|
|
color: #fff;
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
height: 100%;
|
|
background: #3c3c3c;
|
|
}
|
|
.maincontainer {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.topbar {
|
|
position: absolute;
|
|
height: 80px;
|
|
width: 100%;
|
|
|
|
background: #333333;
|
|
}
|
|
|
|
.topbar .heading {
|
|
padding-left: 20px;
|
|
line-height: 80px;
|
|
font-family: Roboto Mono;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.selectionOptions {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 0px;
|
|
width: 100%;
|
|
font-family: Roboto Mono;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.selectionOptions .selectionOption {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-top: 1px solid #707070;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selectionOptions .selectionOption:first-child {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.selectionOptions .selectionOption:last-child {
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid #707070;
|
|
}
|
|
</style>
|
|
<div class="maincontainer">
|
|
<div class="topbar">
|
|
<div class="heading">Properties</div>
|
|
</div>
|
|
<div class="selectionOptions">
|
|
${this.selectionOptions.map(selectionOptionArg => {
|
|
return html`
|
|
<div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
|
|
${selectionOptionArg.key}
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
} |