JSPM – morph-dropdown@1.0.3

Package Exports

morph-dropdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (morph-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.