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|

Properties/Attributes

<morph-dropdown>

|Name|Type|Default|Description| |-|-|-|-| |column|boolean|false|Changes the css flex-direction of the item container from a row to a column|

<morph-dropdown-item>

|Name|Type|Default|Description| |-|-|-|-| |centered|boolean|false|Will justify-content: center; the :host{} | |active|boolean|false|Fades in the content. Used internally|

CSS Custom Properties

<morph-dropdown>

|Name|Default|Description| |-|-|-| |--morph-dropdown-background|#fff|Changes the background of the morph material.|