94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
|
import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
|
|
|
|
class Drawer extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get styles() {
|
|
return /*css*/`
|
|
mt-drawer > div {
|
|
position: relative;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
mt-drawer > div.absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
mt-drawer > div.left {
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
mt-drawer > div.right {
|
|
right: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
mt-drawer > div.top {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
mt-drawer > div.bottom {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
mt-drawer > div.show {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
mt-drawer > div {
|
|
display: none;
|
|
}
|
|
`;
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
show: true,
|
|
responsiveClasses: "d-none d-md-flex",
|
|
position: "left",
|
|
width: "20em",
|
|
height: null,
|
|
padding: "1em",
|
|
absolute: true
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return this.template
|
|
.child(
|
|
new div()
|
|
.class(this.responsiveClasses)
|
|
.class(this.show, (value) => { return value ? "show" : null })
|
|
.class(this.absolute, (value) => { return value ? "absolute" : null })
|
|
.class(this.position)
|
|
.style("width", this.width)
|
|
.style("height", this.height)
|
|
.style("padding", this.padding)
|
|
.child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
|
|
.child(new slot(this))
|
|
);
|
|
}
|
|
}
|
|
|
|
class DrawerTemplate extends IgniteTemplate {
|
|
constructor(...children) {
|
|
super("mt-drawer", children);
|
|
}
|
|
}
|
|
|
|
export {
|
|
DrawerTemplate as Drawer
|
|
};
|
|
|
|
customElements.define("mt-drawer", Drawer); |