64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
|
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
||
|
|
import { IgniteTemplate, div, h1, slot, button, list } from "../ignite-html/ignite-template.js";
|
||
|
|
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
||
|
|
|
||
|
|
class AppBar extends IgniteElement {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
}
|
||
|
|
|
||
|
|
get styles() {
|
||
|
|
return /*css*/`
|
||
|
|
mt-app-bar {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 0.8em;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
border-top-left-radius: 1em;
|
||
|
|
border-top-right-radius: 1em;
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
mt-app-bar.bottom {
|
||
|
|
order: 9999;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
get properties() {
|
||
|
|
return {
|
||
|
|
placement: "top"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
init() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return this.template
|
||
|
|
.class(this.placement)
|
||
|
|
.child(
|
||
|
|
new slot(this)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
ready() {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class AppBarTemplate extends IgniteTemplate {
|
||
|
|
constructor(...children) {
|
||
|
|
super("mt-app-bar", children);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export {
|
||
|
|
AppBarTemplate as AppBar
|
||
|
|
};
|
||
|
|
|
||
|
|
customElements.define("mt-app-bar", AppBar);
|