@meveo-org/mv-dropdown

mv-dropdown

MvDropdown is a Meveo component (based on lit-element) that renders a dropdown container.

Features

• Default styling shows a box that displays when interacting with a target element
• Configurable style

Quick Start

To experiment with the MvDropdown component.

• Clone this repo.

• Serve the project from the root directory with some http server (best served with meveo itself)

• Update the dropdown demo component in demo.js file

Sample usage

<mv-dropdown
  container                   // indicates the main container of the dropdown
  hover                       // indicates that the dropdown responds to hover events
  toggle                      // indicates whether clicking on the trigger toggles the menu on and off
  justify="left"              // the alignment of the menu, i.e. if set to left, the left side
                              //   of the menu is aligned to the left side of the trigger
  position="bottom"           // indicates where the dropdown appears with respect to the trigger
  theme="light"               // the theme of the dropdown
>
  <mv-dropdown
    trigger                   // indicates that this will contain the trigger
                              //   the trigger can be as simple as a text or can be any element/component.
  >Trigger</mv-dropdown>
  <mv-dropdown
    header                    // indicates that this is a header
    theme="light"
  >Header</mv-dropdown>
  <mv-dropdown
    content                   // indicates that this is the content of the dropdown
    theme="light"
  >
    // dropdown content goes here...
  </mv-dropdown>  
  <mv-dropdown
    footer                    // indicates that this is the footer
  >Footer</mv-dropdown>
</mv-dropdown>

justify values include:

  left, center, right
  default value: left

position values include:

  top, bottom
  default value: bottom

theme values include:

  dark, light
  default value: dark

You can also check this demo