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
Download Patch File Download Diff File Expand all files Collapse all files

34
dropdown-menu.js
View File

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