angular - Material Angular 6中的单行水平芯片列表
问题描述
如何在 Material Angular 中创建一个水平滚动而不是占用多行的水平芯片列表?
解决方案
这段代码解决了我们的问题:
(我们也在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);
}
推荐阅读
- performance - 预测提取的 Coq 代码到 Haskell 的运行时间
- php - How to log details in php xml file for Twilio sms response
- linux - fork 的子进程返回值在哪里?
- javascript - 无法读取函数中未定义的属性“0”(p5.js)
- apache-kafka - Spring Cloud Stream Kafka 应用程序未使用正确的 Avro 模式生成消息
- swift - 排序协议数组,寻找父协议
- javascript - Syntax to set the color of a circle using data
- javascript - Why does fetch keep cutting out when downloading a file while manual download in the browser doesn't?
- ruby - 路径上的 Ruby 通配符
- c# - 如何将基于角色的身份添加到 Razor Pages 应用程序?