73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
import { IgniteHtml } from "../ignite-html/ignite-html.js";
|
|
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
|
import { IgniteTemplate, button, ul, slot, div } from "../ignite-html/ignite-template.js";
|
|
|
|
class DropdownMenu extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get styles() {
|
|
return /*css*/`
|
|
bt-dropdown-menu {
|
|
position: relative;
|
|
}
|
|
|
|
bt-dropdown-menu > div {
|
|
position: relative;
|
|
}
|
|
|
|
bt-dropdown-menu > div.alignment-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
bt-dropdown-menu > div.alignment-center > ul {
|
|
left: unset !important;
|
|
}
|
|
`;
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
button: null,
|
|
buttonClass: "btn",
|
|
showButton: true,
|
|
placement: "right",
|
|
alignment: "none",
|
|
minWidth: null,
|
|
marginTop: null
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return this.template.child(
|
|
new div().class(this.alignment, value => "alignment-" + value).child(
|
|
new button()
|
|
.class(this.buttonClass)
|
|
.data("toggle", "dropdown")
|
|
.show(this.showButton)
|
|
.child(this.button),
|
|
new ul()
|
|
.class("dropdown-menu")
|
|
.class(this.placement, value => `dropdown-menu-${value}`)
|
|
.style("min-width", this.minWidth, "important", value => value ? value : "unset")
|
|
.style("margin-top", this.marginTop)
|
|
.child(new slot(this))
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
class DropdownMenuTemplate extends IgniteTemplate {
|
|
constructor(...children) {
|
|
super("bt-dropdown-menu", children);
|
|
}
|
|
}
|
|
|
|
IgniteHtml.register("bt-dropdown-menu", DropdownMenu);
|
|
|
|
export {
|
|
DropdownMenuTemplate as DropdownMenu
|
|
}; |