3.76.0 • Published 13 days ago

@taiga-ui/addon-doc v3.76.0

Weekly downloads
122
License
Apache-2.0
Repository
github
Last release
13 days ago

Taiga UI — Doc

npm version npm bundle size Discord

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:

    <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:

    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 {}
  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

  4. Configure routing:

    import {Routes} from '@angular/router';
    
    const appRoutes: Routes = [
      {
        path: 'super-page',
        loadChildren: async () => (await import('../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 to TUI_DOC_TITLE for browser tab title when navigating to that route.

  5. Create pages.

    Module:

    import {NgModule} from '@angular/core';
    import {RouterModule} from '@angular/router';
    import {tuiGenerateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
    import {SuperComponent} from './super.component';
    
    @NgModule({
      imports: [TuiAddonDocModule, RouterModule.forChild(tuiGenerateRoutes(SuperComponent))],
      declarations: [SuperComponent],
      exports: [SuperComponent],
    })
    export class SuperModule {}

    Component:

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'super-component',
      templateUrl: './account.template.html',
    })
    export class SuperComponent {
      // Keys would be used as tabs for code example
      readonly example = {
        // import a file as a string
        TypeScript: import('./examples/1/index.ts?raw'),
        HTML: import('./examples/1/index.html?raw'),
      };
    
      readonly inputVariants = ['input 1', 'input 2'];
    }

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

    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>
3.76.0

13 days ago

3.75.0

20 days ago

3.74.0

27 days ago

3.73.0

1 month ago

3.72.0

1 month ago

3.71.0

2 months ago

3.70.0

2 months ago

3.69.0

2 months ago

3.68.0

2 months ago

3.67.0

3 months ago

3.66.0

3 months ago

3.65.0

3 months ago

3.64.0

3 months ago

3.63.0

3 months ago

3.62.0

4 months ago

3.61.0

4 months ago

3.60.0

5 months ago

3.59.0

5 months ago

3.58.0

5 months ago

3.56.0

5 months ago

3.57.0

5 months ago

3.50.0

7 months ago

3.40.0

9 months ago

3.51.0

6 months ago

2.99.0

8 months ago

2.98.0

8 months ago

2.97.0

9 months ago

3.38.0

10 months ago

3.49.0

7 months ago

3.49.1

7 months ago

2.96.0

9 months ago

3.39.0

9 months ago

3.39.1

9 months ago

2.95.0

9 months ago

3.36.0

10 months ago

3.36.1

10 months ago

3.36.2

10 months ago

3.35.0

10 months ago

3.47.0

7 months ago

2.94.1

10 months ago

2.94.0

10 months ago

3.37.0

10 months ago

3.48.0

7 months ago

3.45.0

8 months ago

3.46.0

7 months ago

3.43.0

8 months ago

3.54.0

6 months ago

3.44.0

8 months ago

3.44.1

8 months ago

3.55.0

6 months ago

3.41.0

9 months ago

3.41.1

9 months ago

3.52.0

6 months ago

3.42.0

8 months ago

3.42.1

8 months ago

3.53.0

6 months ago

3.34.0

10 months ago

3.33.1

11 months ago

2.93.0

11 months ago

3.33.0

11 months ago

2.89.0

11 months ago

2.92.0

11 months ago

2.91.0

11 months ago

3.31.0

11 months ago

3.31.1

11 months ago

2.90.0

11 months ago

3.32.0

11 months ago

3.30.0

11 months ago

2.88.0

12 months ago

2.87.0

1 year ago

3.28.0

12 months ago

3.29.1

11 months ago

3.29.0

11 months ago

3.29.2

11 months ago

3.26.0

1 year ago

3.27.0

12 months ago

3.24.0

1 year ago

2.83.0

1 year ago

2.79.0

1 year ago

2.82.0

1 year ago

3.25.0

1 year ago

3.22.0

1 year ago

2.81.0

1 year ago

3.23.1

1 year ago

3.23.0

1 year ago

2.80.0

1 year ago

3.20.0

1 year ago

3.21.0

1 year ago

2.86.0

1 year ago

2.85.0

1 year ago

2.84.0

1 year ago

2.78.0

1 year ago

3.19.0

1 year ago

2.77.0

1 year ago

3.18.0

1 year ago

2.76.0

1 year ago

3.17.0

1 year ago

2.72.0

1 year ago

3.12.1

1 year ago

3.12.0

1 year ago

2.71.0

1 year ago

2.75.0

1 year ago

3.14.0

1 year ago

3.13.0

1 year ago

2.74.0

1 year ago

3.15.0

1 year ago

2.70.0

1 year ago

2.73.0

1 year ago

3.16.0

1 year ago

2.69.0

1 year ago

3.6.0

2 years ago

2.64.0

2 years ago

2.68.0

2 years ago

3.5.0

2 years ago

2.67.0

2 years ago

3.9.0

2 years ago

3.8.0

2 years ago

3.10.0

1 year ago

2.66.0

2 years ago

2.66.1

2 years ago

3.11.0

1 year ago

3.7.1

2 years ago

3.7.0

2 years ago

2.65.0

2 years ago

3.2.0

2 years ago

3.1.0

2 years ago

2.63.0

2 years ago

3.4.0

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.62.2

2 years ago

2.62.3

2 years ago

2.62.4

2 years ago

2.62.0

2 years ago

2.62.1

2 years ago

3.3.0

2 years ago

3.0.0-rc.6

2 years ago

3.0.0-rc.5

2 years ago

3.0.0-rc.4

2 years ago

3.0.0-rc.2

2 years ago

3.0.0-rc.1

2 years ago

3.0.0-rc.3

2 years ago

2.61.0

2 years ago

2.53.0

2 years ago

2.57.0

2 years ago

2.60.0

2 years ago

2.49.1

2 years ago

2.49.2

2 years ago

2.49.0

2 years ago

2.56.0

2 years ago

2.52.0

2 years ago

2.55.0

2 years ago

2.51.0

2 years ago

2.51.1

2 years ago

2.59.0

2 years ago

2.59.1

2 years ago

2.54.0

2 years ago

2.54.1

2 years ago

2.50.0

2 years ago

2.50.1

2 years ago

2.50.2

2 years ago

3.0.0-rc.0

2 years ago

2.58.0

2 years ago

2.58.1

2 years ago

2.46.0

2 years ago

2.48.0

2 years ago

2.45.0

2 years ago

2.47.0

2 years ago

2.44.0

2 years ago

2.43.0

2 years ago

2.41.1

2 years ago

2.41.0

2 years ago

2.42.0

2 years ago

2.40.0

2 years ago

2.39.0

2 years ago

2.38.0

2 years ago

2.37.1

2 years ago

2.37.0

2 years ago

2.36.0

2 years ago

2.32.0

2 years ago

2.34.0

2 years ago

2.30.0

2 years ago

2.31.0

2 years ago

2.33.0

2 years ago

2.35.0

2 years ago

2.29.0

2 years ago

2.27.1

2 years ago

2.25.0

2 years ago

2.27.0

2 years ago

2.28.0

2 years ago

2.24.0

2 years ago

2.26.0

2 years ago

2.23.0

2 years ago

2.22.0

3 years ago

2.21.0

3 years ago

2.20.0

3 years ago

2.19.0

3 years ago

2.18.0

3 years ago

2.16.0-fixed.2

3 years ago

2.17.0

3 years ago

2.16.0-fixed

3 years ago

2.16.3

3 years ago

2.16.1

3 years ago

2.16.2

3 years ago

2.16.0

3 years ago

2.15.0

3 years ago

2.14.0

3 years ago

2.13.1

3 years ago

2.13.0

3 years ago

2.12.0

3 years ago

2.11.2

3 years ago

2.11.0

3 years ago

2.11.1

3 years ago

2.10.1

3 years ago

2.10.0

3 years ago

2.9.0

3 years ago

2.9.1

3 years ago

2.8.1

3 years ago

2.8.0

3 years ago

2.8.2

3 years ago

2.7.0

3 years ago

2.6.2

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.5.0

3 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.6.5

3 years ago

1.6.4

3 years ago

1.6.3

3 years ago

1.6.2

3 years ago

1.6.0

3 years ago