马克下纳维加多组件
用于渲染和导航的组件,通过标记下,例如文件. 支持github urls. (英语).
API 总结
投入
- 项目: IMarkdownNavigator 项目[
- IMarkdown Navigator 列表 将要提供的项目
- 标签 ?: IMarkdownNavigator标签
- 翻译标签
- 启动 At ? : IMarkdownNavigator 项目 : IMarkdownNavigator 项目 []
- 跳转到的项目或路径
- 比较一下
- 用于找到启动项的函数
- 严格平等比较的默认值(XQ)
- 脚步: 类型
- 自定义组件用作全局页脚
- 复制CodeToC剪贴板吗 : 布尔
- 在代码片断上显示复制按钮以复制代码到剪贴板.
- 复制 CodeTooltips ?: ICopyCodeTooltips
- 要复制和复制的工具提示 .
产出
- 按钮被点击 :
- 单击按钮时发出
- 选中的项目: IMarkdownNavigator 项目
- 选定项目时发送选中的项目
供参考:
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;
}
设置
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}
共价图标支持( 选项)
Markdown导航器会自动检测Covalent图标并应用正确的字体样式. 共价图标为 完全可选 - 组件仅与材料图标完美地工作.
图标检测( 构建)
该组件包括图标检测出箱. 不需要额外的设置或安装.
图标检测被捆绑在组件中,并与任何版本的 @covalent/icons 安装在您的工程中.
渲染共价图标( 可选)
如果你想的话 提交 共价图标(不仅仅是材料图标),您需要安装图标字体 :
备选案文1:使用共价设计系统
如果您的工程已经使用其他共价组件, 其全局样式如下 :
@use '@covalent/icons';
共价图标将自动工作 .
备选案文2:单独安装
-
安装图标包 :
npm install @covalent/icons -
导入您的全局样式 (单位:千美元)
src/styles.scss:@import '@covalent/markdown-navigator/styles/markdown-navigator-icons.scss';
图标使用
两种图标类型在您的数据中工作方式相同 :
// Material Icons (always available via Google Fonts)
{
title: 'Notebooks',
icon: 'book',
}
// Covalent Icons (requires @covalent/icons for rendering)
{
title: 'Vector Store',
icon: 'variable_outlined', // Auto-detected as Covalent icon
}
说明: 如果使用共价图标, 但是 @covalent/icons 未安装,图标将显示为空框。 材料图标总是在不附加设置的情况下工作.
组件自动检测根据图标名称使用的字体。 在您的 TypeScript 代码中不需要额外的配置 .
使用量
<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',
},
],
},
],
},
];
马克下纳维加多窗口组件
包含 MarkdownNavigator 组件和工具栏的组件
API 总结
投入
- 项目: IMarkdownNavigator 项目[
- IMarkdown Navigator 列表 将要提供的项目
- 标签 ?: IMarkdownNavigator标签
- 翻译标签
- 启动 At ? : IMarkdownNavigator 项目 : IMarkdownNavigator 项目 []
- 跳转到的项目或路径
- 比较一下
- 用于找到启动项的函数
- 严格平等比较的默认值(XQ)
- 工具栏颜色 ?: 主题Palette
- 工具栏颜色
- 默认为“ 主要 ”
- 脚步: 类型;
- 自定义组件用作全局页脚
产出
- 关闭: 无效
- 点击关闭按钮时事件已释放 .
- 按钮被点击 :
- 单击按钮时发出
- 选中的项目: IMarkdownNavigator 项目
- 选定项目时发送选中的项目
设置
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}
使用量
<td-markdown-navigator-window [items]="items"></td-markdown-navigator-window>
MarkdownNavigator Window服务公司
在可拖动对话框中打开 MarkdownNavigator WindowComponent 的服务 。 使用 TdDialog Service 的可打开Draggic 方法.
API 总结
方法
- 打开: 函数( 配置: IMarkdownNavigator Window Config)
- 在可拖动的对话框中打开 MarkdownNavigator Window 组件 .
供参考:
interface IMarkdownNavigatorWindowConfig {
items: IMarkdownNavigatorItem[];
dialogConfig?: MatDialogConfig;
labels?: IMarkdownNavigatorWindowLabels;
toolbarColor?: ThemePalette;
startAt?: IMarkdownNavigatorItem | IMarkdownNavigatorItem[];
compareWith?: IMarkdownNavigatorCompareWith;
footer?: Type<any>;
}
设置
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}
使用量
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(() => {});
}
}
马克下纳维加多窗口指令
使用 Td- MarkdownNavigator Window Service 在点击事件上打开方法的命令 .
API 总结
投入
- (原始内容存档于2018-10-21) (英语). MarkdownNavigator Window: IMarkdownNavigator Window Config
- 要打开窗口的配置
- 禁用:布尔
- 无论是否禁用
设置
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}
使用量
示例
<button mat-button [tdMarkdownNavigatorWindow]="{ items: [] }" [disabled]="false">Open window</button>