diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 50654d762791..4eca2812033c 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -207,6 +207,14 @@ export const ROUTES: Routes = [ title: `BlockStatus`, }, }, + { + path: `layout/title`, + loadChildren: async () => + (await import(`../directives/title/title.module`)).ExampleTuiTitleModule, + data: { + title: `Title`, + }, + }, { path: `experimental/avatar`, loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 8e20047c1b32..830214ca1561 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -172,6 +172,12 @@ export const pages: TuiDocPages = [ keywords: `блок, статус, block, status, block-status, blockstatus, layout`, route: `/layout/block-status`, }, + { + section: `Layout`, + title: `Title`, + keywords: `subtitle, заголовок, caption, description, подзаголовок`, + route: `/layout/title`, + }, { section: `Components`, title: `Button`, diff --git a/projects/demo/src/modules/directives/title/examples/1/index.html b/projects/demo/src/modules/directives/title/examples/1/index.html new file mode 100644 index 000000000000..ecfaef7460dc --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/1/index.html @@ -0,0 +1,17 @@ +

I am a title

+ +

+ I am a title +
I'm a subtitle
+

+ +

+
Caption
+ I am a title +

+ +

+
Caption
+ I am a title +
I'm a subtitle
+

diff --git a/projects/demo/src/modules/directives/title/examples/1/index.less b/projects/demo/src/modules/directives/title/examples/1/index.less new file mode 100644 index 000000000000..dc3140046ad7 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/1/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 2rem; +} diff --git a/projects/demo/src/modules/directives/title/examples/1/index.ts b/projects/demo/src/modules/directives/title/examples/1/index.ts new file mode 100644 index 000000000000..2175117da266 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/1/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-title-example-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiTitleExample1 {} diff --git a/projects/demo/src/modules/directives/title/examples/2/index.html b/projects/demo/src/modules/directives/title/examples/2/index.html new file mode 100644 index 000000000000..a022043fd460 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/2/index.html @@ -0,0 +1,15 @@ +

+
Caption
+ I am a title +
I'm a subtitle
+

+ +

+
Caption
+ I am a title +

+ +

+ I am a title +
I'm a subtitle
+

diff --git a/projects/demo/src/modules/directives/title/examples/2/index.less b/projects/demo/src/modules/directives/title/examples/2/index.less new file mode 100644 index 000000000000..dc3140046ad7 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/2/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 2rem; +} diff --git a/projects/demo/src/modules/directives/title/examples/2/index.ts b/projects/demo/src/modules/directives/title/examples/2/index.ts new file mode 100644 index 000000000000..262fab7c000b --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/2/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-title-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiTitleExample2 {} diff --git a/projects/demo/src/modules/directives/title/examples/3/index.html b/projects/demo/src/modules/directives/title/examples/3/index.html new file mode 100644 index 000000000000..272d87ceb271 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/3/index.html @@ -0,0 +1,36 @@ +

+ I am a title +
+ I'm a subtitle +
+

+ + + Taiga UI — GitHub +
+ Drop us a star! +
+ + + diff --git a/projects/demo/src/modules/directives/title/examples/3/index.less b/projects/demo/src/modules/directives/title/examples/3/index.less new file mode 100644 index 000000000000..1ac9943dc392 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/3/index.less @@ -0,0 +1,14 @@ +:host { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.flex { + display: flex; + gap: 0.5rem; + + [tuiSubtitle] { + color: var(--tui-positive); + } +} diff --git a/projects/demo/src/modules/directives/title/examples/3/index.ts b/projects/demo/src/modules/directives/title/examples/3/index.ts new file mode 100644 index 000000000000..726df980d172 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/3/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-title-example-3', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiTitleExample3 {} diff --git a/projects/demo/src/modules/directives/title/examples/import/import-module.md b/projects/demo/src/modules/directives/title/examples/import/import-module.md new file mode 100644 index 000000000000..1bcbc128db53 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/import/import-module.md @@ -0,0 +1,14 @@ +```ts +import {TuiTitleModule} from '@taiga-ui/layout'; + +// ... + +@NgModule({ + imports: [ + // ... + TuiTitleModule, + ], + // ... +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/directives/title/examples/import/insert-template.md b/projects/demo/src/modules/directives/title/examples/import/insert-template.md new file mode 100644 index 000000000000..d490977b31c0 --- /dev/null +++ b/projects/demo/src/modules/directives/title/examples/import/insert-template.md @@ -0,0 +1,16 @@ +```html + + +

Title

+ Description + + +``` diff --git a/projects/demo/src/modules/directives/title/title.component.ts b/projects/demo/src/modules/directives/title/title.component.ts new file mode 100644 index 000000000000..a71aea710c22 --- /dev/null +++ b/projects/demo/src/modules/directives/title/title.component.ts @@ -0,0 +1,29 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDocExample} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-title', + templateUrl: './title.template.html', + changeDetection, +}) +export class ExampleTuiTitleComponent { + readonly exampleModule = import('./examples/import/import-module.md?raw'); + readonly exampleHtml = import('./examples/import/insert-template.md?raw'); + + readonly example1: TuiDocExample = { + TypeScript: import('./examples/1/index.ts?raw'), + HTML: import('./examples/1/index.html?raw'), + }; + + readonly example2: TuiDocExample = { + TypeScript: import('./examples/2/index.ts?raw'), + HTML: import('./examples/3/index.html?raw'), + }; + + readonly example3: TuiDocExample = { + TypeScript: import('./examples/3/index.ts?raw'), + HTML: import('./examples/3/index.html?raw'), + LESS: import('./examples/3/index.less?raw'), + }; +} diff --git a/projects/demo/src/modules/directives/title/title.module.ts b/projects/demo/src/modules/directives/title/title.module.ts new file mode 100644 index 000000000000..fa84c491296d --- /dev/null +++ b/projects/demo/src/modules/directives/title/title.module.ts @@ -0,0 +1,31 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiLinkModule, TuiWrapperModule} from '@taiga-ui/core'; +import {TuiAvatarModule, TuiCheckboxModule} from '@taiga-ui/experimental'; +import {TuiTitleModule} from '@taiga-ui/layout'; + +import {TuiTitleExample1} from './examples/1'; +import {TuiTitleExample2} from './examples/2'; +import {TuiTitleExample3} from './examples/3'; +import {ExampleTuiTitleComponent} from './title.component'; + +@NgModule({ + imports: [ + CommonModule, + TuiTitleModule, + tuiGetDocModules(ExampleTuiTitleComponent), + TuiLinkModule, + TuiCheckboxModule, + TuiWrapperModule, + TuiAvatarModule, + ], + declarations: [ + ExampleTuiTitleComponent, + TuiTitleExample1, + TuiTitleExample2, + TuiTitleExample3, + ], + exports: [ExampleTuiTitleComponent], +}) +export class ExampleTuiTitleModule {} diff --git a/projects/demo/src/modules/directives/title/title.template.html b/projects/demo/src/modules/directives/title/title.template.html new file mode 100644 index 000000000000..93d7457089c9 --- /dev/null +++ b/projects/demo/src/modules/directives/title/title.template.html @@ -0,0 +1,55 @@ + + +

A directive for title with optional subtitle

+ + + + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/avatar/avatar.template.html b/projects/demo/src/modules/experimental/avatar/avatar.template.html index a27f4371c19f..fd48af654ba1 100644 --- a/projects/demo/src/modules/experimental/avatar/avatar.template.html +++ b/projects/demo/src/modules/experimental/avatar/avatar.template.html @@ -108,7 +108,7 @@
  1. -

    Import module

    +

    Import module:

    1. -

      Import into a module

      +

      Import module:

      1. -

        Import into a module

        +

        Import module:

        1. -

          Import into a module

          +

          Import module:

          1. -

            Import module

            +

            Import module:

            1. -

              Import module

              +

              Import module:

              1. -

                Import module

                +

                Import module:

                1. -

                  Import into a module

                  +

                  Import module:

                  1. -

                    Import module

                    +

                    Import module: