README
Taiga UI — Doc
Taiga UI based library for developing documentation portals for Angular libraries.
How to install
Install main packages:
npm i @taiga-ui/{cdk,core,kit}
Install doc:
npm i @taiga-ui/addon-doc
How to use
You can also see community made guide in Russian
Include
TuiDocMainModule
in your App module and use in your template:<tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
Configure languages to highlight in your main module:
import {NgModule} from '@angular/core'; import {TuiDocMainModule} from '@taiga-ui/addon-doc'; import {hljsLanguages} from './hljsLanguages'; import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs'; import {AppComponent} from './app.component'; @NgModule({ bootstrap: [AppComponent], imports: [TuiDocMainModule], declarations: [AppComponent], providers: [ { provide: HIGHLIGHT_OPTIONS, useValue: { coreLibraryLoader: () => import('highlight.js/lib/core' as string), lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers languages: { typescript: () => import('highlight.js/lib/languages/typescript' as string), less: () => import('highlight.js/lib/languages/less' as string), xml: () => import('highlight.js/lib/languages/xml' as string), }, }, }, ], }) export class AppBrowserModule {}
Configure documentation providers:
TUI_DOC_PAGES
— an array of pages, seeTuiDocPages
typeTUI_DOC_LOGO
— an src for the SVG logo in the sidebarTUI_DOC_DEFAULT_TABS
— an array of default named for tabs on your typical pageTUI_DOC_TITLE
— a title prefix for the browser tabTUI_DOC_SEE_ALSO
— a two dimensional array of related pages by their titlesConfigure routing:
import {Routes} from '@angular/router'; const appRoutes: Routes = [ { path: 'super-page', loadChildren: '../super-page/super-page.module#SuperModule', data: { title: 'Super Page', }, }, // ... ];
You must have title in route data in order for
TUI_DOC_SEE_ALSO
to work. It would also be automatically added toTUI_DOC_TITLE
for browser tab title when navigating to that route.Create pages.
Module:
import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc'; import {SuperComponent} from './super.component'; @NgModule({ imports: [TuiAddonDocModule, RouterModule.forChild(generateRoutes(SuperComponent))], declarations: [SuperComponent], exports: [SuperComponent], }) export class SuperModule {}
Component:
import {Component} from '@angular/core'; import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html'; import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts'; @Component({ selector: 'super-component', templateUrl: './account.template.html', }) export class SuperComponent { // Keys would be used as tabs for code example readonly example = { TypeScript: exampleTs, HTML: exampleHtml, }; readonly inputVariants = ['input 1', 'input 2']; }
Template:
<tui-doc-page header="Super" package="SUPER-PACKAGE" deprecated> <ng-template pageTab> <!-- default tab name would be used --> This would be the content of a first tab <tui-doc-example id="basic-example" heading="Example of usage" [content]="example"> <example-1></example-1> </tui-doc-example> </ng-template> <ng-template pageTab="Documentation"> <tui-doc-demo> <super-component [input]="input"></super-component> </tui-doc-demo> <tui-doc-documentation> <ng-template documentationPropertyName="input" documentationPropertyMode="input" documentationPropertyType="T" [documentationPropertyValues]="inputVariants" [(documentationPropertyValue)]="input" > Some input </ng-template> </tui-doc-documentation> </ng-template> </tui-doc-page>