1.2.4 • Published 12 months ago
@sfdocs-internal/api-summary v1.2.4
DEPRECATED
This component is being deprecated. The code base has been moved to api-documentation module. This module will be archived when PR 37 is merged.
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
1.2.4
12 months ago
1.0.4-desc-fix-alpha
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.1.1-alpha4
2 years ago
1.0.8-alpha
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.2-alpha1
3 years ago
1.0.0-alpha1
3 years ago
1.0.0-alpha
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago