Как визуализировать нетекстовое переполнение в Angular таблице материалов? - PullRequest
0 голосов
/ 18 июня 2020

TL; DR: Я хочу добиться поведения переполнения поля, такого как text-overflow: ellipsis, но для элементов нетекстовых блоков, таких как список микросхем.

Здесь подробности:

У меня есть таблица материалов angular:

<mat-table ...>
    <ng-container matColumnDef="a">
        <mat-header-cell class="a-column" *matHeaderCellDef mat-sort-header>
            <span translate>A</span>
        </mat-header-cell>
        <mat-cell class="a-column" *matCellDef="let model">
            <span>{{model.longText}}</span>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="b">
        <mat-header-cell class="b-column" *matHeaderCellDef mat-sort-header>
            <span translate>B</span>
        </mat-header-cell>
        <mat-cell class="b-column" *matCellDef="let model">
            <mat-chip-list class="nowrap">
                <mat-chip *ngFor="let tag of model.tags">
                    {{tag}}
                </mat-chip>
            </mat-chip-list>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let model; columns: displayedColumns;"></mat-row>
</mat-table>

Для столбца a я фактически использовал text-overflow: ellipsis для достижения ... в конце, когда текст перетекает вправо граница.

Столбец b содержит список фишек, в котором может быть много фишек. Я не хочу переходить к следующей строке, поэтому в настоящее время я использовал класс :after на mat-cell с полупрозрачным градиентом.

  mat-cell.b-column:after {
    content: '';
    width: 30px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(to right, transparent, white);
    opacity: 0.8;
  }

enter image description here

Но это не совсем идеально. Есть ли какие-то передовые практики или вообще лучший способ добиться этого?

Моя основная цель - проинформировать пользователя о том, что на самом деле в данный момент видно больше фишек. Идеально было бы что-то вроде (+3), показанного в кружке в конце, или, может быть, просто .... Но поскольку нет псевдокласса для переполнения, я не знаю, как это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...