@covalent/markdown-navigator v8.22.0
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>
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
6 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
4 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago