Однострочный горизонтальный список чипов в материале Angular 6

Question

Как создать горизонтальный список фишек в Material Angular, который прокручивается по горизонтали вместо того, чтобы занимать несколько строк?

Answer 1

Этот код решил нашу проблему:

(мы также использовали encapsulation: ViewEncapsulation.None в нашем компоненте).

::-webkit-scrollbar {
  height: 0;
}

div.mat-chip-list-wrapper {
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 165px;
  white-space: nowrap;

  .mat-chip {
    flex: 0 0 auto;

    background: transparent;
    color: var(--white);
  }
}

.mat-chip-list {
  margin-left: 20px;
}

.mat-chip.mat-standard-chip .mat-chip-remove {
  color: var(--white);
}