-
Notifications
You must be signed in to change notification settings - Fork 476
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(demo): update appearances customization page (#8761)
Co-authored-by: taiga-family-bot <[email protected]>
- Loading branch information
1 parent
f73ae00
commit ae3ea2d
Showing
15 changed files
with
179 additions
and
146 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
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
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
30 changes: 30 additions & 0 deletions
30
projects/demo/src/modules/customization/appearances/examples/1/index.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,30 @@ | ||
| import {Component, signal, ViewEncapsulation} from '@angular/core'; | ||
| import {FormsModule} from '@angular/forms'; | ||
| import { | ||
| TuiButton, | ||
| tuiButtonOptionsProvider, | ||
| TuiTextfield, | ||
| tuiTextfieldOptionsProvider, | ||
| } from '@taiga-ui/core'; | ||
| import {TuiCheckbox, tuiCheckboxOptionsProvider} from '@taiga-ui/kit'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'tui-wrapper-example-1', | ||
| imports: [FormsModule, TuiCheckbox, TuiButton, TuiTextfield], | ||
| templateUrl: './index.html', | ||
| styleUrls: ['./index.less'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| providers: [ | ||
| tuiButtonOptionsProvider({appearance: 'material-button', size: 's'}), | ||
| tuiCheckboxOptionsProvider({appearance: 'material-checkbox'}), | ||
| tuiTextfieldOptionsProvider({ | ||
| appearance: signal('material-textfield'), | ||
| cleaner: signal(false), | ||
| }), | ||
| ], | ||
| }) | ||
| export class TuiWrapperExample1 { | ||
| protected value = ''; | ||
| protected checkbox = false; | ||
| } |
75 changes: 75 additions & 0 deletions
75
projects/demo/src/modules/customization/appearances/index.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,75 @@ | ||
| <tui-doc-page header="Appearances"> | ||
| <p> | ||
| Most Taiga UI components rely on | ||
| <a | ||
| tuiLink | ||
| [routerLink]="routes.Appearance" | ||
| > | ||
| Appearance | ||
| </a> | ||
| directive to represent their interactive state — you will find | ||
| <code>appearance</code> | ||
| input on many components, such as | ||
| <a | ||
| tuiLink | ||
| [routerLink]="routes.Button" | ||
| > | ||
| Button | ||
| </a> | ||
| , | ||
| <a | ||
| tuiLink | ||
| [routerLink]="routes.Chip" | ||
| > | ||
| Chip | ||
| </a> | ||
| , | ||
| <a | ||
| tuiLink | ||
| [routerLink]="routes.Notification" | ||
| > | ||
| Notification | ||
| </a> | ||
| etc. | ||
| </p> | ||
| <p> | ||
| When you include Taiga UI theme what you do is define light and dark mode values for CSS | ||
| <a | ||
| tuiLink | ||
| [routerLink]="routes.Variables" | ||
| > | ||
| variables | ||
| </a> | ||
| and make built-in appearances, such as | ||
| <code>primary</code> | ||
| or | ||
| <code>outline</code> | ||
| , available to use in components. | ||
| </p> | ||
| <p> | ||
| You can easily create your own appearances with the help of mixins (both LESS and SCSS) to define style rules | ||
| for particular states: | ||
| </p> | ||
| <ul> | ||
| <li *ngFor="let item of mixins"> | ||
| <tui-doc-copy | ||
| class="var" | ||
| [cdkCopyToClipboard]="item" | ||
| > | ||
| <code>{{ item }}</code> | ||
| </tui-doc-copy> | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| Don't forget to import | ||
| <code>@import '@taiga-ui/core/styles/taiga-ui-local';</code> | ||
| </p> | ||
|
|
||
| <tui-doc-example | ||
| id="material" | ||
| heading="Imitate material" | ||
| [content]="example1" | ||
| > | ||
| <tui-wrapper-example-1 /> | ||
| </tui-doc-example> | ||
| </tui-doc-page> |
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
32 changes: 0 additions & 32 deletions
32
projects/demo/src/modules/customization/wrapper/examples/1/index.ts
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.