@covalent/markdown-navigator

A component for rendering and navigating through markdown, such as documentation. Supports github urls.

API Summary

Inputs

• items: IMarkdownNavigatorItem

- List of IMarkdownNavigatorItems to be rendered

• labels?: IMarkdownNavigatorLabels

- Translated labels

• startAt?: IMarkdownNavigatorItem | IMarkdownNavigatorItem

- Item or path to jump to

• compareWith?: IMarkdownNavigatorCompareWith

- Function used to find startAt item - Defaults to comparison by strict equality (===)

• footer:? Type

- Custom component to be used as global footer

• copyCodeToClipboard?: boolean

- Display copy button on code snippets to copy code to clipboard.

• copyCodeTooltips?: ICopyCodeTooltips

- Tooltips for copy button to copy and upon copying.

Outputs

• buttonClicked: ITdFlavoredMarkdownButtonClickEvent

- Emitted when a button is clicked

• itemSelected: IMarkdownNavigatorItem

- Emitted the selected item when a item is selected
For reference:

interface IMarkdownNavigatorItem {
  id?: string; // used to compare items by default and as attr id for content
  title?: string;
  url?: string;
  httpOptions?: object;
  markdownString?: string; // raw markdown
  anchor?: string;
  children?: IMarkdownNavigatorItem[];
  childrenUrl?: string;
  description?: string;
  icon?: string;
  footer?: Type<any>;
}

interface ICopyCodeTooltips {
  copy?: string;
  copied?: string;
}

Setup

import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
  imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}

Usage

<td-markdown-navigator [items]="items"></td-markdown-navigator>

const items = [
  {
    id: 'covalent',
    title: 'Covalent',
    children: [
      {
        id: 'component',
        title: 'Components',
        children: [
          {
            id: 'td-loading',
            url: 'https://raw.githubusercontent.com/Teradata/covalent/main/src/platform/core/loading/README.md',
            title: 'tdLoading',
          },
        ],
      },
    ],
  },
];

A component that contains a MarkdownNavigator component and a toolbar

API Summary

Inputs

• items: IMarkdownNavigatorItem

- List of IMarkdownNavigatorItems to be rendered

• labels?: IMarkdownNavigatorLabels

- Translated labels

• startAt?: IMarkdownNavigatorItem | IMarkdownNavigatorItem

- Item or path to jump to

• compareWith?: IMarkdownNavigatorCompareWith

- Function used to find startAt item - Defaults to comparison by strict equality (===)

• toolbarColor?: ThemePalette

- Toolbar color - Defaults to 'primary'

• footer:? Type;

- Custom component to be used as global footer

Outputs

• closed: void

- Event emitted when the close button is clicked.

• buttonClicked: ITdFlavoredMarkdownButtonClickEvent

- Emitted when a button is clicked

• itemSelected: IMarkdownNavigatorItem

- Emitted the selected item when a item is selected

Setup

import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
  imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}

Usage

<td-markdown-navigator-window [items]="items"></td-markdown-navigator-window>

A service that opens a MarkdownNavigatorWindowComponent inside a draggable dialog. Uses the openDraggable method of the TdDialogService.

API Summary

Methods

• open: function(config: IMarkdownNavigatorWindowConfig)

- Opens a MarkdownNavigatorWindowComponent inside a draggable dialog.
For reference:

interface IMarkdownNavigatorWindowConfig {
  items: IMarkdownNavigatorItem[];
  dialogConfig?: MatDialogConfig;
  labels?: IMarkdownNavigatorWindowLabels;
  toolbarColor?: ThemePalette;
  startAt?: IMarkdownNavigatorItem | IMarkdownNavigatorItem[];
  compareWith?: IMarkdownNavigatorCompareWith;
  footer?: Type<any>;
}

Setup

import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
  imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}

Usage

import {
  TdMarkdownNavigatorWindowComponent,
  TdMarkdownNavigatorWindowService,
  IMarkdownNavigatorItem,
} from '@covalent/markdown-navigator';
import { MatDialogRef } from '@angular/material/dialog';

export class SampleComponent {
  constructor(
    private _markdownNavigatorWindowService: TdMarkdownNavigatorWindowService
  ) {}

  ngOnInit(): void {
    const ref: MatDialogRef<TdMarkdownNavigatorWindowComponent> =
      this._markdownNavigatorWindowService.open({
        items: [
          {
            url: 'https://github.com/Teradata/covalent/blob/main/README.md',
          },
        ],
      });
    ref.afterOpened().subscribe(() => {});
    ref.afterClosed().subscribe(() => {});
  }
}

A directive that calls the TdMarkdownNavigatorWindowService open method on click events.

API Summary

Inputs

• tdMarkdownNavigatorWindow: IMarkdownNavigatorWindowConfig

- Config to open window with

• disabled: boolean

- Whether disabled or not

Setup

import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
  imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}

Usage

Example:

<button
  mat-button
  [tdMarkdownNavigatorWindow]="{ items: [] }"
  [disabled]="false"
>
  Open window
</button>