http-method-selector
A HTTP method selector. Displays list of radio buttons with common http methods and a dropdown with less common but still valid methods.
It also allows to define own method.
<http-method-selector method="POST" is-payload></http-method-selector>
<http-method-selector-mini method="PUT" is-payload></http-method-selector-mini>
Usage
Installation
npm install --save @advanced-rest-client/http-method-selectorIn an html file
<html>
<head>
<script type="module">
import '@advanced-rest-client/http-method-selector/http-method-selector.js';
import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';
</script>
</head>
<body>
<http-method-selector method="POST"></http-method-selector>
<http-method-selector-mini method="PUT"></http-method-selector-mini>
<script>
{
document.querySelector('http-method-selector').onmethod = (e) => {
console.log(e.detail.value); // or e.target.method
};
document.querySelector('http-method-selector').onispayload = (e) => {
if (e.detail.value) {
console.log('Payload is allowed');
} else {
console.log('Payload is not allowed');
}
};
}
</script>
</body>
</html>In a LitElement
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/http-method-selector/http-method-selector.js';
import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';
class SampleElement extends PolymerElement {
render() {
return html`
<http-method-selector
method="POST"
@method-changed="${this._verbHandler}"
@ispayload-changed="${this._isPayloadHandler}"></http-method-selector>
`;
}
_verbHandler(e) {
this.httpMethod = e.target.method;
}
_isPayloadHandler(e) {
this.payloadAllowed = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);Development
git clone https://github.com/advanced-rest-client/http-method-selector
cd http-method-selector
npm installRunning the demo locally
npm startRunning the tests
npm test
