API

Properties

specifications: Array<IfexSpecificationItem>

This property is used to pass all the ifex specification layers to the viewer. The specification is an array of objects with the following structure:

interface IfexSpecificationItem {
  filename: string;
  content: string;
}

Events

specloaded

This event is emitted when the specification is parsed and rendered.

Example

index.html

<ifex-viewer id="viewer"></ifex-viewer>

script.ts

const viewer = document.getElementById('viewer');
viewer.addEventListener('specloaded', () => console.log('Specification loaded'));

clipboardcopiedsuccessful

This event triggers when an element, such as a dot notation path, is copied to the clipboard. You can listen for this event to show custom notifications.

Event payload

interface ClipboardCopiedEvent {
  type: 'dotNotation' | 'validationError' | 'sourcecode';
  data: 'string';
}

nodeselected

This event triggers when a node was selected in the sidenav.

Event payload

interface NodeSelectedEvent {
  path: string;
}

Methods

selectNode(path: string): void

Selects a node (e.g. a method or event) in the sidenav of the viewer by the given path.

Params

• path: Path is the dot notation path starting from the root node (e.g. GalacticEmpire.recruitStormtrooper). Depending on your API structure, the dot notation path might not be unique.

Example

index.html

<ifex-viewer id="viewer" specifications="mySpecifications"></ifex-viewer>

script.ts

const viewer = document.getElementById('viewer');
viewer.selectNode('GalacticEmpire.recruitStormtrooper');

TIP

It's recommended to listen to the specloaded event first to ensure that the specification is loaded before calling the selectNode method.

Slots

Slots are used to customize the viewer's content. The following slots are available:

Headline of a detail page

Slot name: <dotNotationPath>-headline

This slot is used to customize the headline of a node. The slot name is the dot notation path (e.g. root-namespace.nested-namespace.method-1-headline) of the node in which the headline should be customized.

The slot content will only be shown if the currently visible node matches the given dot notation path.

WARNING

The dot notation path used in the slot names has to be in all lowercase.

Example

<template>
  <ifex-viewer>
    <p slot="galacticempire.recruitstormtrooper-headline">Some extra metadata in the headline.</p>
    <p slot="galacticempire.deploytieefighter-headline">Some other metadata in another headline.</p>
  </ifex-viewer>
</template>

Argument and Error rows of a detail page (Methods, Events, Structs, Enumerations)

Slot name: <dotNotationPath>

WARNING

This slot is only available on pages containing arguments or errors. These are in general: Methods, Events, Structs and Enumerations.

In these slots you can pass additional information about a specific argument or error. The slot name is the dot notation path (e.g. root-namespace.nested-namespace.method-1.myInputProp) to the respective argument or error.

The slot content will only be shown if the currently visible node with it's arguments and errors matches the given dot notation path.

WARNING

The dot notation path used in the slot names has to be in all lowercase.

Example

<template>
  <ifex-viewer>
    <p slot="galacticempire.recruitstormtrooper.name">Some extra metadata of this argument.</p>
    <p slot="galacticempire.recruitstormtrooper.planetoforigin">Some extra metadata of another argument.</p>
    <p slot="galacticempire.deploytieefighter.targetcoordinates">Call darth vader</p>
  </ifex-viewer>
</template>