ScrollWheel EXPERIMENTAL

    
      
    

      
        Copy
      
      
    
  

    
      <tui-scroll-wheel [style.block-size.rem]="20">
    <div
        *tuiItem="let index"
        [style.background]="getHeight(index).toString() | tuiAutoColor"
        [style.block-size.px]="getHeight(index)"
    >
        {{ index }}
    </div>
</tui-scroll-wheel>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-scroll-wheel
    waIntersectionThreshold="0.5"
    [buffer]="50"
    [(index)]="hours"
>
    <ng-template let-index>
        <div [class._current]="index - 2 === hours()">{{ getHours(index) }}</div>
    </ng-template>
</tui-scroll-wheel>
:
<tui-scroll-wheel
    waIntersectionThreshold="0.5"
    [buffer]="50"
    [(index)]="minutes"
>
    <ng-template let-index>
        <div [class._current]="index - 2 === minutes()">{{ getMinutes(index) }}</div>
    </ng-template>
</tui-scroll-wheel>
<p>
    <output>Selected: {{ getHours(hours() + 2) }}:{{ getMinutes(minutes() + 2) }}</output>
</p>

    

      
        Copy
      
      
    
  

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

:host {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    font: var(--tui-typography-heading-h6);
    place-items: center;
}

tui-scroll-wheel {
    block-size: 15rem;
    mask-image: linear-gradient(transparent, black 7.5rem, transparent);
    justify-self: start;

    &:first-child {
        justify-self: end;
    }
}

div {
    .transition(color);

    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 3rem;
    font: var(--tui-typography-heading-h6);
    font-variant: tabular-nums;
    scroll-snap-align: start;
    color: var(--tui-text-tertiary);

    &._current {
        color: var(--tui-text-primary);
    }
}

p {
    grid-column: 1 / -1;
}

    

      
        Copy