angularjs - 垂直堆叠 md-chips AngularJS

标签 angularjs angular-material md-chip

我正在 AngularJS 中测试 md-chips 指令。

有没有办法垂直堆叠“芯片”而不是水平附加芯片?

我一直在尝试这里找到的演示:

https://material.angularjs.org/latest/demo/chips

最佳答案

以下 CSS 样式是使芯片能够垂直堆叠所需的最低限度:

md-chip {
  clear: left;
}

md-chip 的默认 CSS 是 float: left 并应用 clear: left 会导致芯片相互清除并垂直堆叠。应用 float: none 或其他一些样式来更改 float 似乎很容易破坏默认指令,并导致无法访问输入字段并添加新芯片。我注意到可能需要应用一些其他样式来修复包含芯片的 .md-chips 容器,例如限制其宽度以获得所需的结果。

参见:Vertically Stacking Chips Demo on Codepen

关于angularjs - 垂直堆叠 md-chips AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42206227/

相关文章:

javascript - ng-if 表达式评估不正确

angular - 垫自动完成多个字段

angular - mat-menu 穿透 "cdk overlay fog"

typescript - 如何在角材2中使用垫片和自动完成功能保存所选对象

javascript - 删除 Angular JS 中的辅助 HTML 注释?

javascript - angularjs 可排序 json

javascript - 如何在 AngularJS 中测试 Service 与 IndexedDB 的配合

javascript - AngularJS 表单自定义验证。无法读取未定义的属性 '$validators'

Angular 2 Material md-chips 颜色属性不起作用

reactjs - Material-ui 1.0 - 如何创建具有自动完成功能的芯片输入?