如何给mat-chip添加水平滚动条

Question

这是我在 home.component.html

中的代码

<div class="scrollmenu" >
<mat-chip-list>
  <mat-chip *ngFor="let category of categories" class="matchip">
    {{ category.cat_name }}
  </mat-chip>
</mat-chip-list>
</div>

下面可以看到home.component.css

.scrollmenu{
    width:100%;
    overflow: auto;
  white-space: wrap;
}
.matchip {
    display: inline-block;
}

但这不是 working.I 需要显示我的 mat-chips 列表可水平滚动。谢谢。

Answer 1

在 home.component.css

中这样尝试

.matchip{
    width:100%;
    display: flex;
    overflow-x: auto;
  }

Answer 2

我必须重写内部包装器的 css class mat-chip-list-wrapper 才能使水平滚动正常工作：

::ng-deep .mat-chip-list-wrapper {
  flex-wrap: unset !important;
  width: 100px;
  overflow-x: scroll;
}

您可以在 https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css

查看工作示例

Answer 3

你能试试这个吗？希望这就是您要找的

.scrollmenu{
  width: 200px;
  max-height: 40px;
  overflow-y: hidden;
}
.scrollmenu ::ng-deep .mat-chip-list-wrapper{
  flex-wrap: inherit !important;
}