An interactive menu for your Tailwind CSS projects that opens to the bottom of a button using Angular.
For this component to properly work, you will need to install @popperjs/core into your project. Please run the following:npm i -E @popperjs/[email protected]
import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { createPopper } from "@popperjs/core";
@Component({
selector: "app-root",
// templateUrl: './app.component.html',
template: `<div class="flex flex-wrap">
<div class="w-full sm:w-6/12 md:w-4/12 px-4">
<div class="relative inline-flex align-middle w-full">
<button
class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 bg-slate-700 active:bg-slate-800"
type="button"
(click)="toggleDropdown($event)"
#btnDropdownRef
>
White Dropdown
</button>
</div>
</div>
</div>
<div class="z-50" style="min-width: 12rem" #popoverDropdownRef>
<div
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
style="min-width: 12rem"
[ngClass]="dropdownPopoverShow ? 'block' : 'hidden'"
>
<a
href="#pablo"
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-slate-700"
>
Action
</a>
<a
href="#pablo"
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-slate-700"
>
Another action
</a>
<a
href="#pablo"
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-slate-700"
>
Something else here
</a>
<div
class="h-0 my-2 border border-solid border-t-0 border-slate-800 opacity-25"
></div>
<a
href="#pablo"
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-slate-700"
>
Seprated link
</a>
</div>
</div>`,
})
export class AppComponent implements AfterViewInit {
dropdownPopoverShow = false;
@ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
@ViewChild("popoverDropdownRef", { static: false })
popoverDropdownRef: ElementRef;
ngAfterViewInit() {
createPopper(
this.btnDropdownRef.nativeElement,
this.popoverDropdownRef.nativeElement,
{
placement: "bottom-start",
}
);
}
toggleDropdown(event) {
event.preventDefault();
if (this.dropdownPopoverShow) {
this.dropdownPopoverShow = false;
} else {
this.dropdownPopoverShow = true;
}
}
}