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.

Styling

<api-type-document> provides the following custom properties and mixins for styling:

Custom property	Description	Default
`--api-type-document`	Mixin applied to this element	`{}`
`--api-type-document-union-button-background-color`	Background color of union selector button	`#fff`
`--api-type-document-union-button-color`	Color of union selector button	`#000`
`--api-type-document-union-button-active-background-color`	Background color of active union selector button	`#CDDC39`
`--api-type-document-union-button-active-color`	Color of active union selector button	`#000`

From property-shape-document

Custom property	Description	Default
`--property-shape-document`	Mixin applied each property element	`{}`
`--property-shape-document-array-color`	Property border color when type is an array	`#8BC34A`
`--property-shape-document-object-color`	Property border color when type is an object	`#FF9800`
`--property-shape-document-union-color`	Property border color when type is an union	`#FFEB3B`
`--arc-font-subhead`	Theme mixin, applied to the property title	`{}`
`--property-shape-document-title`	Mixin applied to the property title	`{}`
`--api-type-document-property-parent-color`	Color of the parent property label	`#757575`
`--api-type-document-property-color`	Color of the property name label when display name is used	`#757575`
`--api-type-document-child-docs-margin-left`	Margin left of the item's properties description relative to the title when the item is a child property of another property	`24px`
`--api-type-document-type-color`	Color of the "type" trait	`white`
`--api-type-document-type-background-color`	Background color of the "type" trait	`#2196F3`
`--api-type-document-trait-background-color`	Background color to main range trait (type, required, enum)	`#EEEEEE`,
`--api-type-document-trait-border-radius`	Border radius of a main property traits like type, required, enum	`3px`

From property-range-document

Custom property	Description	Default
`--property-range-document`	Mixin applied to this element	`{}`
`--api-type-document-type-attribute-color`	Color of each attribute that describes a property	`#616161`
`--api-type-document-examples-title-color`	Color of examples section title	``
`--api-type-document-examples-border-color`	Example section border color	`transparent`
`--code-background-color`	Background color of the examples section	``
`--arc-font-body1`	Mixin applied to an example name label	`{}`
`--arc-font-body2`	Mixin applied to the examples section title	`{}`

Usage

Installation

npm install --save @api-components/api-type-document

In an html file

<html>
  <head>
    <script type="module">
      import '@api-components/api-type-document/api-type-document.js';
    </script>
  </head>
  <body>
    <api-type-document></api-type-document>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/api-type-document/api-type-document.js';

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

Development

git clone https://github.com/advanced-rest-client/api-type-document
cd api-type-document
npm install

Running the demo locally

npm start

Running the tests

npm test

Keywords

api-components

FAQs

What is @api-components/api-type-document?

Is @api-components/api-type-document popular?

Is @api-components/api-type-document well maintained?

Last updated on 07 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install