-
Notifications
You must be signed in to change notification settings - Fork 474
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(experimental): add
tuiCardLarge
- Loading branch information
Showing
92 changed files
with
1,637 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| [tuiCardLarge] { | ||
| &[data-space='normal'] { | ||
| --t-padding: 1.25rem; | ||
| --t-gap: 1.25rem; | ||
| } | ||
|
|
||
| &[data-space='compact'] { | ||
| --t-padding: 1rem; | ||
| --t-gap: 1rem; | ||
| --t-comp: -0.125rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,6 +29,7 @@ | |
|
|
||
| .appearance-hover({ | ||
| background: var(--tui-clear); | ||
| cursor: pointer; | ||
| --t-bs: var(--tui-base-05); | ||
| }); | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
projects/demo/src/modules/experimental/card-large/card-large.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import {Component} from '@angular/core'; | ||
| import {changeDetection} from '@demo/emulate/change-detection'; | ||
| import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc'; | ||
|
|
||
| @Component({ | ||
| selector: 'example-card', | ||
| templateUrl: './card-large.template.html', | ||
| changeDetection, | ||
| }) | ||
| export class ExampleTuiCardLargeComponent { | ||
| readonly exampleModule: TuiRawLoaderContent = import( | ||
| './examples/import/import-module.md?raw' | ||
| ); | ||
|
|
||
| readonly exampleHtml: TuiRawLoaderContent = import( | ||
| './examples/import/insert-template.md?raw' | ||
| ); | ||
|
|
||
| readonly example1: TuiDocExample = { | ||
| HTML: import('./examples/1/index.html?raw'), | ||
| LESS: import('./examples/1/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example2: TuiDocExample = { | ||
| HTML: import('./examples/2/index.html?raw'), | ||
| }; | ||
|
|
||
| readonly example3: TuiDocExample = { | ||
| HTML: import('./examples/3/index.html?raw'), | ||
| LESS: import('./examples/3/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example4: TuiDocExample = { | ||
| HTML: import('./examples/4/index.html?raw'), | ||
| LESS: import('./examples/4/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example5: TuiDocExample = { | ||
| HTML: import('./examples/5/index.html?raw'), | ||
| }; | ||
|
|
||
| readonly example6: TuiDocExample = { | ||
| HTML: import('./examples/6/index.html?raw'), | ||
| LESS: import('./examples/6/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example7: TuiDocExample = { | ||
| HTML: import('./examples/7/index.html?raw'), | ||
| LESS: import('./examples/7/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example8: TuiDocExample = { | ||
| HTML: import('./examples/8/index.html?raw'), | ||
| }; | ||
|
|
||
| readonly example9: TuiDocExample = { | ||
| HTML: import('./examples/9/index.html?raw'), | ||
| }; | ||
|
|
||
| readonly example10: TuiDocExample = { | ||
| HTML: import('./examples/10/index.html?raw'), | ||
| LESS: import('./examples/10/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example11: TuiDocExample = { | ||
| HTML: import('./examples/11/index.html?raw'), | ||
| LESS: import('./examples/11/index.less?raw'), | ||
| }; | ||
|
|
||
| readonly example12: TuiDocExample = { | ||
| HTML: import('./examples/12/index.html?raw'), | ||
| }; | ||
| } |
100 changes: 100 additions & 0 deletions
100
projects/demo/src/modules/experimental/card-large/card-large.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import {CommonModule} from '@angular/common'; | ||
| import {NgModule} from '@angular/core'; | ||
| import {FormsModule} from '@angular/forms'; | ||
| import {tuiGetDocModules} from '@taiga-ui/addon-doc'; | ||
| import {TuiRippleModule} from '@taiga-ui/addon-mobile'; | ||
| import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk'; | ||
| import { | ||
| TuiAppearanceDirective, | ||
| TuiDataListModule, | ||
| TuiHintModule, | ||
| TuiHostedDropdownModule, | ||
| TuiLinkModule, | ||
| TuiNotificationModule, | ||
| TuiScrollbarModule, | ||
| TuiSvgModule, | ||
| } from '@taiga-ui/core'; | ||
| import { | ||
| TuiAutoColorModule, | ||
| TuiAvatarModule, | ||
| TuiAvatarStackModule, | ||
| TuiButtonCloseModule, | ||
| TuiButtonModule, | ||
| TuiCardModule, | ||
| TuiCellModule, | ||
| TuiFadeModule, | ||
| TuiFallbackSrcModule, | ||
| TuiHeaderDirective, | ||
| TuiIconModule, | ||
| TuiInitialsModule, | ||
| TuiSurfaceModule, | ||
| TuiThumbnailCardModule, | ||
| TuiTitleModule, | ||
| } from '@taiga-ui/experimental'; | ||
| import {TuiBadgeDirective} from '@taiga-ui/kit'; | ||
|
|
||
| import {ExampleTuiCardLargeComponent} from './card-large.component'; | ||
| import {TuiCardLargeExample1} from './examples/1'; | ||
| import {TuiCardLargeExample2} from './examples/2'; | ||
| import {TuiCardLargeExample3} from './examples/3'; | ||
| import {TuiCardLargeExample4} from './examples/4'; | ||
| import {TuiCardLargeExample5} from './examples/5'; | ||
| import {TuiCardLargeExample6} from './examples/6'; | ||
| import {TuiCardLargeExample7} from './examples/7'; | ||
| import {TuiCardLargeExample8} from './examples/8'; | ||
| import {TuiCardLargeExample9} from './examples/9'; | ||
| import {TuiCardLargeExample10} from './examples/10'; | ||
| import {TuiCardLargeExample11} from './examples/11'; | ||
| import {TuiCardLargeExample12} from './examples/12'; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| TuiAvatarStackModule, | ||
| TuiAutoColorModule, | ||
| TuiInitialsModule, | ||
| TuiNotificationModule, | ||
| TuiFallbackSrcModule, | ||
| TuiFadeModule, | ||
| TuiCardModule, | ||
| TuiSurfaceModule, | ||
| TuiSvgModule, | ||
| TuiBadgeDirective, | ||
| TuiTitleModule, | ||
| TuiAvatarModule, | ||
| TuiScrollbarModule, | ||
| TuiHintModule, | ||
| FormsModule, | ||
| TuiRippleModule, | ||
| TuiThumbnailCardModule, | ||
| TuiIconModule, | ||
| TuiButtonModule, | ||
| TuiHeaderDirective, | ||
| TuiCellModule, | ||
| tuiGetDocModules(ExampleTuiCardLargeComponent), | ||
| TuiRepeatTimesModule, | ||
| TuiDataListModule, | ||
| TuiHostedDropdownModule, | ||
| TuiButtonCloseModule, | ||
| TuiPlatformModule, | ||
| TuiLinkModule, | ||
| TuiAppearanceDirective, | ||
| ], | ||
| declarations: [ | ||
| ExampleTuiCardLargeComponent, | ||
| TuiCardLargeExample1, | ||
| TuiCardLargeExample2, | ||
| TuiCardLargeExample3, | ||
| TuiCardLargeExample4, | ||
| TuiCardLargeExample5, | ||
| TuiCardLargeExample6, | ||
| TuiCardLargeExample7, | ||
| TuiCardLargeExample8, | ||
| TuiCardLargeExample9, | ||
| TuiCardLargeExample10, | ||
| TuiCardLargeExample11, | ||
| TuiCardLargeExample12, | ||
| ], | ||
| exports: [ExampleTuiCardLargeComponent], | ||
| }) | ||
| export class ExampleTuiCardLargeModule {} |
127 changes: 127 additions & 0 deletions
127
projects/demo/src/modules/experimental/card-large/card-large.template.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <tui-doc-page | ||
| header="CardLarge" | ||
| package="EXPERIMENTAL" | ||
| type="components" | ||
| > | ||
| <ng-template pageTab> | ||
| <tui-doc-example | ||
| id="basic" | ||
| heading="Basic" | ||
| [content]="example1" | ||
| > | ||
| <tui-card-large-example-1></tui-card-large-example-1> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="cell-avatar" | ||
| heading="Avatar" | ||
| [content]="example2" | ||
| > | ||
| <tui-card-large-example-2></tui-card-large-example-2> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="single" | ||
| heading="Single item" | ||
| [content]="example3" | ||
| > | ||
| <tui-card-large-example-3></tui-card-large-example-3> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="cards-list" | ||
| heading="Cards List" | ||
| [content]="example4" | ||
| > | ||
| <tui-card-large-example-4></tui-card-large-example-4> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="cell-list" | ||
| heading="Cell List" | ||
| [content]="example5" | ||
| > | ||
| <tui-card-large-example-5></tui-card-large-example-5> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="cell-list-columns" | ||
| heading="Cell List (2 columns)" | ||
| [content]="example6" | ||
| [fullsize]="true" | ||
| > | ||
| <tui-card-large-example-6></tui-card-large-example-6> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="cell-list-headless" | ||
| heading="Cell List (actions)" | ||
| [content]="example7" | ||
| > | ||
| <tui-card-large-example-7></tui-card-large-example-7> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="align" | ||
| heading="Footer alignment" | ||
| [content]="example8" | ||
| > | ||
| <tui-card-large-example-8></tui-card-large-example-8> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="map" | ||
| heading="Map" | ||
| [content]="example9" | ||
| [fullsize]="true" | ||
| > | ||
| <tui-card-large-example-9></tui-card-large-example-9> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="image" | ||
| heading="Image" | ||
| [content]="example10" | ||
| > | ||
| <tui-card-large-example-10></tui-card-large-example-10> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="image-dark" | ||
| heading="Image-dark" | ||
| [content]="example11" | ||
| > | ||
| <tui-card-large-example-11></tui-card-large-example-11> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="paddings" | ||
| heading="Paddings and radiuses" | ||
| [content]="example12" | ||
| > | ||
| <tui-card-large-example-12></tui-card-large-example-12> | ||
| </tui-doc-example> | ||
| </ng-template> | ||
|
|
||
| <ng-template pageTab="Setup"> | ||
| <ol class="b-demo-steps"> | ||
| <li> | ||
| <p>Import module:</p> | ||
|
|
||
| <tui-doc-code | ||
| filename="my.module.ts" | ||
| [code]="exampleModule" | ||
| ></tui-doc-code> | ||
| </li> | ||
|
|
||
| <li> | ||
| <p>Add to the template:</p> | ||
|
|
||
| <tui-doc-code | ||
| filename="my.component.html" | ||
| [code]="exampleHtml" | ||
| ></tui-doc-code> | ||
| </li> | ||
| </ol> | ||
| </ng-template> | ||
| </tui-doc-page> |
Oops, something went wrong.