@covalent/markdown-navigator
TypeScript icon, indicating that this package has built-in type declarations

8.23.2 • Public • Published

MarkdownNavigatorComponent

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',
          },
        ],
      },
    ],
  },
];

MarkdownNavigatorWindowComponent

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>

MarkdownNavigatorWindowService

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(() => {});
  }
}

MarkdownNavigatorWindowDirective

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>

Package Sidebar

Install

npm i @covalent/markdown-navigator

Weekly Downloads

800

Version

8.23.2

License

MIT

Unpacked Size

233 kB

Total Files

19

Last publish

Collaborators

  • juliemarie
  • odubya320