内容类型选择器

用于选择共同内容类型值的元素 .

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

使用量

安装

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

在 html 文件内

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

在 LitElement 模板中

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);

在多聚体3元素中

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);

发展

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

本地运行演示

npm start

运行测试

npm test