Taiga UI 5.0 is out!

FluidTypography KIT

GitHub

On this page

A directive that adjusts font size for the text to fit in the container

Text

There is some text in here
    
      
    
    
      <div
    style="resize: horizontal; overflow: hidden; white-space: nowrap; line-height: 2rem; margin-bottom: 1rem"
    tuiFluidTypography
    [textContent]="text"
></div>

<button
    tuiButton
    type="button"
    (click)="randomize()"
>
    Randomize
</button>

    

Textfield

    
      
    
    
      <tui-textfield>
    <input
        placeholder="Type in long value"
        tuiFluidTypography
        tuiInput
        [(ngModel)]="value"
    />
</tui-textfield>

    

Options

    
      
    
    
      <tui-textfield>
    <input
        placeholder="Type in long value"
        tuiInput
        [tuiFluidTypography]="scale()"
        [(ngModel)]="value"
    />
</tui-textfield>

<tui-input-range
    [max]="30"
    [min]="1"
    [ngModel]="range()"
    [style.inset-block-start.rem]="0.5"
    (ngModelChange)="range.set($event)"
>
    Min/Max (converted to pixels)
</tui-input-range>