Taiga UI 5.0 is out!

Pager KIT

Examples API GitHub

On this page

Basic 

    
      
    

      
      
    

  
    
      <tui-pager
    [count]="count"
    [index]="index"
/>

<div class="tui-space_top-3">
    <button
        size="xs"
        tuiButton
        type="button"
        (click)="prev()"
    >
        prev
    </button>
    <button
        size="xs"
        tuiButton
        type="button"
        class="tui-space_left-3"
        (click)="next()"
    >
        next
    </button>
</div>

Icons 

    
      
    

      
      
    

  
    
      <tui-pager
    [count]="count"
    [index]="activeIndex"
    [valueContent]="content"
/>

<ng-template
    #content
    let-index
>
    @if (index === count - 2) {
        <tui-icon icon="@tui.view" />
    }

    @if (index === count - 1) {
        <tui-icon icon="@tui.square-plus" />
    }
</ng-template>

<div class="tui-space_top-3">
    <button
        size="xs"
        tuiButton
        type="button"
        (click)="prev()"
    >
        prev
    </button>
    <button
        size="xs"
        tuiButton
        type="button"
        class="tui-space_left-3"
        (click)="next()"
    >
        next
    </button>
</div>

Dynamic width 

    
      
    

      
      
    

  
    
      <tui-pager
    [count]="count"
    [index]="activeIndex()"
    [valueContent]="content"
/>

<ng-template
    #content
    let-index
>
    <progress
        max="100"
        size="s"
        tuiProgressBar
        class="progress"
        [class.progress_active]="activeIndex() === index"
        [value]="activeIndex() === index | tuiMapper: toProgress | async"
    ></progress>
</ng-template>

<div class="tui-space_top-3">
    <button
        size="xs"
        tuiButton
        type="button"
        (click)="prev()"
    >
        prev
    </button>
    <button
        size="xs"
        tuiButton
        type="button"
        class="tui-space_left-3"
        (click)="next()"
    >
        next
    </button>
</div>

    

      
      
    

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

.progress {
    .transition(~'color, inline-size');

    inline-size: 1rem;

    &:not(&_active) {
        inline-size: 0.5rem;
        color: transparent;
    }
}
GitHub StackBlitz