open-index/open-npm huggingface dataset:
npm package: @moduware/morph-element
Description: Parent for all of Polymorph Components that can detect current platform and other common behaviour
Latest version: 1.0.0

## &lt;morph-element&gt;

Parent for all of Polymorph Components that can detect current platform and other common behavior.

## Getting Started:
For the information about how to clone the desired repository, running the local server and testing, please refer to this [link](https://github.com/moduware/polymorph-components/blob/master/INFO.md).


## Attributes

| Custom Attribute |  Type  |       Description      |          Default          |
|:----------------:|:------:|:----------------------:|:-------------------------:|
|  **`platform`**  | String | Platform of the device | Either 'android' or 'ios' |
npm package: @moduware/morph-list-view-divider
Description: Divider component for list view
Latest version: 2.0.0

# \<morph-list-view-divider\>

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-progress)

A divider web component for list view component.

`morph-list-view-divider` changes its look based on when it is either IOS device or Android device. Currently being updated to use lit-element as base class. More detailed documention coming soon. 

## Getting Started

For the information about how to clone the desired repository, running the local server and testing, please refer to Polymorph elements getting started docs at the end of this repository.

## Demo

- For an inline demo you can edit please see `morph-list-view` component on webcomponents website here [morph-list-view]

- Here is a quick demo of the `morph-list-view-divider` element for **IOS platform**.

  <p align="center">
    <img src="https://github.com/moduware/morph-list-view-divider/blob/master/demo-images/ios-divider-inside-view-demo.png?raw=true" alt="IOS morph-list-view-divider demo"/>
  </p>

- Here is a quick demo of the `morph-list-view-divider` element for **Android platform**.

  <p align="center">
    <img src="https://github.com/moduware/morph-list-view-divider/blob/master/demo-images/android-divider-inside-view-demo.png?raw=true" alt="Android morph-list-view-divider demo"/>
  </p>

- Here is the `morph-list-view-divider` HTML markup for both **IOS** and **Android** platform

```html

<template>
  <morph-list-view>
    <morph-list-view-title>Title</morph-list-view-title>
    <morph-list-view-item>Item 1</morph-list-view-item>

    <morph-list-view-divider>Divider</morph-list-view-divider>

    <morph-list-view-item>Item 2</morph-list-view-item>
    <morph-list-view-item>Item 3</morph-list-view-item>

    <morph-list-view-divider>Divider</morph-list-view-divider>

    <morph-list-view-item>Item 4</morph-list-view-item>
    <morph-list-view-item>Item 5</morph-list-view-item>
  </morph-list-view>
</template>

```

## Further help

For more information on how to install and run test please go here - [Polymorph elements getting started]

[Polymorph elements getting started]: https://github.com/moduware/polymorph-components/blob/master/INFO.md

[morph-list-view]: https://www.webcomponents.org/element/moduware/morph-list-view
npm package: @moduware/morph-list-view-title
Description: Title component for Morph List View that changes its look based on when it is either IOS device or Android device.
Latest version: 2.0.0

# morph-list-view-title

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-progress)

A title web component using LitElement as base class for list view element.

`morph-list-view-title` changes its look based on when it is either IOS device or Android device.

## Getting Started

For the information about how to clone the desired repository, running the local server and testing, please refer to Polymorph elements getting started docs at the end of this repository.

## Demo

- For an inline demo you can edit please see `morph-list-view` component on webcomponents website here [morph-list-view]

- Here is a quick demo of the `morph-list-view-title` element for **IOS platform**.

  <p align="center">
    <img src="https://github.com/moduware/morph-list-view-title/blob/master/demo-images/ios-title-inside-view-demo.png?raw=true" alt="IOS morph-list-view-title demo"/>
  </p>

- Here is a quick demo of the `morph-list-view-title` element for **Android platform**.

  <p align="center">
    <img src="https://github.com/moduware/morph-list-view-title/blob/master/demo-images/android-title-inside-view-demo.png?raw=true" alt="Android morph-list-view-title demo"/>
  </p>

- Here is the HTML markup for both **IOS** and **Android** platform

```html

<template>
  <morph-list-view>
    <morph-list-view-title>Title 1</morph-list-view-title>

    <morph-list-view-item>Item 1</morph-list-view-item>
    <morph-list-view-item>Item 2</morph-list-view-item>
    <morph-list-view-item>Item 3</morph-list-view-item>

    <morph-list-view-title>Title 2</morph-list-view-title>

    <morph-list-view-item>Item 1</morph-list-view-item>
    <morph-list-view-item>Item 2</morph-list-view-item>
    <morph-list-view-item>Item 3</morph-list-view-item>
  </morph-list-view>
</template>

```

## Further help

For more information on how to install and run test please go here - [Polymorph elements getting started]

[Polymorph elements getting started]: https://github.com/moduware/polymorph-components/blob/master/INFO.md

[morph-list-view]: https://www.webcomponents.org/element/moduware/morph-list-view
npm package: @moduware/morph-shared-colors
Description: Shared colors for Polymorph Components
Author: Moduware
Latest version: 1.0.0

# morph-shared-colors

Shared colours for Morph Component, optional when non-blue and non-custom colour used

## Further info

For more information about Morph Components please see - [Polymorph elements getting started]

[Morph Components getting started]: https://github.com/moduware/polymorph-components/blob/master/INFO.md
npm package: @moduware/morph-view
Description: View where we put all our elements
Latest version: 1.1.0

# morph-view

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-progress)

Polymorph View element where we put all of our elements.

Morph Components are now updating from the current polymer base class to lit-element as base class. Components found in the master branch and in the npm registry are using lit-element and the older version with polymer will reside in the `polymer-3.0` branch.

`morph-view` is the containing parent element for components like `morph-sidebar`

## Getting Started

For the information about how to clone the desired repository, running the local server and testing, please refer to Polymorph elements getting started docs at the end of this repository.

## Demo

- Here is a quick usage example of the `morph-view` element.

```html

  <morph-view id="mainView" platform="ios">
    <h3>Android morph-sidebar demo</h3>

    <button id="sidebarLeftToggler">Toggle Left Sidebar</button>
  </morph-view>

  <morph-sidebar id="sidebarLeft" platform="android">
    <p>Left Panel content here</p>
    <p>simulated Android platform with cover animation and shadow</p>
  </morph-sidebar>

```

## Attributes

| Custom Attribute |   Type  | Description                                                                                                                      | Default     |
|:----------------:|:-------:|----------------------------------------------------------------------------------------------------------------------------------|-------------|
|  **`reveal`**  | String  | Takes the value of left or right | **`null`** |



## Styling


Custom property                  | Description                            | Default
---------------------------------|----------------------------------------|--------------------
`--reveal-width`                 | Width of the reveal                    | 260px

## Further help

For more information on how to install and run test please go here - [Polymorph elements getting started]

[Polymorph elements getting started]: https://github.com/moduware/polymorph-components/blob/master/INFO.md