Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@advanced-rest-client/content-type-selector

3.1.3 • Public • Published

Published on NPM

Build Status

Published on webcomponents.org

<content-type-selector>

An element that provides an UI for selecting common content type values.

<content-type-selector contenttype="application/zip">
  <paper-item slot="item" data-type="application/zip">Zip file</paper-item>
  <paper-item slot="item" data-type="application/7z">7-zip file</paper-item>
</content-type-selector>

API components

This components is a part of API components ecosystem

Usage

Installation

npm install --save @advanced-rest-client/content-type-selector

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/content-type-selector/content-type-selector.js';
    </script> 
    <script src="node_modules/web-animations-js/web-animations-next.min.js"></script> 
  </head>
  <body>
    <content-type-selector contenttype="application/json"></content-type-selector>
    <script>
    window.addEventListener('content-type-changed', (e) => {
      console.log(e.detail.value);
    });
    </script> 
  </body>
</html>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/content-type-selector/content-type-selector.js';
 
class SampleElement extends LitElement {
  render() {
    return html`
    <content-type-selector .contentType="${this.mediaType}" @contenttype-changed="${this._mediaChangeHandler}"></content-type-selector>
    `;
  }
 
  _mediaChangeHandler(e) {
    console.log(e.target.contentType);
    // or e.detail.value
  }
}
customElements.define('sample-element', SampleElement);

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/content-type-selector/content-type-selector.js';
 
class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <content-type-selector contenttype="{{mediaType}}"></content-type-selector>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Installation

git clone https://github.com/advanced-rest-client/content-type-selector
cd content-type-selector
npm install

Running the demo locally

npm start

Running the tests

npm test

Install

npm i @advanced-rest-client/content-type-selector

DownloadsWeekly Downloads

162

Version

3.1.3

License

Apache-2.0

Unpacked Size

53.6 kB

Total Files

8

Last publish

Collaborators

  • avatar
  • avatar
  • avatar