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,addon-mobile}

Install doc:

npm i @taiga-ui/addon-doc

How to use

You can also see community made guide in Russian

1. Include TuiDocMainModule in your App module and use in your template:

   1<tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>

2. Configure languages to highlight in your main module:

   1import {Component} from '@angular/core';
   2import {TuiDocMainModule} from '@taiga-ui/addon-doc';
   3import {hljsLanguages} from './hljsLanguages';
   4import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
   5import {App} from './app.component';
   6
   7@Component({
   8  standalone: true,
   9  imports: [TuiDocMainModule],
   10  providers: [
   11    {
   12      provide: HIGHLIGHT_OPTIONS,
   13      useValue: {
   14        coreLibraryLoader: () => import('highlight.js/lib/core' as string),
   15        lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
   16        languages: {
   17          typescript: () => import('highlight.js/lib/languages/typescript' as string),
   18          less: () => import('highlight.js/lib/languages/less' as string),
   19          xml: () => import('highlight.js/lib/languages/xml' as string),
   20        },
   21      },
   22    },
   23  ],
   24})
   25export class App {}

3. Configure documentation providers:

   TUI_DOC_PAGES — an array of pages, see TuiDocPages type

   TUI_DOC_LOGO — an src for the SVG logo in the sidebar

   TUI_DOC_DEFAULT_TABS — an array of default named for tabs on your typical page

   TUI_DOC_TITLE — a title prefix for the browser tab

   TUI_DOC_SEE_ALSO — a two dimensional array of related pages by their titles

   TUI_DOC_SEARCH_ENABLED — enable doc search. Default value is true

4. Configure routing:

   1import {Routes} from '@angular/router';
   2
   3const appRoutes: Routes = [
   4  {
   5    path: 'super-page',
   6    loadChildren: async () => (await import('../super-page/super-page.module')).SuperModule,
   7    data: {
   8      title: 'Super Page',
   9    },
   10  },
   11  // ...
   12];

   You must have title in route data in order for TUI_DOC_SEE_ALSO to work. It would also be automatically added to TUI_DOC_TITLE for browser tab title when navigating to that route.

5. Create pages.

   Module:

   1import {TuiAddonDoc} from '@taiga-ui/addon-doc';
   2
   3@Component({
   4  standalone: true,
   5  imports: [TuiAddonDoc, SuperComponent],
   6})
   7export class App {}

   Component:

   1// ..
   2
   3@Component({
   4  standalone: true,
   5  selector: 'super',
   6  templateUrl: './super.component.html',
   7})
   8export class Super {
   9  // Keys would be used as tabs for code example
   10  readonly example = {
   11    // import a file as a string
   12    TypeScript: import('./examples/1/index.ts?raw'),
   13    HTML: import('./examples/1/index.html?raw'),
   14  };
   15
   16  readonly inputVariants = ['input 1', 'input 2'];
   17}

   You can use any tool to import a file as a string. For example, you can use Webpack Asset Modules.

   Template:

   1<tui-doc-page
   2  header="Super"
   3  package="SUPER-PACKAGE"
   4  deprecated
   5>
   6  <ng-template pageTab>
   7    <!-- default tab name would be used -->
   8    This would be the content of a first tab
   9
   10    <tui-doc-example
   11      id="basic-example"
   12      heading="Example of usage"
   13      [content]="example"
   14    >
   15      <example-1></example-1>
   16    </tui-doc-example>
   17  </ng-template>
   18
   19  <ng-template pageTab="Documentation">
   20    <tui-doc-demo>
   21      <super-component [input]="input"></super-component>
   22    </tui-doc-demo>
   23    <tui-doc-documentation>
   24      <ng-template
   25        documentationPropertyName="input"
   26        documentationPropertyMode="input"
   27        documentationPropertyType="T"
   28        [documentationPropertyValues]="inputVariants"
   29        [(documentationPropertyValue)]="input"
   30      >
   31        Some input
   32      </ng-template>
   33    </tui-doc-documentation>
   34  </ng-template>
   35</tui-doc-page>