78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import { IgniteElement } from './ignite-element.js';
|
|
import { IgniteTemplate, div, html, list, a, slot, input, h1 } from './ignite-template.js';
|
|
|
|
class Sheet extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
show: false,
|
|
items: ["1", "2"],
|
|
href: "www.google.com",
|
|
name: "default content",
|
|
color: "red",
|
|
linkClick: this.onClick1,
|
|
linkClick2: this.onClick2,
|
|
enter: this.onEnter,
|
|
};
|
|
}
|
|
|
|
get styles() {
|
|
return `
|
|
.sheet {
|
|
background-color: green;
|
|
color: #fff;
|
|
}
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
return this.template
|
|
.class(this.show)
|
|
.child(
|
|
new div(
|
|
new input().attribute("type", "text").onEnter(this.enter),
|
|
new h1(this.name),
|
|
new html("<h2>this is before</h2>"),
|
|
new div(
|
|
new list(this.items, (item) => {
|
|
return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
|
|
})
|
|
),
|
|
new html("<h2>this is after</h2>"),
|
|
new html("<h3>---- begin sheet's slot ----<h3>"),
|
|
new slot(this),
|
|
new html("<h3>---- end of slot ----</h3>"),
|
|
new a("I go nowhere, but you can click me ;)")
|
|
.on("click", this.linkClick).on("click", this.linkClick2)
|
|
.style("color", this.color, "important")
|
|
).class("sheet")
|
|
);
|
|
}
|
|
|
|
onClick1(event) {
|
|
console.log("Element was clicked 1!");
|
|
}
|
|
|
|
onClick2(event) {
|
|
console.log("Element was clicked 2!");
|
|
}
|
|
|
|
onEnter(event) {
|
|
console.log("Enter was pressed!");
|
|
}
|
|
}
|
|
|
|
class SheetTemplate extends IgniteTemplate {
|
|
constructor(...items) {
|
|
super(items);
|
|
|
|
this.tagName = "md-sheet";
|
|
}
|
|
}
|
|
|
|
customElements.define("md-sheet", Sheet);
|
|
|
|
export { SheetTemplate as Sheet }; |