Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/advanced-rest-client/api-summary
⛔️ DEPRECATED This component is being deprecated. Use `api-documentation` instead.
https://github.com/advanced-rest-client/api-summary
deprecated obsolete
Last synced: about 1 month ago
JSON representation
⛔️ DEPRECATED This component is being deprecated. Use `api-documentation` instead.
- Host: GitHub
- URL: https://github.com/advanced-rest-client/api-summary
- Owner: advanced-rest-client
- Created: 2018-04-14T01:20:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:36:13.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T21:18:37.296Z (8 months ago)
- Topics: deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 6.62 MB
- Stars: 0
- Watchers: 4
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DEPRECATED
This component is being deprecated. The code base has been moved to [api-documentation](https://github.com/advanced-rest-client/api-documentation) module. This module will be archived when [PR 37](https://github.com/advanced-rest-client/api-documentation/pull/37) is merged.
-----
A component that renders basic information about an API.
It uses AMF model to render the view.
[](https://www.npmjs.com/package/@api-components/api-summary)
[](https://github.com/advanced-rest-client/api-summary/actions/workflows/deployment.yml)
## 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
```sh
npm install --save @api-components/api-summary
```
### In an html file
```html
import '@api-components/api-summary/api-summary.js';
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);
});
```
### Styling using CSS Shadow Parts
```html
import '@api-components/api-summary/api-summary.js';
api-summary::part(api-title) {
font-size: 24px;
}
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);
});
```
For a complete list of parts, check out this [doc](./Styling.md).
### In a LitElement template
```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-summary/api-summary.js';
class SampleElement extends LitElement {
render() {
return html`
`;
}
_navHandler(e) {
console.log(e.detail.selected);
console.log(e.detail.type);
}
}
customElements.define('sample-element', SampleElement);
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@api-components/api-summary/api-summary.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
_navHandler(e) {
console.log(e.detail.selected);
console.log(e.detail.type);
}
}
customElements.define('sample-element', SampleElement);
```
## Development
```sh
git clone https://github.com/advanced-rest-client/api-summary
cd api-summary
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```