Morph-dropdown NPM

morph-dropdown

LitElement container that morphs between different dropdown items

Inspired by this

This package could use some refactoring, so pull requests are welcome.

Usage

import "morph-dropdown/morph-dropdown.js";
import "morph-dropdown/morph-dropdown-item.js";

While not required, This package works great with <mwc-button> and <mwc-list>

<morph-dropdown>

    <mwc-button>Non Dropdown Button</mwc-button>
    <morph-dropdown-item>
        <mwc-button slot="button">Non Dropdown Button</mwc-button>

        <mwc-list slot="dropdown">
            <mwc-list-item>First Dropdown</mwc-list-item>
            <mwc-list-item>Second Dropdown</mwc-list-item>
            <mwc-list-item>Third Dropdown</mwc-list-item>
        </mwc-list>
    </morph-dropdown-item>

</morph-dropdown>

Notes:

This package does not support nested dropdowns.

API

Slots

`<morph-dropdown>`

Name	Description
default	Any elements can go here, but all `<morph-dropdown-item>` elements will share a morph material when nested in the same `<morph-dropdown>`

`<morph-dropdown-item>`

Name	Description
`button`	When this element is hovered over, the `dropdown` slot will come into view
`dropdown`	The list of items to morph the background material to and fade in.
default	Not supported