Taiga UI 5.0 is out!

Fade KIT

Examples API GitHub

On this page

Directive that uses masking to fade out overflown content

Basic

Single scrollable line with automatic fade on the edges.
I am a very long text that overflows with a single line fade 
    
      
    

      
      
    

  
    
      <tui-scrollbar class="scrollbar">
    <div
        tuiFade
        tuiScrollable
        class="fade"
    >
        I am a very long text that overflows with a single line fade
    </div>
</tui-scrollbar>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.scrollbar {
    inline-size: 20rem;
}

.fade {
    .scrollbar-hidden();

    inline-size: 100%;
    block-size: 2rem;
    font: var(--tui-typography-heading-h6);
    white-space: nowrap;
    overflow: auto;
}

Multiline

Fade on the last line. When applying custom line height, keep in mind that accessible font scaling can be applied. You can account for it using --tui-font-offset CSS variable or TUI_FONT_OFFSET signal DI token.
Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <div
        tuiFade
        tuiFadeHeight="calc(1.25rem + var(--tui-font-offset))"
        tuiFadeOffset="4.5rem"
        class="fade"
        [class.fade_expanded]="expanded"
    >
        Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the
        First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven
        Kingdoms, Breaker of Chains and Mother of Dragons.
        @if (expanded) {
            <button
                tuiLink
                type="button"
                (click)="toggle()"
            >
                Show less
            </button>
        }
    </div>
    <button
        tuiLink
        type="button"
        class="expand"
        [class.expand_hidden]="expanded"
        (click)="toggle()"
    >
        Read more
    </button>
</div>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.wrapper {
    position: relative;
}

.fade {
    .transition(max-block-size);

    max-block-size: calc(3 * (1.25rem + var(--tui-font-offset)));

    &_expanded {
        max-block-size: 15rem;
    }
}

.expand {
    .transition(opacity, visibility);

    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    transition-delay: var(--tui-duration);

    &_hidden {
        opacity: 0;
        visibility: hidden;
    }
}

Vertical

Scrollable vertical container with automatic fade on the edges.
Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. 
    
      
    

      
      
    

  
    
      <tui-scrollbar>
    <div
        tuiFade="vertical"
        tuiScrollable
        class="fade"
    >
        Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the
        First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven
        Kingdoms, Breaker of Chains and Mother of Dragons.
    </div>
</tui-scrollbar>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.fade {
    .scrollbar-hidden();

    inline-size: 17rem;
    block-size: 10rem;
    font: var(--tui-typography-body-l);
    overflow: auto;
}

Hyphens

In multiline mode you can use hyphen CSS rule to avoid long words wrapping to the next line entirely which can cause fade effect to not be visible at all due to last visible line becoming too short.
Use CSS hyphens and declare lang on your html tag so that you don't get a situation where a whole long word is shifted to the new line and you observe no fade effect

Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the pneumonoultramicroscopicsilicovolcanoconiosis Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. 

    
      
    

      
      
    

  
    
      <div tuiNotification>
    Use CSS hyphens and declare
    <code>lang</code>
    on your
    <code>html</code>
    tag so that you don't get a situation where a whole long word is shifted to the new line and you observe no fade
    effect
</div>
<p
    tuiFade
    tuiFadeHeight="1.25rem"
    tuiFadeOffset="4.5rem"
>
    Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the
    pneumonoultramicroscopicsilicovolcanoconiosis Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of
    the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons.
</p>

    

      
      
    

  
    
      [tuiFade] {
    inline-size: 25rem;
    block-size: 2.5rem;
    hyphens: auto;
}

InputChip

3
4
5
Compartmentalization 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    tuiTextfieldSize="s"
>
    <input
        placeholder="Enter"
        tuiInputChip
        [unique]="false"
        [(ngModel)]="value"
    />

    <tui-input-chip *tuiItem />
</tui-textfield>

    

      
      
    

  
    
      [tuiChip] {
    max-inline-size: 6.25rem;
}
GitHub StackBlitz