MontoyaTech/ignite-html-bootstrap
MontoyaTech/ignite-html-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed dropdown menu styling. Added alignment property with support for centering the dropdown menu. Cleaned up the code a little too and simplified a few things.

Browse Source
This commit is contained in:
Matt Mo 2020-12-02 12:58:45 -08:00
parent 24906572d7
commit 1483ee54f0
1 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dropdown-menu.js
View File

@ -1,5 +1,5 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot } from "../ignite-html/ignite-template.js";
import { IgniteTemplate, button, ul, slot, div } from "../ignite-html/ignite-template.js";
class DropdownMenu extends IgniteElement {
constructor() {
@ -9,31 +9,49 @@ class DropdownMenu extends IgniteElement {
get properties() {
return {
button: null,
buttonClass: "btn btn-simple",
buttonClass: "btn",
placement: "right",
minWidth: null
alignment: "none",
minWidth: null,
marginTop: null,
};
}
get styles() {
return `
.btn-simple {
border: none;
background-color: transparent;
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;
}
`;
}
render() {
return this.template.child(
new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
new ul()
.class("dropdown-menu")
.class(this.placement, (value) => { return `dropdown-menu-${value}`; })
.style("min-width", this.minWidth, "important", (value) => { return value ? value : "unset"; })
.child(
new slot(this)
)
new div().class(this.alignment, value => "alignment-" + value).child(
new button().class(this.buttonClass).data("toggle", "dropdown").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)
)
)
);
}
}