Working on initial router code.
This commit is contained in:
commit
85fb265651
57
ignite-router.js
Normal file
57
ignite-router.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
||||||
|
import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";
|
||||||
|
|
||||||
|
class RouterLink extends IgniteElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
get properties() {
|
||||||
|
return {
|
||||||
|
active: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return this.template
|
||||||
|
.onClick((event) => this.onClick(event))
|
||||||
|
.child(
|
||||||
|
new slot(this)
|
||||||
|
.class(this.active, (value) => { return value ? "active" : null })
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(event) {
|
||||||
|
console.log("Router link was clicked, event:", event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class RouterView extends IgniteElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return this.template;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class RouterLinkTemplate extends IgniteTemplate {
|
||||||
|
constructor(...children) {
|
||||||
|
super("router-link", children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class RouterViewTemplate extends IgniteTemplate {
|
||||||
|
constructor(...children) {
|
||||||
|
super("router-view", children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("router-link", RouterLink);
|
||||||
|
customElements.define("router-view", RouterView);
|
||||||
|
|
||||||
|
export {
|
||||||
|
RouterLinkTemplate as RouterLink,
|
||||||
|
RouterViewTemplate as RouterView
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user