@advanced-rest-client/headers-list-viewdeprecated

An element that displays a list of headers

Usage no npm install needed!

<script type="module">
  import advancedRestClientHeadersListView from 'https://cdn.skypack.dev/@advanced-rest-client/headers-list-view';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

headers-list-view

An element that displays a list of headers.

<headers-list-view></headers-list-view>
<script>
let headers = 'Content-Type: application-json\n';
headers += 'Content-Length: 256\n';
headers += 'Content-Encoding: gzip\n';
headers += 'x-server: x-abc.zone-europe-a.domain.company.com';
document.querySelector('headers-list-view').headers = headers;
</script>

You can put @advanced-rest-client/arc-definitions element into dom to enable interactive list. When the user double click on the list item it dispatches headers query event and arc-definitions responds to his query. If the headers details are available it renders a dialog with header description.

API components

This components is a part of API components ecosystem

Usage

Installation

npm install --save @advanced-rest-client/headers-list-view

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/headers-list-view/headers-list-view.js';
    </script>
  </head>
  <body>
    <headers-list-view headers="..."></headers-list-view>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/headers-list-view/headers-list-view.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <headers-list-view .headers="${this.headers}"></headers-list-view>
    `;
  }
}
customElements.define('sample-element', SampleElement);

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/headers-list-view/headers-list-view.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <headers-list-view headers="[[headers]]"></headers-list-view>
    `;
  }

  _authChanged(e) {
    console.log(e.detail);
  }
}
customElements.define('sample-element', SampleElement);

Installation

git clone https://github.com/advanced-rest-client/headers-list-view
cd headers-list-view
npm install

Running the demo locally

npm start

Running the tests

npm test