Question

我不知道如何将水平滚动添加到芯片列表中。有任何想法吗？我认为这与覆盖mat-chip-list-wrapper的更改有关。

.search-container {
    position: absolute;
    top: 25px;
    margin-left: 6%;
}
div.mat-chip-list-wrapper {
    display: flex;
    flex-wrap: nowrap;
  .mat-chip {
    flex: 0 0 auto;
  }
}
.mat-icon {
    vertical-align: middle;
}

<div class="search-container">
    <mat-chip-list>
        <mat-chip *ngFor="let $searchTerm of ($searchTerms | async)" [removable]="$searchTerm.removable" (removed)="removeSearchTerm(searchTerm)"  [matTooltip]="searchTerm">
            <mat-icon matSuffix>{{$searchTerm.icon}}</mat-icon>
            {{$searchTerm.value}} 
            <mat-icon matChipRemove *ngIf="$searchTerm.removable">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
    <div class="search">
        <mat-form-field floatLabel="never" class="remove-underline trim-whitespace">
            <span matPrefix><mat-icon matSuffix>search</mat-icon></span>
            <input matInput (keyup)="onSearchTerm($event)" placeholder="Search"  [(ngModel)]="searchInput">
        </mat-form-field>
        <button mat-button (click)="submitSearchTerm()">Submit</button>
    </div>
</div>

enter image description here

Answer 1

我认为这里的示例可以提供答案

Horizontal menu - w3schools

溢出和空白组合对于这一点至关重要。

编辑：

.scrollable {
    width: 200px;
    overflow: auto;
    white-space: nowrap;
}

mat-chip{
  display: inline-block;
}

JSFiddle

我为列表添加了一个div并使它可滚动。

将水平滚动条添加到芯片

1 个答案:

编辑：