Taiga UI 5.0 is out!

ItemsWithMore KIT

Examples API GitHub

On this page

Component to hide overflown items behind custom content.

Resize the screen to see extra items disappear

Basic

Hiding excessive items and showing text.
John Cleese
Eric Idle
Michael Palin
Graham Chapman
Terry Gilliam
Terry Jones
and 4 more 
    
      
    

      
      
    

  
    
      <tui-items-with-more [required]="required">
    @for (item of items; track item) {
        <span
            *tuiItem
            appearance="neutral"
            size="s"
            tuiChip
            class="tui-space_right-1"
        >
            {{ item }}
        </span>
    }
    <ng-template
        let-index
        tuiMore
    >
        and {{ getRemaining(index) }} more
    </ng-template>
</tui-items-with-more>

Dropdown

Putting extra items in a dropdown. 
    
      
    

      
      
    

  
    
      <tui-items-with-more
    size="m"
    tuiGroup
    [collapsed]="true"
>
    @for (item of items; track item) {
        <label
            *tuiItem
            appearance=""
            tuiBlock="m"
            [style.border-radius]="'inherit'"
        >
            {{ item }}
            <input
                tuiBlock
                type="checkbox"
                [(ngModel)]="value[$index]"
            />
        </label>
    }
    <ng-template
        let-lastIndex
        tuiMore
    >
        <button
            appearance="outline-grayscale"
            size="m"
            tuiButton
            tuiDropdownAlign="end"
            tuiDropdownAuto
            type="button"
            class="item"
            [tuiDropdown]="dropdown"
        >
            More
            <div tuiBadge>{{ items.length - lastIndex - 1 }}</div>
        </button>
        <ng-template #dropdown>
            <tui-data-list size="l">
                @for (item of items; track item) {
                    @if ($index > lastIndex) {
                        <button
                            tuiOption
                            type="button"
                            (click)="value[$index] = !value[$index]"
                        >
                            {{ item }}
                            <tui-icon
                                icon="@tui.check"
                                class="tui-space_left-2"
                                [class._hidden]="!value[$index]"
                            />
                        </button>
                    }
                }
            </tui-data-list>
        </ng-template>
    </ng-template>
</tui-items-with-more>

    

      
      
    

  
    
      .item {
    border-radius: inherit;
    font-weight: normal;
}

._hidden {
    visibility: hidden;
}

tui-icon {
    inline-size: 1rem;
    block-size: 1rem;
}

Side

Handling excessive items at the beginning of the list. 
    
      
    

      
      
    

  
    
      <tui-items-with-more
    side="start"
    [itemsLimit]="3"
>
    @for (item of items; track item) {
        <ng-container *tuiItem>
            @if (!$first) {
                <tui-icon
                    icon="@tui.chevron-right"
                    [style.font-size.rem]="1"
                    [style.opacity]="0.25"
                    [style.width.rem]="1.5"
                />
            }
            <button
                appearance="flat"
                size="xs"
                tuiButton
                type="button"
            >
                {{ item }}
            </button>
        </ng-container>
    }
    <ng-template
        let-index
        tuiMore
    >
        <button
            appearance="flat"
            iconStart="@tui.ellipsis"
            size="xs"
            tuiDropdownAuto
            tuiIconButton
            type="button"
            [tuiDropdown]="dropdown"
        >
            More
        </button>
        <ng-template #dropdown>
            <tui-data-list size="s">
                @for (item of items; track item) {
                    @if ($index < index) {
                        <button
                            tuiOption
                            type="button"
                        >
                            {{ item }}
                        </button>
                    }
                }
            </tui-data-list>
        </ng-template>
    </ng-template>
</tui-items-with-more>

Multiline

Hiding extra items in a multi line container.
one item
two item
three item
four item
five item
six item
seven item
eight item
nine item
ten item
eleven item
twelve item 
    
      
    

      
      
    

  
    
      <tui-items-with-more
    class="container"
    [class.container_expanded]="linesLimit === 100"
    [linesLimit]="linesLimit"
    (lastIndexChange)="lastIndex = $event"
>
    @for (item of items; track item) {
        <span
            *tuiItem
            appearance="neutral"
            size="s"
            tuiChip
            class="item"
            [class.item_visible]="$index <= lastIndex"
        >
            {{ item }} item
        </span>
    }

    <ng-template
        let-index
        tuiMore
    >
        <button
            appearance="neutral"
            iconEnd="@tui.chevron-down"
            size="s"
            tuiChip
            type="button"
            class="more"
            (click)="linesLimit = 100"
        >
            More {{ getRemaining(index) }}
        </button>
    </ng-template>
</tui-items-with-more>

    

      
      
    

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

:host {
    display: block;
    max-inline-size: 30rem;
}

.container {
    max-block-size: 4.5rem;
    overflow: hidden;

    &_expanded {
        max-block-size: 100%;
    }
}

.item {
    .transition(~'transform, opacity');

    opacity: 0;
    transform: scale(0.9);
    margin: 0 0.25rem 0.25rem 0;

    &_visible {
        opacity: 1;
        transform: scale(1);
    }
}

.more {
    margin: 0 0.25rem 0.25rem 0;
}

Cell

Showing compact version of text in a Cell in limited space.
Very very long account name
 • 1234 5678 9101 2345
 *2345
 $12 345 678 
    
      
    

      
      
    

  
    
      <tui-textfield
    tuiChevron
    [content]="content"
    [tuiTextfieldCleaner]="false"
>
    <input
        tuiSelect
        [(ngModel)]="value"
    />
    <tui-data-list-wrapper
        *tuiDropdown
        [itemContent]="content"
        [items]="items"
    />
    <ng-template
        #content
        let-item
    >
        <span tuiAvatar="@tui.star"></span>
        <span tuiTitle>
            <tui-items-with-more tuiSubtitle>
                <span *tuiItem>{{ item.name }}</span>
                <span *tuiItem>&nbsp;• {{ item.number }}</span>
                <div *tuiMore="let index">
                    @if (index < 0) {
                        <span>{{ item.name }}</span>
                    }
                    <span>&nbsp;*{{ item.number.slice(-4) }}</span>
                </div>
            </tui-items-with-more>
            ${{ item.value | tuiFormatNumber }}
        </span>
    </ng-template>
</tui-textfield>

    

      
      
    

  
    
      [tuiCell],
[tuiTitle] {
    flex: 1;
}

div {
    display: flex;
}

span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
GitHub StackBlitz