# morph-dropdown

> LitElement container that morphs between different dropdown items

Latest version **1.0.3** (published 2020-12-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install morph-dropdown
pnpm add morph-dropdown
yarn add morph-dropdown
bun add morph-dropdown
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-12-05 |
| First published | 2020-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Joseph Hassell |
| Maintainers | poster983 |
| Keywords | material design, web components, button, module, lit-element, front-end, lit-html, dropdown, morph, web |

## Links

- npm: https://www.npmjs.com/package/morph-dropdown
- Repository: https://github.com/poster983/morph-dropdown
- npm.io page: https://npm.io/package/morph-dropdown

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.3.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-12-05
- 1.0.2 — 2020-12-01
- 1.0.1 — 2020-11-28
- 1.0.0 — 2020-11-28

## README

# morph-dropdown
LitElement container that morphs between different dropdown items  

Inspired by [this](https://codepen.io/ianwessen/pen/mmZEgV)

This package could use some refactoring, so pull requests are welcome.
## Usage 
---
```js
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>`
```html

<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.|

---
_Source: https://npm.io/package/morph-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._