taiga-family · waterplea · Oct 8, 2024 · Oct 7, 2024 · Oct 7, 2024 · Oct 7, 2024
@@ -177,7 +177,7 @@
 
 .t-icon {
  cursor: pointer;
- border: 0.25rem solid transparent;
+ border-width: 0.25rem;
 }
 
 .t-label {

@@ -13,7 +13,7 @@
  margin: 1.25rem;
 
  ::ng-deep tui-icon {
- border: 0.25rem solid transparent;
+ border-width: 0.25rem;
  }
 }
 

@@ -46,7 +46,7 @@
 .t-icon {
  margin-right: 0.5rem;
  color: var(--tui-text-tertiary);
- border: 0.25rem solid transparent;
+ border-width: 0.25rem;
 }
 
 .t-button {

@@ -156,5 +156,5 @@
 }
 
 .t-icon {
- border: 0.25rem solid transparent;
+ border-width: 0.25rem;
 }
@@ -43,6 +43,7 @@ export const TUI_USED_ICONS = [
  '@tui.x',
  '@tui.chevron-right',
  '@tui.chevron-left',
+ '@tui.ellipsis',
  '@tui.minus',
  '@tui.file',
  '@tui.trash',

@@ -4,7 +4,5 @@ li {
 }
 
 tui-icon {
- inline-size: 1.5rem;
- block-size: 1.5rem;
- border: 0.25rem solid transparent;
+ border-width: 0.25rem;
 }
@@ -1,45 +1,103 @@
-<tui-breadcrumbs [style.color]="'red'">
- <button
- *tuiItem
- appearance="secondary"
- iconStart="@tui.ellipsis"
- size="xs"
- tuiDropdownOpen
- tuiIconButton
- type="button"
- [tuiDropdown]="content"
- >
- More
- </button>
- <ng-template #content>
- <tui-data-list>
+<h3 tuiTitle>
+ <strong>Truncate</strong>
+ <span tuiSubtitle>
+ Using
+ <code>.text-truncate()</code>
+ mixin
+ </span>
+</h3>
+<tui-breadcrumbs>
+ <ng-container *ngFor="let item of items; let last = last">
+ <button
+ *tuiItem
+ tuiHintOverflow
+ tuiLink
+ type="button"
+ class="link"
+ [class.link_last]="last"
+ >
+ {{ item }}
+ </button>
+ </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+ <strong>Fade</strong>
+ <span tuiSubtitle>
+ Combining
+ <code>.text-truncate()</code>
+ mixin with
+ <code>
+ <a
+ tuiLink
+ [routerLink]="fade"
+ >
+ Fade
+ </a>
+ </code>
+ directive
+ </span>
+</h3>
+<tui-breadcrumbs>
+ <ng-container *ngFor="let item of items; let last = last">
+ <button
+ *tuiItem
+ tuiFade
+ tuiHintOverflow
+ tuiLink
+ type="button"
+ class="link"
+ [class.link_last]="last"
+ >
+ {{ item }}
+ </button>
+ </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+ <strong>Scroll</strong>
+ <span tuiSubtitle>
+ Putting
+ <code>
  <a
- *tuiRepeatTimes="let index of items.length - max"
- tuiOption
- [href]="items[index]?.link"
+ tuiLink
+ [routerLink]="fade"
  >
- {{ items[index]?.caption }}
+ Fade
  </a>
- </tui-data-list>
- </ng-template>
- <ng-container *tuiRepeatTimes="let index of max">
- <a
+ </code>
+ directive on entire component
+ </span>
+</h3>
+<tui-breadcrumbs tuiFade>
+ <ng-container *ngFor="let item of items; let last = last">
+ <button
+ *tuiItem
+ tuiLink
+ type="button"
+ [class.link_last]="last"
+ >
+ {{ item }}
+ </button>
+ </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+ <strong>Collapse</strong>
+ <span tuiSubtitle>
+ Using
+ <code>itemsLimit: number</code>
+ </span>
+</h3>
+<tui-breadcrumbs [itemsLimit]="10">
+ <ng-container *ngFor="let item of items; let last = last">
+ <button
  *tuiItem
- appearance="link"
  tuiLink
- [href]="items[index + items.length - max]?.link"
+ type="button"
+ [class.link_last]="last"
  >
- {{ items[index + items.length - max]?.caption }}
- </a>
+ {{ item }}
+ </button>
  </ng-container>
 </tui-breadcrumbs>
-<p>
- <tui-input-number
- [max]="4"
- [min]="2"
- [step]="1"
- [(ngModel)]="max"
- >
- Max tabs
- </tui-input-number>
-</p>
@@ -5,11 +5,16 @@
  max-inline-size: 30rem;
 }
 
-[tuiLink]:last-child {
- font-weight: bold;
- color: var(--tui-text-primary);
+hr,
+h3 {
+ margin: 1rem 0;
 }
 
 .link {
  .text-truncate();
+
+ &_last {
+ font-weight: bold;
+ color: var(--tui-text-primary);
+ }
 }
@@ -1,58 +1,37 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiItem, TuiRepeatTimes} from '@taiga-ui/cdk';
-import {TuiButton, TuiDataList, TuiDropdown, TuiLink} from '@taiga-ui/core';
-import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
-import {TuiInputNumberModule} from '@taiga-ui/legacy';
+import {DemoRoute} from '@demo/routes';
+import {TuiItem} from '@taiga-ui/cdk';
+import {TuiHint, TuiLink, TuiTitle} from '@taiga-ui/core';
+import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit';
 
 @Component({
  standalone: true,
  imports: [
- FormsModule,
  TuiBreadcrumbs,
- TuiButton,
- TuiDataList,
- TuiDropdown,
- TuiInputNumberModule,
  TuiItem,
  TuiLink,
- TuiRepeatTimes,
+ NgForOf,
+ TuiFade,
+ TuiHint,
+ TuiTitle,
+ RouterLink,
  ],
  templateUrl: './index.html',
+ styleUrls: ['./index.less'],
  encapsulation,
  changeDetection,
- providers: [
- tuiBreadcrumbsOptionsProvider({
- icon: '@tui.arrow-right',
- size: 'l',
- }),
- ],
+ providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})],
 })
 export default class Example {
+ protected readonly fade = DemoRoute.Fade;
  protected readonly items = [
- {
- caption: 'Open Source',
- link: 'https:',
- },
- {
- caption: 'Angular',
- link: 'https:/topics/angular',
- },
- {
- caption: 'Taiga UI',
- link: 'https:/taiga-family/taiga-ui',
- },
- {
- caption: 'Components',
- link: 'https://taiga-ui.dev',
- },
- {
- caption: 'Breadcrumbs',
- link: 'https://taiga-ui.dev/navigation/breadcrumbs',
- },
+ 'First item',
+ 'Very very long second item that must overflow',
+ 'Third item',
+ 'One last super long item that is never gonna fit',
  ];
-
- protected max = 4;
 }