https://github.com/teradata/covalent-markdown-navigator-nightly
Nightly builds of https://github.com/teradata/covalent markdown-navigator module
https://github.com/teradata/covalent-markdown-navigator-nightly
Last synced: about 1 year ago
JSON representation
Nightly builds of https://github.com/teradata/covalent markdown-navigator module
- Host: GitHub
- URL: https://github.com/teradata/covalent-markdown-navigator-nightly
- Owner: Teradata
- Created: 2017-09-28T17:24:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-07T19:26:06.000Z (about 5 years ago)
- Last Synced: 2025-04-13T09:14:25.662Z (about 1 year ago)
- Language: SCSS
- Homepage:
- Size: 1.77 MB
- Stars: 5
- Watchers: 14
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
For reference:
```typescript
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;
}
interface ICopyCodeTooltips {
copy?: string;
copied?: string;
}
```
## Setup
```typescript
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule]
})
export class MyModule {}
```
## Usage
```html
```
```typescript
const items = [
{
id: 'covalent',
title: 'Covalent',
children: [
{
id: 'component',
title: 'Components',
children: [
{
id: 'td-loading',
url: 'https://raw.githubusercontent.com/Teradata/covalent/develop/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
## Setup
```typescript
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule]
})
export class MyModule {}
```
## Usage
```html
```
# 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:
```typescript
interface IMarkdownNavigatorWindowConfig {
items: IMarkdownNavigatorItem[];
dialogConfig?: MatDialogConfig;
labels?: IMarkdownNavigatorWindowLabels;
toolbarColor?: ThemePalette;
startAt?: IMarkdownNavigatorItem | IMarkdownNavigatorItem[];
compareWith?: IMarkdownNavigatorCompareWith;
footer?: Type;
}
```
## Setup
```typescript
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule]
})
export class MyModule {}
```
## Usage
```typescript
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 = this._markdownNavigatorWindowService.open({
items: [{ url: 'https://github.com/Teradata/covalent/blob/develop/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
```typescript
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule]
})
export class MyModule {}
```
## Usage
Example:
```html
Open window
```