JarCastingapi-summary
A component that renders basic information about an API. It uses AMF model to render the view.
Version compatibility
This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.
Usage
Installation
npm install --save @api-components/api-summary
In an html file
<html>
<head>
<script type="module">
import '@api-components/api-summary/api-summary.js';
</script>
</head>
<body>
<api-summary></api-summary>
<script>
const amf = await getAmfModel();
document.body.querySelector('api-summary').api = amf;
window.addEventListener('api-navigation-selection-changed', (e) => {
console.log(e.detail.selected);
console.log(e.detail.type);
});
</script>
</body>
</html>
Styling using CSS Shadow Parts
<html>
<head>
<script type="module">
import '@api-components/api-summary/api-summary.js';
</script>
<style type="text/css">
api-summary::part(api-title) {
font-size: 24px;
}
</style>
</head>
<body>
<api-summary exportparts="api-title"></api-summary>
<script>
const amf = await getAmfModel();
document.body.querySelector('api-summary').api = amf;
window.addEventListener('api-navigation-selection-changed', (e) => {
console.log(e.detail.selected);
console.log(e.detail.type);
});
</script>
</body>
</html>
For a complete list of parts, check out this doc.
In a LitElement template
import { LitElement, html } from 'lit-element';
import '@api-components/api-summary/api-summary.js';
class SampleElement extends LitElement {
render() {
return html`
<api-summary .api="${this._amfModel}" @api-navigation-selection-changed="${this._navHandler}"></api-summary>
`;
}
_navHandler(e) {
console.log(e.detail.selected);
console.log(e.detail.type);
}
}
customElements.define('sample-element', SampleElement);
In a Polymer 3 element
import {PolymerElement, html} from '@polymer/polymer';
import '@api-components/api-summary/api-summary.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<api-summary api="[[amfModel]]" on-api-navigation-selection-changed="_navHandler"></api-summary>
`;
}
_navHandler(e) {
console.log(e.detail.selected);
console.log(e.detail.type);
}
}
customElements.define('sample-element', SampleElement);
Development
git clone https://github.com/advanced-rest-client/api-summary
cd api-summary
npm install
Running the demo locally
npm start
Running the tests
npm test
