Nacho Portmanteau Meltdown

    @styless-ui/doropdown
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    @styless-ui/doropdown

     

    Zero Built-in Style UI JS Library.

     


     

    Install

    via npm

    npm install @styless-ui/doropdown --save

    via yarn

    yarn add @styless-ui/doropdown

     

    Usage

    // import
    import { Dropdown } from "@styless-ui/doropdown";
    
    const dropdown = new Dropdown(dropdownElement, {
      onChange,
    });

    Options

    • onChange: (element: HTMLElement, isOpen: boolean) => void
      • Optional
      • Change State Handler

    Dropdown Instance Methods

    • open: () => void

      • A function to open the Modal.
    • close: () => void

      • A function to close the Modal.
    • dispose: () => void

      • cleanup function.

     

    Example

    <section class="section">
      <h2 class="title">DropDown</h2>
      <div class="dropdown">
        <div class="dropdown-trigger">
          <button
            class="button"
            aria-haspopup="true"
            aria-controls="dropdown-menu"
            data-dropdown-toggle-trigger
          >
            Dropdown button
            <span class="icon is-small">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
          <div class="dropdown-content">
            <a href="#" class="dropdown-item"> Dropdown item </a>
            <a href="#" class="dropdown-item"> Other dropdown item </a>
            <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
            <a href="#" class="dropdown-item"> Other dropdown item </a>
            <hr class="dropdown-divider" />
            <a href="#" class="dropdown-item"> With a divider </a>
          </div>
        </div>
      </div>
    </section>
    import { Dropdown } from "@styless-ui/doropdown";
    
    const dropdownElement = document.querySelector(".dropdown");
    const dropdownMenuElement = document.querySelector(".dropdown-menu");
    
    if (
      dropdownElement != null &&
      dropdownElement instanceof HTMLElement &&
      dropdownMenuElement != null &&
      dropdownMenuElement instanceof HTMLElement
    ) {
      const dropdown = new Dropdown(dropdownMenuElement, {
        onChange: (_element: HTMLElement, isOpen: boolean): void => {
          if (isOpen) {
            dropdownElement.classList.add("is-active");
          } else {
            dropdownElement.classList.remove("is-active");
          }
        },
      });
    
      document.addEventListener("click", (event: Event): void => {
        const { target } = event;
    
        if (!(target instanceof HTMLElement)) {
          // Not HTML Element
          return;
        }
    
        if ("dropdownToggleTrigger" in target.dataset) {
          // on Click Toggle dropdown trigger
          if (dropdownElement.classList.contains("is-active")) {
            dropdown.close();
          } else {
            dropdown.open();
          }
          event.preventDefault();
        }
      });
    }

     

    Licence

    This project is licensed under MIT license.

     

    Created and maintained by

    @yuki0410_ 🇯🇵

    Install

    npm i @styless-ui/doropdown

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    17.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • yuki0410